我正在從資料庫中查詢 json 資料，然后執行一些過濾和進一步的程式。之后我想在地圖上顯示該資料，所以我通過 JSInterop 將其傳遞給 JavaScript。一切似乎都在作業，除了在每次方法執行時我都會在我的網頁上獲得新地圖。所以在執行方法 4 次后，我在網頁上有 4 個地圖。
請評論，如果需要額外的代碼......
索引剃刀：
<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>
索引.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);
}
地圖.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();
}
};
uj5u.com熱心網友回復：
我以前沒有使用過這個地圖引擎，但我建議
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
這基本上是說獲取已經創建的地圖，如果不存在則只創建一個新地圖
請記住，因為您一遍又一遍地使用相同的地圖，您需要自己清理以前的運行
即之前
map.addLayer(vectorLayer);
map.addLayer(nauticLayer
做
for(const layer of map.getLayers())
{
map.removeLayer(layer)
}
（注意這是演示這個想法的示例代碼，而不是功能代碼）
您還應該避免使用關鍵字，而var應該使用var 是 JS 早期引入范圍之前的保留，如果您以錯誤的方式使用它會產生一些令人討厭的副作用constlet
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/471231.html