Leaflet 传单:如何根据geoJson数据设置多边形样式?
我正在尝试解决为什么我的地图没有显示我在Switch语句中为两个多边形设置的颜色样式的问题 JSfiddle: 以下是我的测试数据: 以下是我的职能:Leaflet 传单:如何根据geoJson数据设置多边形样式?,leaflet,mapbox,Leaflet,Mapbox,我正在尝试解决为什么我的地图没有显示我在Switch语句中为两个多边形设置的颜色样式的问题 JSfiddle: 以下是我的测试数据: 以下是我的职能: 为什么这两个多边形没有得到我指定的颜色?好的,你这里有几个问题,我在这把小提琴中为你解决了。 1.您的areaStyle函数未接受传单提供的功能参数 2.getAreaColor函数也没有传递该参数 3.您的switch语句返回javascript对象,而您已经在fillColor属性中…这意味着您只需要返回颜色字符串,而不是对象 L.mapb
为什么这两个多边形没有得到我指定的颜色?好的,你这里有几个问题,我在这把小提琴中为你解决了。 1.您的areaStyle函数未接受传单提供的功能参数 2.getAreaColor函数也没有传递该参数 3.您的switch语句返回javascript对象,而您已经在fillColor属性中…这意味着您只需要返回颜色字符串,而不是对象
L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg';
var map = L.mapbox.map('map', 'mapbox.light')
.setView([40, -74.50], 9);
var myData = [{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"stroke": "#555555",
"stroke-width": 2,
"stroke-opacity": 1,
"fill": "#555555",
"fill-opacity": 0.5,
"Name": "Area One"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-75.289306640625,
40.13899044275822
],
[
-75.5255126953125,
40.000267972646796
],
[
-75.29754638671875,
39.86969567045658
],
[
-74.97894287109375,
39.905522539728544
],
[
-74.9871826171875,
40.04654018618778
],
[
-75.289306640625,
40.13899044275822
]
]
]
}
},
{
"type": "Feature",
"properties": {
"stroke": "#555555",
"stroke-width": 2,
"stroke-opacity": 1,
"fill": "#555555",
"fill-opacity": 0.5,
"Name": "Area Two"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-75.223388671875,
40.20195268954057
],
[
-75.22064208984375,
40.029717557833266
],
[
-75.08056640625,
40.02551125229785
],
[
-74.9322509765625,
40.11799004890473
],
[
-75.02288818359375,
40.197757023665446
],
[
-75.223388671875,
40.20195268954057
]
]
]
}
}
]
}];
function getAreaColor(){
switch (feature.properties.Name){
case 'Area One' : return { fillColor: 'blue' };
case 'Area Two' : return { fillColor: 'yellow' };
break;
}
};
function areaStyle(){
return {
fillColor: getAreaColor,
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.5
}
};
L.geoJson(myData, {style: areaStyle}).addTo(map);