我有一个网站使用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);
我无法将样式应用于地图。任何想法?
答案 0 :(得分:9)
我创建了一个demo on github,我使用Data Layer
加载多边形(边界),并且还展示了如何保持对相应多边形的引用并更新它们的特定样式。查看this SO answer代码段(我不想在此处复制,因为它是多余的)。
主要注意:new_boundary.feature = data_layer.getFeatureById(boundary_id);
我存储了对特定功能的引用,我可以使用例如以下任何时候更新这些样式:
data_layer.overrideStyle(new_boundary.feature, {
fillColor: '#0000FF',
fillOpacity: 0.9
});
它只会更新一个多边形,而不是所有多边形。因此,如果geoJSON文件中的多边形具有一些唯一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
});
答案 1 :(得分:1)
我认为最好的方法是在您加载的json文件中向您的功能添加属性,如下所示:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"county": "hernando"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-82.7784371,
28.694206
],
[
-82.778214,
28.6939659
],
]
]
]
}
}
]
}
请注意重要部分:
"properties": {
"county": "hernando"
},
每个json文件可以具有任意数量的properties
然后在您的javascript文件中,您可以执行以下操作:
var map = new google.maps.Map($el[0], args);
map.data.loadGeoJson(
'/wp-content/themes/hello-theme-child-master/county-json/pinellas.json'
);
map.data.loadGeoJson(
'/wp-content/themes/hello-theme-child-master/county-json/pasco.json'
);
map.data.loadGeoJson(
'/wp-content/themes/hello-theme-child-master/county-json/hillsborough.json'
);
map.data.setStyle( function ( feature ) {
var county = feature.getProperty('county');
var color = '';
if ( county === 'pasco ) {
color = 'orange'
}
else {
color = 'green'
}
return {
fillColor: color,
strokeWeight: 1
};
});
要注意的重要部分是必须将一个函数传递给setStyle
,以便它自动迭代每个功能
答案 2 :(得分:0)
我想你会想要单独添加多边形及其样式。从示例(https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays)
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);