Question

我正在使用滑块绘制谷歌地图，只要移动滑块，它就会绘制一些geoJson国家/地区数据。我为绘制每个国家而编写的函数称为“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              
        };
    });
}

上述结果是，所有国家/地区的颜色均等于传递的最终Alpha值。（我想要的是在上面的样式函数中使用feature.getProperty（'opacity'）替换alpha是否可以：

（i）在绘制它们以便稍后在样式函数中使用时，为每个包含alpha信息的要素添加属性？虽然这篇文章将XML解析为JSON，但我已经有了geoJSON（https://developers.google.com/maps/articles/combining-data）

（ii）使用loadGeoJson（）函数中定义的不透明度绘制每个特征？

或者最后，我应该使用openLayers / leaflet吗？我一直在寻找一种基于参数单独为geoJSON功能着色的方法，但无法找到功能。谢谢你的帮助！

Answer 1

你需要像对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，其中不透明度由属性不透明度设置，或者您可以调用方法根据每个多边形中的值确定不透明度。

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

阿里的回答非常有帮助。对于仍然在做这方面的人，我不得不稍微调整代码，以便考虑“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＆＃39;可能会很有趣。 loadGeoJson（）函数也接受不透明度或颜色等参数。我不确定这是否可行，但是会对那些以这种方式提出答案的人感兴趣。

Answer 4

如果您的应用程序未与谷歌地图捆绑在一起，您可以尝试geojson2svg。检查color coded example，您可以在滑块移动时更改值时更改（添加和删除）国家/地区svg路径元素的类。

免责声明：我是geojson2svg的作者。

如何根据ID识别geoJSON功能？（谷歌地图）

4 个答案:

如何根据ID识别geoJSON功能？ （谷歌地图）

4 个答案:

如何根据ID识别geoJSON功能？（谷歌地图）