从GeoJSON渲染多边形和MultiPolygons和/或以不同的填充颜色，标签等动态渲染 [英] Rendering Polygons and MultiPolygons From GeoJSON and/or Dynamically in different Fill Colors, Labels Etc
本文介绍了从GeoJSON渲染多边形和MultiPolygons和/或以不同的填充颜色，标签等动态渲染的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图渲染具有不同填充颜色的多边形，但是来自geoJson，并且在动态渲染之后也会这样做。我实际上想看到两种方法。
I am trying to render polygons with different fill colours but from geoJson and am also open to doing so after rendering, dynamically. I would actually like to see both approaches.
我当前的代码在geojson中设置了颜色，但它仅作为默认呈现（黑色）。
My current code has colour set in the geojson but it is only rendering as the default (black).
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var x=new google.maps.LatLng(40.75597,-73.974228);
function initialize()
{
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"fillColor": "blue"
},
"geometry": {"type":"Polygon","coordinates":[[[-73.98779153823898,40.718233223261],[-74.004946447098,40.723575517498],[-74.006771211624,40.730592217474],[-73.99010896682698,40.746712376146], [-73.973135948181,40.73974615047701],[-73.975120782852,40.736128627654],[-73.973997695541,40.730787341083],[-73.983317613602,40.716639396436],[-73.98779153823898,40.718233223261]]]}
},
{
"type": "Feature",
"properties": {
"fillColor": "red"
},
"geometry": {"type":"MultiPolygon","coordinates":[[[[-73.98779153823898,40.718233223261],[-73.987373113632,40.718062457927],[-73.986815214157,40.717785979789],[-73.989978364944,40.71747697345301],[-73.983317613602,40.716639396436],[-73.983081579208,40.717111043043],[-73.982888460159,40.717346865093],[-73.982352018356,40.718347066574],[-73.98201942443798,40.719119569628],[-73.981890678406,40.719477357478],[-73.981322050095,40.72055070949],[-73.981043100357,40.720941015022],[-73.98057103156998,40.721599650417],[-73.98014187812798,40.72217696744],[-73.979691267014,40.722803066157],[-73.978382349014,40.724600018078],[-73.977502584457,40.725795248823],[-73.97659063339198,40.727006719305],[-73.97616147994998,40.727673425196],[-73.975646495819,40.728340124407],[-73.973972797394,40.730657258741],[-73.973897695541,40.730787341083],[-73.973962068558,40.731080025424],[-73.974262475967,40.732242619953],[-73.974434137344,40.732811714764],[-73.975056409836,40.735128693386],[-73.975120782852,40.735746540724],[-73.975120782852,40.736128627654],[-73.975002765656,40.736648912711],[-73.974788188934,40.737039123833],[-73.973811864853,40.738453619965],[-73.973361253738,40.739128340284],[-73.973243236542,40.739429117016],[-73.973135948181,40.73974615047701],[-73.97337198257398,40.739884344077],[-73.97344708442698,40.739868086021],[-73.97357583046,40.739876215049],[-73.97401571273798,40.740095698439],[-73.97419810295098,40.740136343432],[-73.974477052689,40.74012821443501],[-73.975796699524,40.74070537072101],[-73.980302810669,40.742591254937],[-73.983424901962,40.74393247626],[-73.988628387451,40.746119015457],[-73.99010896682698,40.746712376146],[-73.99053812027,40.746143400247],[-73.99099946022,40.74549313611601],[-73.9923620224,40.74363984846],[-73.999196653366,40.741111815805],[-73.995484113693,40.739355955233],[-73.996857404709,40.737445591319],[-73.998284339905,40.735486395176],[-74.00009751319898,40.733014961731],[-74.000591039658,40.732291399699],[-74.000998735428,40.731771080565],[-74.001084566116,40.731641000145],[-74.001771211624,40.730592217474],[-74.00286555290198,40.72847021127901],[-74.003208875656,40.727705947263],[-74.00350928306598,40.727006719305],[-74.004056453705,40.725600110575],[-74.00466799736,40.724160948332],[-74.00488257408098,40.723705613684],[-74.004946947098,40.723575517498],[-74.003230333328,40.72327466909401],[-74.003080129623,40.723266538038],[-74.002522230148,40.723030736958],[-73.99914264679,40.721380106009],[-73.998337984085,40.721022328386],[-73.997876644135,40.721526469028],[-73.997340202332,40.72134758085],[-73.994904756546,40.72053444671],[-73.99302721023598,40.719867669303],[-73.990634679794,40.719127701191],[-73.98779153823898,40.718233223261]]]]}
}
]
};
var mapProp = {
center: new google.maps.LatLng(40.75597, -73.974228),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
map.data.addGeoJson(data);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
推荐答案
根据关于样式的文档，这就是您对GeoJSON数据的样式：
According to the documentation on styling, this is how you style GeoJSON data:
map.data.setStyle(function (feature) {
var color = feature.getProperty('fillColor');
return {
fillColor: color,
strokeWeight: 1
};
});
有关动态样式，请参阅文档中的示例
代码片段：
For dynamic styling, please see the example in the documentation code snippet:
var x = new google.maps.LatLng(40.75597, -73.974228);
function initialize() {
var data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"fillColor": "blue"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-73.98779153823898, 40.718233223261],
[-74.004946447098, 40.723575517498],
[-74.006771211624, 40.730592217474],
[-73.99010896682698, 40.746712376146],
[-73.973135948181, 40.73974615047701],
[-73.975120782852, 40.736128627654],
[-73.973997695541, 40.730787341083],
[-73.983317613602, 40.716639396436],
[-73.98779153823898, 40.718233223261]
]
]
}
}, {
"type": "Feature",
"properties": {
"fillColor": "red"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-73.98779153823898, 40.718233223261],
[-73.987373113632, 40.718062457927],
[-73.986815214157, 40.717785979789],
[-73.989978364944, 40.71747697345301],
[-73.983317613602, 40.716639396436],
[-73.983081579208, 40.717111043043],
[-73.982888460159, 40.717346865093],
[-73.982352018356, 40.718347066574],
[-73.98201942443798, 40.719119569628],
[-73.981890678406, 40.719477357478],
[-73.981322050095, 40.72055070949],
[-73.981043100357, 40.720941015022],
[-73.98057103156998, 40.721599650417],
[-73.98014187812798, 40.72217696744],
[-73.979691267014, 40.722803066157],
[-73.978382349014, 40.724600018078],
[-73.977502584457, 40.725795248823],
[-73.97659063339198, 40.727006719305],
[-73.97616147994998, 40.727673425196],
[-73.975646495819, 40.728340124407],
[-73.973972797394, 40.730657258741],
[-73.973897695541, 40.730787341083],
[-73.973962068558, 40.731080025424],
[-73.974262475967, 40.732242619953],
[-73.974434137344, 40.732811714764],
[-73.975056409836, 40.735128693386],
[-73.975120782852, 40.735746540724],
[-73.975120782852, 40.736128627654],
[-73.975002765656, 40.736648912711],
[-73.974788188934, 40.737039123833],
[-73.973811864853, 40.738453619965],
[-73.973361253738, 40.739128340284],
[-73.973243236542, 40.739429117016],
[-73.973135948181, 40.73974615047701],
[-73.97337198257398, 40.739884344077],
[-73.97344708442698, 40.739868086021],
[-73.97357583046, 40.739876215049],
[-73.97401571273798, 40.740095698439],
[-73.97419810295098, 40.740136343432],
[-73.974477052689, 40.74012821443501],
[-73.975796699524, 40.74070537072101],
[-73.980302810669, 40.742591254937],
[-73.983424901962, 40.74393247626],
[-73.988628387451, 40.746119015457],
[-73.99010896682698, 40.746712376146],
[-73.99053812027, 40.746143400247],
[-73.99099946022, 40.74549313611601],
[-73.9923620224, 40.74363984846],
[-73.999196653366, 40.741111815805],
[-73.995484113693, 40.739355955233],
[-73.996857404709, 40.737445591319],
[-73.998284339905, 40.735486395176],
[-74.00009751319898, 40.733014961731],
[-74.000591039658, 40.732291399699],
[-74.000998735428, 40.731771080565],
[-74.001084566116, 40.731641000145],
[-74.001771211624, 40.730592217474],
[-74.00286555290198, 40.72847021127901],
[-74.003208875656, 40.727705947263],
[-74.00350928306598, 40.727006719305],
[-74.004056453705, 40.725600110575],
[-74.00466799736, 40.724160948332],
[-74.00488257408098, 40.723705613684],
[-74.004946947098, 40.723575517498],
[-74.003230333328, 40.72327466909401],
[-74.003080129623, 40.723266538038],
[-74.002522230148, 40.723030736958],
[-73.99914264679, 40.721380106009],
[-73.998337984085, 40.721022328386],
[-73.997876644135, 40.721526469028],
[-73.997340202332, 40.72134758085],
[-73.994904756546, 40.72053444671],
[-73.99302721023598, 40.719867669303],
[-73.990634679794, 40.719127701191],
[-73.98779153823898, 40.718233223261]
]
]
]
}
}]
};
var mapProp = {
center: x,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
map.data.addGeoJson(data);
map.data.setStyle(function (feature) {
var color = feature.getProperty('fillColor');
return {
fillColor: color,
strokeWeight: 1
};
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #googleMap {
width: 100%;
height: 100%;
}
<script src="https://maps.google.com/maps/api/js"></script>
<div id="googleMap"></div>
这篇关于从GeoJSON渲染多边形和MultiPolygons和/或以不同的填充颜色，标签等动态渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
