在不创建新对象的情况下将 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

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

请记住，因为您一遍又一遍地使用同一张地图，您将需要自己清理之前的运行

即之前

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

做

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

（注意这是演示想法的示例代码，不是功能代码）

你还应该避免使用 var 关键字，而应该使用 const 和 let var 是 JS 早期引入作用域之前的遗留物，它具有如果你以错误的方式使用它，一些讨厌的副作用

在不创建新对象的情况下将 json 数据传递给 JavaScript

Pass json data to JavaScript without creating new object

javascript

c#

asp.net-core

blazor

blazor-jsinterop