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

Question

我正在尝试使用 ionic 3 创建一个天气预报应用程序。我需要显示各种预报，如降雨、温度等，用户可以通过 fabicon select。截至目前，当我转到页面时，从 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);
}

希望对您有所帮助。

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

how to remove Geojson data from leaft without removing the base map?

geojson

leaflet

ionic-framework