在Google Maps API中为geoJSON对象设置不同的填充颜色 [英] Setting different fill colors for geoJSON objects in Google Maps API
问题描述
我创建了一个包含geoJSON多边形数据层的地图。我已经使用maps.data.SetStyle成功设置了填充颜色。现在我想为一组可以通过唯一标识符识别的多边形创建不同的样式。
Google maps文档使用.getProperty（），但是当我遍历创建数据层的json对象时，我引发了一个错误。
函数如下：
$ p $ map.data.setStyle（function （jsonData）{
for（var i = 0; i< = 516; i ++）{
var SD_NAME = jsonData.features [i] .getProperty（'properties.SD_NAME'）;
return {
fillColor：'green'，
strokeWeight：1
}
}
}）;
错误信息：
Uncaught TypeError：无法读取未定义的属性'0'
如果您看 Google文档中的示例和 设置所有要素的样式在集合中。通过overrideStyle（）在每个特征基础上指定的样式将继续应用。 类似这样的设置会将对象设置为SD_NAME 等于Gee的财产被绿色填充，其他一切都将填充灰色： 代码段： I created a map that has a data layer of geoJSON polygons on it. I have successfully set the fill color using maps.data.SetStyle. Now I want to create a different style for a certain set of polygons that I can identify through unique identifiers. The Google maps documentation uses .getProperty() but when I loop through the json object that created the data layer I am thrown ane error. Function is below: Error Message:
Uncaught TypeError: Cannot read property '0' of undefined If you look at the example in the Google Documentation and the documentation itself, the setStyle function allows the colors of the polygons to be changed dynamically or based on their properties: setStyle(style:Data.StylingFunction|Data.StyleOptions) Return Value: None Sets the style for all features in the collection. Styles specified on a per-feature basis via overrideStyle() continue to apply.
Pass either an object with the desired style options, or a function that computes the style for each feature. The function will be called every time a feature's properties are updated. Something like this will set the object(s) with the "SD_NAME" property equal to "Gee" to be filled with green, everything else will be filled with gray: code snippet:
这篇关于在Google Maps API中为geoJSON对象设置不同的填充颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ $返回值：无
传递具有所需样式选项的对象，或为每个要素计算样式的函数。每次更新某个功能的属性时都会调用该功能。
map.data.setStyle （function（feature）{
var SD_NAME = feature.getProperty（'SD_NAME'）;
var color =gray;
if（SD_NAME ==Gee）{
color =green;
}
return {
fillColor：color，
strokeWeight：1
}
}）;
var map;函数initMap（）{map = new google.maps.Map（document.getElementById（'map'），{zoom： 4，center：{lat：-28，lng：137}}）; //加载GeoJSON。 // map.data.loadGeoJson（//'https://storage.googleapis.com/mapsdevsite/json/google.json'）; map.data.addGeoJson（geoJsonData）; map.data.setStyle（function（feature）{var SD_NAME = feature.getProperty（'SD_NAME'）; var color =grey; if（SD_NAME ==Gee）{color =green;} return {fillColor ：color，strokeWeight：1}}）;} var geoJsonData = {type：FeatureCollection，features：[{type：Feature，properties：{letter：G， color：blue，rank：7，ascii：71，SD_NAME：Gee}，geometry：{type：Polygon，coordinates [[123.61，-22.14]，[122.38，-21.73]，[121.06，-21.69]，[119.66，-22.22]，[119.00，-23.40]，[118.65，-24.76]，[118.43，-26.07] ，[118.78，-27.56]，[119.22，-28.57]，[120.23，-29.49]，[121.77，-29.87]，[123.57，-29.64]，[124.45，-29.03]，[124.71，-27.95]， [124.80，-26.70]，[124.80，-25.60]，[123.61，-25.64]，[122.56，-2 [123.57，-27.68]，[123.35，-28.18]，[123.57，-27.68]，[121.72，-25.72]，[121.81，-26.62]，[121.86，-26.98]，[122.60，-26.90] ]，[122.51，-28.38]，[121.77，-28.26]，[121.02，-27.91]，[120.49，-27.21]，[120.14，-26.50]，[120.10，-25.64]，[120.27，-24.52] ，[120.67，-23.68]，[121.72，-23.32]，[122.43，-23.48]，[123.04，-24.04]，[124.54，-24.28]，[124.58，-23.20]，[123.61，-22.14]] ]}}，{type：Feature，properties：{letter：o，color：red，rank：15，ascii：111} ，geometry：{type：Polygon，coordinates：[[[128.84，-25.76]，[128.18，-25.60]，[127.96，-25.52]，[127.88，-25.52]，[127.70 ，-25.60]，[127.26，-25.79]，[126.60，-26.11]，[12 6.16，-26.78]，[126.12，-27.68]，[126.21，-28.42]，[126.69，-29.49]，[127.74，-29.80]，[128.80，-29.72]，[129.41，-29.03]，[129.72 ，[129.68，-27.21]，[129.33，-26.23]，[128.84，-25.76]]，[[128.45，-27.44]，[128.32，-26.94]，[127.70，-26.82] 127.45，-27.05]，[127.17，-27.80]，[127.57，-28.22]，[128.10，-28.42]，[128.49，-27.80]，[128.45，-27.44]]]}}，{type feature，properties：{letter：o，color：yellow，rank：15，ascii：111}，geometry：{type ：多边形，坐标：[[[131.87，-25.76]，[131.35，-26.07]，[130.95，-26.78]，[130.82，-27.64]，[130.86，-28.53]，[131.26， - 29.22]，[131.92，-29.76]，[132.45，-29.87]，[ [133.72，-29.34]，[134.07，-28.80]，[134.20，-27.91]，[134.07，-27.21]，[133.81，-26.31]，[133.37，-25.83]，[132.71 ，[131.74，-27.56]，[131.77，-25.76]，[[133.15，-27.17]，[132.71，-26.86]，[132.09，-26.90]，[131.79，-28.26] 132.36，-28.45]，[132.93，-28.34]，[133.15，-27.76]，[133.15，-27.17]]]}}，{type：Feature，properties：{letter： g，color：blue，rank：7，ascii：103，SD_NAME：Gee}，geometry：{type：Polygon坐标：[[[138.12，-25.04]，[136.84，-25.16]，[135.96，-25.36]，[135.26，-25.99]，[135，-26.90]，[135.04，-27.91]，[135.26， -28.88]，[136.05，-29.45]，[137.02，-29.49]，[137.81， -29.49]，[137.94，-29.99]，[137.90，-31.20]，[137.85，-32.24]，[136.88，-32.69]，[136.45，-32.36]，[136.27，-31.80]，[134.95， - [135.20，-33.41]，[136.14，-33.76]，[137.06，-33.83]，[138.12，-33.65]，[138.86，-33.21]，[139.30，-32.28] ]，[139.30，-31.24]，[139.30，-30.14]，[139.21，-28.96]，[139.17，-28.22]，[139.08，-27.41]，[139.08，-26.47]，[138.99，-25.40] ，[138.73，-25.00]，[138.12，-25.04]，[[137.50，-26.54]，[136.97，-26.47]，[136.49，-26.58]，[136.31，-27.13]，[136.31，-27.72 ]，[136.58，-27.99]，[137.50，-28.03]，[137.68，-27.68]，[137.59，-26.78]，[137.50，-26.54]]]}}，{type：Feature，， 属性：{letter： l，color：green，rank：12，ascii：108}，geometry：{type：Polygon，coordinates：[[[ ，-21.04]，[140.31，-29.42]，[141.67，-29.49]，[141.59，-20.92]，[140.14，-21.04]]]}，{type：Feature，properties： {letter：e，color：red，rank：5，ascii：101}，geometry：{type：Polygon， ：[[[144.14，-27.41]，[145.67，-27.52]，[146.86，-27.09]，[146.82，-25.64]，[146.25，-25.04]，[145.45，-24.68]，[144.66，-24.60 ]，[144.09，-24.76]，[143.43，-25.08]，[142.99，-25.40]，[142.64，-26.03]，[142.64，-27.05]，[142.64，-28.26]，[143.30，-29.11] ，[144.18，-29.57]，[145.41，-29.64]，[146.46，-29.19]，[146.64，-28.72]，[ 146.82，-28.14]，[144.84，-28.42]，[144.31，-28.26]，[144.14，-27.41]]，[[144.18，-26.39]，[144.53，-26.58]，[145.19，-26.62]， [145.72，-26.35]，[145.81，-25.91]，[145.41，-25.68]，[144.97，-25.68]，[144.49，-25.64]，[144，-25.99]，[144.18，-26.39]]] }}]}; html，body {height：100 ％;保证金：0; padding：0;}＃map {height：100％;} < div id =map>< / div><！ - 用您自己的API密钥替换密钥参数的值。 - >< script async defer src =https://maps.googleapis.com/maps/api/js?callback=initMap>< / script> map.data.setStyle(function(jsonData){
for(var i = 0; i <= 516; i++){
var SD_NAME =jsonData.features[i].getProperty('properties.SD_NAME');
return{
fillColor: 'green',
strokeWeight: 1
}
}
});
map.data.setStyle(function(feature) {
var SD_NAME = feature.getProperty('SD_NAME');
var color = "gray";
if (SD_NAME == "Gee") {
color = "green";
}
return {
fillColor: color,
strokeWeight: 1
}
});
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -28,
lng: 137
}
});
// Load GeoJSON.
// map.data.loadGeoJson(
// 'https://storage.googleapis.com/mapsdevsite/json/google.json');
map.data.addGeoJson(geoJsonData);
map.data.setStyle(function(feature) {
var SD_NAME = feature.getProperty('SD_NAME');
var color = "gray";
if (SD_NAME == "Gee") {
color = "green";
}
return {
fillColor: color,
strokeWeight: 1
}
});
}
var geoJsonData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71",
"SD_NAME": "Gee"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[123.61, -22.14],
[122.38, -21.73],
[121.06, -21.69],
[119.66, -22.22],
[119.00, -23.40],
[118.65, -24.76],
[118.43, -26.07],
[118.78, -27.56],
[119.22, -28.57],
[120.23, -29.49],
[121.77, -29.87],
[123.57, -29.64],
[124.45, -29.03],
[124.71, -27.95],
[124.80, -26.70],
[124.80, -25.60],
[123.61, -25.64],
[122.56, -25.64],
[121.72, -25.72],
[121.81, -26.62],
[121.86, -26.98],
[122.60, -26.90],
[123.57, -27.05],
[123.57, -27.68],
[123.35, -28.18],
[122.51, -28.38],
[121.77, -28.26],
[121.02, -27.91],
[120.49, -27.21],
[120.14, -26.50],
[120.10, -25.64],
[120.27, -24.52],
[120.67, -23.68],
[121.72, -23.32],
[122.43, -23.48],
[123.04, -24.04],
[124.54, -24.28],
[124.58, -23.20],
[123.61, -22.14]
]
]
}
}, {
"type": "Feature",
"properties": {
"letter": "o",
"color": "red",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[128.84, -25.76],
[128.18, -25.60],
[127.96, -25.52],
[127.88, -25.52],
[127.70, -25.60],
[127.26, -25.79],
[126.60, -26.11],
[126.16, -26.78],
[126.12, -27.68],
[126.21, -28.42],
[126.69, -29.49],
[127.74, -29.80],
[128.80, -29.72],
[129.41, -29.03],
[129.72, -27.95],
[129.68, -27.21],
[129.33, -26.23],
[128.84, -25.76]
],
[
[128.45, -27.44],
[128.32, -26.94],
[127.70, -26.82],
[127.35, -27.05],
[127.17, -27.80],
[127.57, -28.22],
[128.10, -28.42],
[128.49, -27.80],
[128.45, -27.44]
]
]
}
}, {
"type": "Feature",
"properties": {
"letter": "o",
"color": "yellow",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[131.87, -25.76],
[131.35, -26.07],
[130.95, -26.78],
[130.82, -27.64],
[130.86, -28.53],
[131.26, -29.22],
[131.92, -29.76],
[132.45, -29.87],
[133.06, -29.76],
[133.72, -29.34],
[134.07, -28.80],
[134.20, -27.91],
[134.07, -27.21],
[133.81, -26.31],
[133.37, -25.83],
[132.71, -25.64],
[131.87, -25.76]
],
[
[133.15, -27.17],
[132.71, -26.86],
[132.09, -26.90],
[131.74, -27.56],
[131.79, -28.26],
[132.36, -28.45],
[132.93, -28.34],
[133.15, -27.76],
[133.15, -27.17]
]
]
}
}, {
"type": "Feature",
"properties": {
"letter": "g",
"color": "blue",
"rank": "7",
"ascii": "103",
"SD_NAME": "Gee"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[138.12, -25.04],
[136.84, -25.16],
[135.96, -25.36],
[135.26, -25.99],
[135, -26.90],
[135.04, -27.91],
[135.26, -28.88],
[136.05, -29.45],
[137.02, -29.49],
[137.81, -29.49],
[137.94, -29.99],
[137.90, -31.20],
[137.85, -32.24],
[136.88, -32.69],
[136.45, -32.36],
[136.27, -31.80],
[134.95, -31.84],
[135.17, -32.99],
[135.52, -33.43],
[136.14, -33.76],
[137.06, -33.83],
[138.12, -33.65],
[138.86, -33.21],
[139.30, -32.28],
[139.30, -31.24],
[139.30, -30.14],
[139.21, -28.96],
[139.17, -28.22],
[139.08, -27.41],
[139.08, -26.47],
[138.99, -25.40],
[138.73, -25.00],
[138.12, -25.04]
],
[
[137.50, -26.54],
[136.97, -26.47],
[136.49, -26.58],
[136.31, -27.13],
[136.31, -27.72],
[136.58, -27.99],
[137.50, -28.03],
[137.68, -27.68],
[137.59, -26.78],
[137.50, -26.54]
]
]
}
}, {
"type": "Feature",
"properties": {
"letter": "l",
"color": "green",
"rank": "12",
"ascii": "108"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[140.14, -21.04],
[140.31, -29.42],
[141.67, -29.49],
[141.59, -20.92],
[140.14, -21.04]
]
]
}
}, {
"type": "Feature",
"properties": {
"letter": "e",
"color": "red",
"rank": "5",
"ascii": "101"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[144.14, -27.41],
[145.67, -27.52],
[146.86, -27.09],
[146.82, -25.64],
[146.25, -25.04],
[145.45, -24.68],
[144.66, -24.60],
[144.09, -24.76],
[143.43, -25.08],
[142.99, -25.40],
[142.64, -26.03],
[142.64, -27.05],
[142.64, -28.26],
[143.30, -29.11],
[144.18, -29.57],
[145.41, -29.64],
[146.46, -29.19],
[146.64, -28.72],
[146.82, -28.14],
[144.84, -28.42],
[144.31, -28.26],
[144.14, -27.41]
],
[
[144.18, -26.39],
[144.53, -26.58],
[145.19, -26.62],
[145.72, -26.35],
[145.81, -25.91],
[145.41, -25.68],
[144.97, -25.68],
[144.49, -25.64],
[144, -25.99],
[144.18, -26.39]
]
]
}
}]
};html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
