将json数据传递给JavaScript而不创建新对象

Question

我正在从数据库中查询json数据，然后执行一些过滤和进一步的过程。之后，我想在地图上显示该数据，因此我通过JSInterop将其传递给JavaScript。一切似乎都在工作，除了每个方法的执行，我在我的网页上得到新的地图。所以在执行方法4次后，我在网页上有4个地图。

如果需要额外的代码请注释…

Index.razor:

<div>
<select id="layer-select" style="visibility:hidden;">
<option value="osm" selected>Open Street Map</option>
</select>
<div class="card-body p-0">
<div id="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</div>
</div>

Index.razor.cs:

[Inject] IJSRuntime JSRuntime { get; set; }
...
private async Task UpdateData()
{
this.SelectedDate = this.SelectedDate.Value.AddDays(1);
this.FilteredDataRecords = this.DataRecords
.Where(w => w.TimeNow.Date == SelectedDate.Value.Date && (w.Latitude != 0 || w.Longitude != 0))
.OrderBy(o => o.TimeNow)
.ToList();
string jsonData = JsonSerializer.Serialize(this.FilteredDataRecords);
await JSRuntime.InvokeAsync<object>("olMap.showMap", jsonData);
}

map.js:

window.olMap = {
showMap: function (jsonData) {
var HereLayers = [
{
base: 'base',
type: 'maptile',
scheme: 'osm',
},
];
...
var vectorLayer = new ol.layer.Vector({
source: loadMarineData(JSON.parse(jsonData)), //JSON.parse(jsonData)
visible: true,
style: new ol.style.Style({
stroke: new ol.style.Stroke({ color: '#d12710', width: 4 })
})
});
var map = new ol.Map({
overlays: [overlay],
target: 'map',
layers: layers,
view: new ol.View({
center: ol.proj.fromLonLat([25.2849, 60.0917]),
zoom: 8
})
});
map.addLayer(vectorLayer);
map.addLayer(nauticLayer);
....
var select = document.getElementById('layer-select');
function onChange() {
var scheme = select.value;
for (var i = 0, ii = layers.length; i < ii; ++i) {
layers[i].setVisible(HereLayers[i].scheme === scheme);
}
}
select.addEventListener('change', onChange);
onChange();
}
};

Answer 1

我以前没有使用过这个地图引擎，但我建议

var map = new ol.Map({
overlays: [overlay],
target: 'map',
layers: layers,
view: new ol.View({
center: ol.proj.fromLonLat([25.2849, 60.0917]),
zoom: 8
})
});

应该

if(! document.map){
document.map = new ol.Map({
overlays: [overlay],
target: 'map',
layers: layers,
view: new ol.View({
center: ol.proj.fromLonLat([25.2849, 60.0917]),
zoom: 8
})
});
}
const map = document.map

这基本上是说获取已经创建的地图如果它不存在，只创建一个新地图

请记住，因为您将一次又一次地使用相同的映射，因此您需要自己清理之前的运行

ie前

map.addLayer(vectorLayer);
map.addLayer(nauticLayer

for(const layer of map.getLayers())
{
map.removeLayer(layer)
}

(注意，这是演示思想的示例代码，而不是功能代码)

你也应该避免使用var关键字，而应该使用const和letvar是JS早期在引入作用域之前的一个保留，如果你以错误的方式使用它会有一些讨厌的副作用