如何在不删除底图的情况下从传单中删除 Geojson 数据？

Question

我正在尝试使用 ionic 3 创建一个天气预报应用程序。我需要显示各种预报，例如雨量、温度等，用户可以通过 fabicon 进行选择。截至目前，当我进入页面时，从 geojson 添加的第一个数据正确显示在页面上，但是当我将工厂更改为例如从雨到温度时，数据被绘制但地图正在消失，如下图。我已经厌倦了 clearlayers 和 removelayer 但两者都给了我相同的结果。我需要能够在不删除地图的情况下显示新数据。以下是我的代码。

     updateFAB(fc, fab:FabContainer){
        fab.close();
        this.forecast = fc;
        console.log('forecast', this.forecast);
        console.log('forecast date', this.date);
        this.base_url = "";
        // geojsonLayer =  null;
        if(this.forecast == 'rainfall'){
            this.map.removeLayer(maingeojsonLayer);
            this.base_url = 'someurl';
        } else if (this.forecast == 'tmax'){
            this.map.removeLayer(maingeojsonLayer);
            this.base_url = 'someurl';
        } else if (this.forecast == 'tmin'){
            this.map.removeLayer(maingeojsonLayer);
            this.base_url = 'some url';
        }
        this.presentToast('Fetching new data....');
        this.updateForecast();
      }

    updateForecast(){
    geojsonLayer = new L.GeoJSON.AJAX(this.base_url,
    {
      style: function(feature){
        return {
          fillColor: feature.properties['fill'],
          fillOpacity: 0.7,
          color: feature.properties['stroke'],
          opacity: 0.7,
          weight: 0.0,
        }
      },
      onEachFeature: function(feature, layer){
        var title =  feature.properties.title;
        var fill_color = feature.properties.fill;
        var stroke_color = feature.properties.stroke;
        console.log('title', title);
        layer.on('click', (event) => {
          console.log("clicked");
          var value = feature.properties['title'] + 'mm';
          console.log("value", value);
          layer.bindPopup(value).openPopup();
        });
      }
    });
    // geojsonLayer.addTo(this.map);
    // geojsonLayer.addTo(maingeojsonLayer);     
    maingeojsonLayer.addTo(this.map);
    maingeojsonLayer.addLayer(geojsonLayer);
  }

geojson 层和 maingeojson 层是全局声明的

Answer 1

以下解决方案对我来说很好：

var map = L.map('map', {
        layers: [googleStreets],
        .......
        .......
        zoomControl: false
    });

var forecastLayer;
updateForecast(){
forecastLayer= new L.GeoJSON.AJAX(this.base_url,
{
  style: function(feature){
    return {
      fillColor: feature.properties['fill'],
      fillOpacity: 0.7,
      color: feature.properties['stroke'],
      opacity: 0.7,
      weight: 0.0,
    }
  },
  onEachFeature: function(feature, layer){
    var title =  feature.properties.title;
    var fill_color = feature.properties.fill;
    var stroke_color = feature.properties.stroke;
    console.log('title', title);
    layer.on('click', (event) => {
      console.log("clicked");
      var value = feature.properties['title'] + 'mm';
      console.log("value", value);
      layer.bindPopup(value).openPopup();
    });
  }
});
 map.addLayer(forecastLayer);
}

对于删除任何层：

 if (map.hasLayer(forecastLayer)) {
                map.removeLayer(forecastLayer);
}

希望对你有帮助。