如何使用Leaflet-Tilelayer-Geojson的圆形标记

时间:2014-08-18 13:06:20

标签: leaflet

我正在使用Leaflet-Tilelayer-Geojson在地图上加载点,而且效果非常好。我想使用Leaflet圈标记而不是默认的蓝色图标,但我找不到任何如何执行此操作的示例。如何在Leaflet-Tilelayer-Geojson中使用圈标记?

我到目前为止加载积分的代码很简单:

    var geojsonURL = 'MYURL/{z}/{x}/{y}.geojson';
    var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, {
               }, {
            onEachFeature: function (feature, layer) {

                layer.on('click', function(e) {
                $("#overlay").html('<img src="GIFURL"/>')
                .load("URL+feature.properties.url);  });


            }
       }
     );
    map.addLayer(geojsonTileLayer);

谢谢

1 个答案:

答案 0 :(得分:1)

我正在为我的网络应用做同样的事情。我的第一个建议是使用 PointToLayer:http://leafletjs.com/reference.html#geojson-options

var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};
L.geoJson(someGeojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
}).addTo(map);}

正如https://github.com/glenrobertson/leaflet-tilelayer-geojson所解释的那样,我的解释是,这将是近似的结果:

var geojsonURL = 'MYURL/{z}/{x}/{y}.geojson';
var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};
var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, {
           }, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        },
        onEachFeature: function (feature, layer) {

            layer.on('click', function(e) {
            $("#overlay").html('<img src="GIFURL"/>')
            .load("URL+feature.properties.url);  });


        }
   }
 );
map.addLayer(geojsonTileLayer);