传单 json 图标

Question

我在 Web2py 应用程序中使用 Leaflet，我在其中使用 $getJSON 加载功能。我的特征中只有标记。我的问题是我找不到根据功能属性加载不同图标的方法。我需要这样的东西：开关（feature.properties.category）{ case '1'：设置绿色图标； case '2': 设置蓝色图标； }

<script>
    var map = L.map('map')

    //Here is a greenIcon
    var greenIcon = L.icon({
        iconUrl: '{{=URL('static','markers/green.png')}}',
        shadowUrl: '{{=URL('static','markers/shadow.png')}}',
        iconSize:     [38, 95], // size of the icon
        shadowSize:   [50, 64], // size of the shadow
        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [4, 62],  // the same for the shadow
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });

    //Here is a bluIcon
    var bluIcon = L.icon({
        iconUrl: '{{=URL('static','markers/blu.png')}}',
        shadowUrl: '{{=URL('static','markers/shadow.png')}}',
        iconSize:     [38, 95], // size of the icon
        shadowSize:   [50, 64], // size of the shadow
        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [4, 62],  // the same for the shadow
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    map.on('load', function() {
        loadMarkers();
    }).setView([ {{=session.events_latitude}} , {{=session.events_longitude}} ], {{=session.zoom}});

    map.on('moveend', function() {
        loadMarkers();
    });

    function loadMarkers () {
        var east = map.getBounds().getEast();
        $('#east').val(east);
        var west = map.getBounds().getWest();
        $('#west').val(west);
        var south = map.getBounds().getSouth();
        $('#south').val(south);
        var north = map.getBounds().getNorth();
        $('#north').val(north);
        var zoom = map.getZoom();
        $.getJSON('{{=URL('f_ajax', 'get_main_event_locations')}}', {east: east, west: west, south: south, north: north, zoom: zoom}, function( data ) {
            if (typeof geojsonLayer !== 'undefined') {
                map.removeLayer(geojsonLayer);
            }
            geojsonLayer = L.geoJson(data, {
                //With it I can set a custom icon, but it will be the same for all the features
                pointToLayer: function (feature, latlng) {
                    return L.marker(latlng, {icon: greenIcon});
                },
                onEachFeature: onEachFeature}).addTo(map);
        });
    }

    function onEachFeature (feature, layer) {
        var popupContent;
        if (feature.properties && feature.properties.popupContent) {
            popupContent = feature.properties.popupContent + feature.properties.track_quotation;
        }
        layer.bindPopup(popupContent);
    }
</script>

有人知道我该怎么做吗？

谢谢。

Answer 1

解决办法很明显；我猜你还没有意识到你可以在 L.GeoJSON:

的 pointToLayer 选项中添加逻辑

pointToLayer: function(feat, latlng) {
    if (feat.properties.something === 1) {
        return L.marker(latlng, {icon: greenIcon});
    } else {
        return L.marker(latlng, {icon: greenIcon});
    }
}

Leaflet 首先通过运行 pointToLayer 在 GeoJSON 的点特征上构建所有图层，加上 style 在线和多边形特征上，然后 onEachFeature 在所有图层上运行，无论它们来自点、线还是多边形。这意味着您甚至可以在 pointToLayer 中设置弹出窗口，而不是在 onEachFeature:

中

pointToLayer: function(feat, latlng) {
    var icon:
    if (feat.properties && feat.properties.something === 1) {
        icon = greenIcon;
    } else {
        icon = redIcon;
    }

    var layer = L.marker(latlng, {icon: icon});

    if (feat.properties && feat.properties.popupContent) {
        layer.bindPopup(feat.properties.popupContent + feature.properties.track_quotation);
    }

    return layer;
}

传单 json 图标

Leaflet json icons

json

web2py

leaflet