如何根据ID识别geoJSON功能? (谷歌地图)

时间:2014-09-30 14:01:58

标签: jquery google-maps google-maps-api-3 maps geojson

我正在使用滑块绘制谷歌地图,只要移动滑块,它就会绘制一些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功能着色的方法,但无法找到功能。谢谢你的帮助!

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

部分答案 - 我使用setStyle()函数取得了一些进展。这仍然只能正确地为一个国家(最后一个国家)着色。我认为每次运行该函数时,它都会返回匹配国家/地区的正确样式,但会返回其余功能的默认样式。

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

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

                        }

                        });

答案 2 :(得分: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&#39;可能会很有趣。 loadGeoJson()函数也接受不透明度或颜色等参数。我不确定这是否可行,但是会对那些以这种方式提出答案的人感兴趣。

答案 3 :(得分:0)

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

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