Question

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

我已经尝试了很多方法来达到预期效果，但没有任何效果。

来自geojson FeatureCollection的示例代码我要添加自定义图标：

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

Answer 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）

Answer 2

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

如果您只是将geoJSON定义分配给范围的geojson属性，并使用当前函数，则传单将立即正确呈现。

Angular Leaflet geojson自定义标记

2 个答案: