我如何根据他们的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的作者。