我有一个网站使用Google api v3从json文件显示多边形。
该网站有多个json多边形,我需要为每个多边形设置不同的颜色样式并创建形状的手柄。
我能找到的唯一示例是指纯多边形而不是json文件,有一个示例更改了json文件(由于json文件是静态的,因此我无法这样做。
样例代码:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: { lat: 45, lng: -90 }
});
//1st Json file
map.data.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
//2nd json file (same as #1 for illustration purpose)
map.data.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
// I want to style each Json file independently
map.data.setStyle({
fillColor: 'green',
strokeWeight: 1
});
// map1.setMap(map);
}
我设法使用将图层添加到地图上,
data_layer.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
// Construct the polygon.
var nLayer = new google.maps.JSON({
paths: data_layer,
strokeColor: 'green',
strokeOpacity: 0.5,
strokeWeight: 1,
fillColor: 'green',
fillOpacity: 0.8
});
nLayer.setMap(map);
我无法获取适用于地图的样式。有任何想法吗 ?
我在github上创建了一个演示,其中使用加载了多边形(边界),Data Layer
并且还展示了如何保持对各个多边形的引用并更新其特定样式。请查看此SO答案以获取摘要(我不想在这里复制它,因为它是多余的)。
主要注意:new_boundary.feature = data_layer.getFeatureById(boundary_id);
在哪里存储对特定功能的引用,可以使用以下方式随时更新哪些样式:
data_layer.overrideStyle(new_boundary.feature, {
fillColor: '#0000FF',
fillOpacity: 0.9
});
它只会更新一个多边形,而不是全部。因此,如果您在geoJSON文件中的多边形具有一些唯一的ID,或者您可以为所有ID分配ID,则可以引用并基于此更改其样式。
示例中未显示的另一个选项是具有多个数据层。您的应用程序中可能有多个数据层,例如,像这样创建它们:
var data_layer = new google.maps.Data({map: map});
var data_layer_2 = new google.maps.Data({map: map});
然后将数据加载到它们并更改样式:
data_layer.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
data_layer_2.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
data_layer.setStyle({
fillColor: 'green',
strokeWeight: 1
});
data_layer_2.setStyle({
fillColor: 'blue',
strokeWeight: 2
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句