Leaflet:如何从geoJson数据中设置多边形样式?

时间:2016-01-18 15:30:33

标签: leaflet mapbox

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

(JSfiddle here):

  

这是我的测试数据:

DELETE /shop/shoppingcarts/E73AC56C-BDF7-11E5-81F1-8E2EDB915C80/items/9876
  

以下是我的功能:

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
           ]
         ]
       ]
     }
   }
  ]
}];

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

1 个答案:

答案 0 :(得分:2)

好的,所以你在这里遇到了几个问题,我在这个小提琴里为你修好了。 http://jsfiddle.net/hx5pxdt8/

1.您的areaStyle函数未接受Leaflet为您提供的要素参数。

2.您的getAreaColor函数未传递该参数。

3.当你已经在fillColor属性中时,你的switch语句正在返回javascript对象...这意味着你只需要返回颜色字符串,而不是对象。