用不同的按鈕加載兩個不同的geojson文件

Question

我正在製作帶有兩個不同多段線的谷歌地圖。一個文件只包含一個文件，另一個文件包含四個文件。 我使用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); 
    }) 
}