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