Leaflet 传单:如何根据geoJson数据设置多边形样式?

Leaflet 传单:如何根据geoJson数据设置多边形样式?,leaflet,mapbox,Leaflet,Mapbox,我正在尝试解决为什么我的地图没有显示我在Switch语句中为两个多边形设置的颜色样式的问题 JSfiddle: 以下是我的测试数据: 以下是我的职能: 为什么这两个多边形没有得到我指定的颜色?好的,你这里有几个问题,我在这把小提琴中为你解决了。 1.您的areaStyle函数未接受传单提供的功能参数 2.getAreaColor函数也没有传递该参数 3.您的switch语句返回javascript对象,而您已经在fillColor属性中…这意味着您只需要返回颜色字符串,而不是对象 L.mapb

我正在尝试解决为什么我的地图没有显示我在Switch语句中为两个多边形设置的颜色样式的问题

JSfiddle:

以下是我的测试数据:

以下是我的职能:


为什么这两个多边形没有得到我指定的颜色?

好的,你这里有几个问题,我在这把小提琴中为你解决了。

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);