Leaflet 在Blazor SPA上嵌入传单地图
如何使用JSInterop在Blazor SPA上嵌入传单地图，应该定义哪些对象，以及如何将表示在地图上单击位置的数据从JavaScript传递到Blazor。注意：下面的示例代码是在WebAssembly Blazor应用程序中创建和测试的 非静态字段、方法或属性“member”需要对象引用 让我们创建object类，初始化时，其对象引用将传递给JavaScript的对象。当用户单击地图上的某个位置时，会为JS map对象触发一个单击事件，从中调用C#object的JSInvokable方法并传递纬度和经度 GCSService.cs 请注意，您的JavaScript对象仅初始化一次，并且是通过OnAfterRenderAsync生命周期方法初始化的 下面是相关的JavaScript代码，应该放在index.html文件的底部，blazor.webassembly.js的script元素下面Leaflet 在Blazor SPA上嵌入传单地图,leaflet,blazor,blazor-server-side,blazor-client-side,blazor-webassembly,Leaflet,Blazor,Blazor Server Side,Blazor Client Side,Blazor Webassembly,如何使用JSInterop在Blazor SPA上嵌入传单地图，应该定义哪些对象，以及如何将表示在地图上单击位置的数据从JavaScript传递到Blazor。注意：下面的示例代码是在WebAssembly Blazor应用程序中创建和测试的 非静态字段、方法或属性“member”需要对象引用 让我们创建object类，初始化时，其对象引用将传递给JavaScript的对象。当用户单击地图上的某个位置时，会为JS map对象触发一个单击事件，从中调用C#object的JSInvokable方法并
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin="">
</script>
<script type="text/javascript">
window.leafletJsFunctions = {
initialize: function (dotnetHelper) {
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
L.marker([51.5, -0.09]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap).bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
// Invoke the instance method GetLatLng, passing it the
// Latitude and Logitude value
return dotnetHelper.invokeMethodAsync('GetLatLng',
e.latlng.toString());
}
mymap.on('click', onMapClick);
}
};
</script>
window.jsfunctions={
初始化：函数（dotnetHelper）{
var mymap=L.map（'mapid'）.setView（[51.505，-0.09]，13）；
L.tileLayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌=pk.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbndhrqcmz3n3gifq.rjcfig214ariislb6b5aw'{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒/街道-v11”，
tileSize:512，
Zoomofset:-1
}).addTo（mymap）；
L.标记（[51.5，-0.09]）。添加到（mymap）
.bindPopup（“你好，世界！
我是一个弹出窗口。”）.openPopup（）；
L.圆圈（[51.508，-0.11]，500{
颜色：“红色”，
填充颜色：“#f03”，
填充不透明度：0.5
}).addTo（mymap）.bindPopup（“我是一个圆圈”）；
L.多边形([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo（mymap）.bindPopup（“我是一个多边形”）；
var popup=L.popup（）；
函数onMapClick（e）{
//调用实例方法GetLatLng，将
//纬度和逻辑度值
返回dotnetHelper.invokeMethodAsync（'GetLatLng'，
e、 latlng.toString（））；
}
mymap.on（'click'，onmaclick）；
}
};
@page "/"
@implements IDisposable
@inject IJSRuntime JSRuntime
@if (GCS != null)
{
<div>Latitude and Longitude: @GCS.LatLng</div>
}
<div id="mapid"></div>
@code{
private DotNetObjectReference<GCSService> objRef;
private GCSService GCS;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<object>(
"leafletJsFunctions.initialize", objRef);
}
base.OnAfterRender(firstRender);
}
protected override void OnInitialized()
{
GCS = new GCSService();
objRef = DotNetObjectReference.Create(GCS);
GCS.Notify += OnNotify;
}
public void Dispose()
{
GCS.Notify -= OnNotify;
objRef?.Dispose();
}
public async Task OnNotify()
{
await InvokeAsync(() =>
{
StateHasChanged();
});
}
}
#mapid {
height: 400px;
}
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin="">
</script>
<script type="text/javascript">
window.leafletJsFunctions = {
initialize: function (dotnetHelper) {
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
L.marker([51.5, -0.09]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap).bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
// Invoke the instance method GetLatLng, passing it the
// Latitude and Logitude value
return dotnetHelper.invokeMethodAsync('GetLatLng',
e.latlng.toString());
}
mymap.on('click', onMapClick);
}
};
</script>