我如何根據他們的id爲geoJSON功能添加不同顏色？ （googlemaps）

Question

我正在使用滑塊繪製一些geoJson國家/地區數據的Google地圖，只要移動滑塊即可。我寫得出每個國家的功能被稱爲「colorCountry」

$("#dateRangeSlider").on("valuesChanged", function(e, data) { 
... 
    for (i = 0; i < CountriesArray.items.length; i++) { 
     alpha = CountriesArray.items[i].downloads/maximum; 
     colourCountry(CountriesArray.items[i].country,alpha); 
    } 
... 
} 

...

colourCountry = function (countryCode, alpha) { 

    var url = 'data/' + countryCode.toString() + '.geo.json'; 

    var feature = map.data.loadGeoJson(url); 

    map.data.setStyle(function (feature) { 
     return/** @type {google.maps.Data.StyleOptions} */ 
     { 
      fillOpacity: alpha    
     }; 
    }); 
} 

以上的結果是，所有國家都具有透明度等於最終α有色值通過。 （我想要的是用類似feature.getProperty（'opacity'）的東西來替換上述造型函數中的alpha有沒有可能：

（i）在繪製時爲每個包含alpha信息的特性添加屬性在樣式的功能後使用？這篇文章確實是這樣的，雖然他們解析XML到JSON和我已經有以GeoJSON（https://developers.google.com/maps/articles/combining-data）

（二）繪製的loadGeoJson（）函數中定義的不透明度每個功能？

或者最後，我應該只使用openLayers/leaflet？我一直在尋找一種方法來根據參數單獨着色geoJSON功能一段時間，找到功能。謝謝你的幫助！

Answer 1

阿里的回答非常有幫助。對於仍在工作的人來說，我必須稍微修改代碼才能考慮'MultiPolygon'數據的情況。以下完成。

function(data) { 

    if (data.features[0].geometry.type =='Polygon'){ 
      for (var i =0; i < data.features.length; i++) { 
      // collect polygon points 
      var polyPath = []; 
       for (var p =0; p < data.features[i].geometry.coordinates[0].length; p++) { 
       polyPath.push(new google.maps.LatLng(data.features[i].geometry.coordinates[0][p][1],data.features[i].geometry.coordinates[0][p][0])); 
       } 
       var opacity = alpha; 
       var poly = new google.maps.Polygon({ 
        paths: polyPath, 
        fillColor: "red", 
        strokeColor: "white", 
        strokeOpacity: 0.7, 
        strokeWeight: 2, 
        fillOpacity: opacity, 
        map: map 
        }); 
       } 
     } 

    if (data.features[0].geometry.type =='MultiPolygon'){ 
      for (var i =0; i < data.features.length; i++) { 
      // collect polygon points 

      for (j=0;j<data.features[i].geometry.coordinates.length;j++) { 
      var polyPath = []; 

       for (var p =0; p < data.features[i].geometry.coordinates[j][0].length; p++) { 
       polyPath.push(new google.maps.LatLng(data.features[i].geometry.coordinates[j][0][p][1],data.features[i].geometry.coordinates[j][0][p][0])); 
       } 
       var opacity = 4*alpha; 
       var poly = new google.maps.Polygon({ 
        paths: polyPath, 
        fillColor: "red", 
        strokeColor: "white", 
        strokeOpacity: 0.7, 
        strokeWeight: 2, 
        fillOpacity: opacity, 
        map: map 
        }); 
      } 
     } 


    } 

    } 

這可能是有趣的嘗試超載gmaps' loadGeoJson（）函數也接受狀混濁，或顏色參數。我不確定這是否可行，但會對那些以這種方式提出答案的人感興趣。

Answer 2

部分回答 - 我用setStyle（）函數取得了一些進展。這仍然只適用於一個國家（最後一個國家）。我認爲每次函數運行時都會返回匹配國家的正確樣式，但會爲其餘的功能返回默認樣式。

map.data.setStyle(function(feature){ 
var featurecountry = feature.getProperty('name'); 
    if (featurecountry == countryCode) { 

         return/** @type {google.maps.Data.StyleOptions} */ { 
          fillOpacity: alpha    }; 

         } 

         }); 

Answer 3

你需要做的，他們做的XML，但既然你已經GeoJSON的話，我會做這個

把一個對象的GeoJSON的文件，那麼它的數據傳遞給該功能同樣

function drawPolys(data) { 
for (var i =0; i < data.features.length; i++) { 
// collect polygon points 
var polyPath = []; 
    for (var p =0; p < data.features[i].geometry.coordinates[0].length; p++) { 
    polyPath.push(new google.maps.LatLng(data.features[i].geometry.coordinates[0][p][1],data.features[i].geometry.coordinates[0][p][0])); 
    } 
    var opacity = data.features[i].properties.opacity; 
    var poly = new google.maps.Polygon({ 
     paths: polyPath, 
     strokeColor: "white", 
     strokeOpacity: 0.7, 
     strokeWeight: 1, 
     fillOpacity: opacity, 
     map: map 
     }); 
    } 
} 

這會在地圖上使用帶有由不透明屬性設置的不透明度的ploygon類來創建geojson，或者您可以調用一個方法根據每個poly的值決定不透明度。

Answer 4

如果您的應用程序沒有與Google地圖綁定，您可以嘗試geojson2svg。檢查color coded example，當滑塊移動時更改值時，可以更改（添加和刪除）各個國家/地區svg路徑元素的類。

免責聲明：我是geojson2svg的作者。