我想在Google Maps上显示有关土耳其的人口密度地图,并且我有GeoJson文件来创建多边形。将整个图层显示为一层非常简单且相当快。但是我确实需要使用多边形的名称填充这些多边形。我用来显示整个多边形的代码在下面。
provinces_of_turkey = new google.maps.Data(); // POLYGON FOR PROVINCES
provinces_of_turkey.loadGeoJson(
'https://gist.githubusercontent.com/oividioscaeremos/5905f9632a1c0ae92c5eb52d1cc40dce/raw/42accdc50510444017c52f3be141b70f706af8e3/provinces_of_turkey.json'
);
provinces_of_turkey.setStyle(function (feature) {
return ({
fillColor: '#FF8686',
zIndex: 3,
fillOpacity: .0,
strokeColor: '#000000',
strokeWeight: 1
});
});
provinces_of_turkey.setMap(map);
到目前为止,我需要用不同的填充颜色分别显示这些多边形,我可以使用下面显示的代码显示一些多边形,但是以这种格式显示整个地图会使浏览器崩溃,因此我需要另一个解决方案。如果我可以将坐标数组快速转换为google.maps.LatLng数组,则可以解决我的问题。
我用来分别显示每个多边形的内容;
fetch(
'https://gist.githubusercontent.com/oividioscaeremos/5905f9632a1c0ae92c5eb52d1cc40dce/raw/42accdc50510444017c52f3be141b70f706af8e3/provinces_of_turkey.json'
)
.then(function (response) {
response.json().then(function (results) {
for (var i = 0; i < results.features.length; i++) {
if(results.features[i].geometry.type == "MultiPolygon"){
continue;
}
var paths = [];
for (var i = 0; i < results.features[i].geometry.coordinates[0].length; i++) {
var coordinates = results.features[i].geometry.coordinates[0][i];
var latLng = new google.maps.LatLng(coordinates[1], coordinates[0]);
paths.push(latLng);
}
provinces_of_turkey = new google.maps.Polygon({
paths: paths,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
provinces_of_turkey.setMap(map);
}
});
});
如何在不使浏览器崩溃的情况下为每个多边形填充颜色? (我需要使用Google Maps JavaScript API来完成此操作,因为在同一张地图上,我还要显示一些其他数据。)