Angular Leaflet geojson自定义标记答案

【问题标题】：Angular Leaflet geojson custom markerAngular Leaflet geojson自定义标记
【发布时间】：2014-02-18 14:37:39
【问题描述】：

是否可以在 GeoJSON 中定义自己的标记图标？

我尝试了很多方法来获得预期的效果，但没有任何效果..

geojson FeatureCollection 的示例代码，我想在其中添加自定义图标：

{
    "type": "Feature",
    "id": "Point1",
    "properties": {
        "name": "Last point"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [22.57031047873893, 51.25080964529834]
    }
}

【问题讨论】：

标签： angularjs icons leaflet marker geojson

【解决方案1】：

MapBox 为 Leaflet 创建了一个CustomMarker plugin，应该可以解决问题。

还有一个来自 Mapbox 的好例子，GeoJSON Custom Markers and Style

以下是该网站的一些示例代码：

var geoJsonData = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "fillColor": "#eeffee",
        "fillOpacity": 0.8
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [119.2895599, 21.718679],
            [119.2895599, 25.373809],
            [122.61840, 25.37380917],
            [122.61840, 21.71867980],
            [119.2895599, 21.718679]
          ]
        ]
      }
    }, {
      "type": "Feature",
      "properties": {
        "marker-color": "#00ff00"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [120.89355, 23.68477]
      }
    }]
};

var geoJson = L.geoJson(geoJsonData, {
    pointToLayer: L.mapbox.marker.style,
    style: function(feature) { return feature.properties; }
}).addTo(map);

注意：这不是核心 LeafletJS 库的一部分，它需要 mapbox.js（和 mapbox.css）

【讨论】：

【解决方案2】：

如果您更新到最新版本（在撰写本文时），您的 geojson 对象中的 pointToLayer 回调将开始工作。它似乎没有在 0.7.7 中实现，但目前在 master 上可用，我认为它将在 0.8+ 中。

如果您只是将 geoJSON 定义分配给作用域的 geojson 属性，并且功能存在传单现在将正确呈现它。

【讨论】：