使用不同的按钮加载两个不同的 geojson 文件

Question

我正在用两条不同的折线制作 google 地图。一个文件只有一个，另一个文件有四个。我用 vm.loadDiggit('js/file/diggitOne.geojson') 制作了按钮，另一个用 vm.loadDiggit('js/file/diggitTwo.geojson') 制作了按钮。

它们看起来像这样：

<a class="btn btn green" ng-click="vm.loadDiggit('js/lib/diggitOne.geojson')"> Diggit one</a> <a class="btn btn green" ng-click="vm.loadDiggit('js/lib/diggitTwo.geojson')">Diggit two</a>

在我的 javascript 文件中，我用这个函数加载它们：

vm.loadDiggit = function(filename){
  var promise = $.getJSON(filename);
    promise.then(function(data){
      cachedGeoJson = data;
      map.data.addGeoJson(cachedGeoJson);
    })
}

这到目前为止有效，但是当我多次按下按钮时，会在另一层之上出现越来越多的层。那么如何在两个文件之间轻松切换呢？

Answer 1

这将帮助您在添加新数据之前清除所有数据。

map.data.forEach(function(feature) {
    map.data.remove(feature);
});

这将是您的新代码：

vm.loadDiggit = function(filename){
  var promise = $.getJSON(filename);
    promise.then(function(data){
      cachedGeoJson = data;
      map.data.forEach(function(feature) {
        map.data.remove(feature);
      });
      map.data.addGeoJson(cachedGeoJson);
    })
}

使用不同的按钮加载两个不同的 geojson 文件

Load two different geojson files in with different buttons

javascript

json

geojson