jquery 基于geojson属性设置各个要素的样式+ Leaflet,Markercluster

3b6akqbq  于 2023-01-12  发布在  jQuery
关注(0)|答案(1)|浏览(116)

我已经花了好几天的时间试图让它工作。我有一个函数可以根据geojson点的属性(即“Type”)显示geojson点。geojson文件是用jQuery加载的。但是,我无法管理它们的集群,同时保留它们的自定义图标。
我可以通过做一些调整并忽略function geojsonType()来实现一般的集群,但这不是我所追求的,我陷入了一个恶性循环。
多亏了this post,我可以根据点的属性来显示点。

// create function for pointToLayer when loading geojson
 function geojsonType(feature, latlng) {
            switch (feature.properties["Type"]) {
                case "bar":
                    var barIcon = new L.icon({
                        iconUrl: 'images/pub.png', //assign PNG
                        iconSize: [42, 50], // size of the icon
                        iconAnchor: [22, 22], // point of the icon which will correspond to marker's location
                        popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor    
                    });
                    return L.marker(latlng, { icon: barIcon });

                case "recordclothingstore":
                    var venueIcon = new L.icon({
                        iconUrl: 'images/venue.png', //assign PNG
                        iconSize: [42, 50], // size of the icon
                        iconAnchor: [22, 22], // point of the icon which will correspond to marker's location
                        popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor    
                    });
                    return L.marker(latlng, { icon: storeIcon });

                case "venueandbar":
                    var venueandbarIcon = new L.icon({
                        iconUrl: 'images/pub.png', //assign PNG
                        iconSize: [42, 50], // size of the icon
                        iconAnchor: [22, 22], // point of the icon which will correspond to marker's location
                        popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor    
                    });
                    return L.marker(latlng, { icon: venueandbarIcon });
            }
        };
        // get geojson
        var url = "points.geojson";
        $.getJSON(url, function (data) {
            pointData.addData(data);
        });
        // load geojson
        var pointData = L.geoJson(null, {
            pointToLayer: geojsonType,
            onEachFeature: function (feature, layer) {
                layer.bindPopup("<a href='" + feature.properties.Website + "'>" + feature.properties.Name + "</a>" + "<br>" + feature.properties.Address + "<br>" + feature.properties.Descriptio);
            }
        });

然而,下面的代码添加到底部时没有任何效果。控制台中也没有错误。

var clusters = L.markerClusterGroup({
        spiderfyOnMaxZoom: true,
        showCoverageOnHover: false,
        zoomToBoundsOnClick: true
    });
    clusters.addLayer(pointData);
    map.addLayer(clusters);
vhmi4jdf

vhmi4jdf1#

我可以命令上面的所有代码使它工作。变量和图标名称可能已经改变,但基本上是相同的代码位。我不知道在哪里放置弹出窗口,虽然。编辑我找到了一个位置的bindPopup行。它可以在这里,例如:

return L.marker(latlng, { icon: pubandvenueIcon }).bindPopup("<a href='" + feature.properties.Website + "'>" + feature.properties.Name + "</a>" + "<br>" + feature.properties.Address + "<br>" + feature.properties.Description);
$.getJSON("points.geojson", function (data) {
    var venueIcon = L.icon({
        iconUrl: 'images/venue.png',
        iconSize: [60, 50]
    });
    var metallocations = L.geoJson(data, {
        pointToLayer: function geojsonType(feature, latlng) {
            switch (feature.properties["Type"]) {
                case "pub":
                    var pubIcon = new L.icon({
                        iconUrl: 'images/pub.png', //assign PNG
                        iconSize: [42, 50], // size of the icon
                        iconAnchor: [22, 22], // point of the icon which will correspond to marker's location
                        popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor    
                    });

                    return L.marker(latlng, { icon: pubIcon });

                case "pubandvenue":
                    var pubandvenueIcon = new L.icon({
                        iconUrl: 'images/search-icon.png', //assign PNG
                        iconSize: [42, 50], // size of the icon
                        iconAnchor: [22, 22], // point of the icon which will correspond to marker's location
                        popupAnchor: [-3, -26] // point from which the popup should open relative to the iconAnchor    
                    });
                    return L.marker(latlng, { icon: pubandvenueIcon });
            }
        }
    });
    map.fitBounds(metallocations.getBounds());
    var clusters = L.markerClusterGroup({
        spiderfyOnMaxZoom: true,
        showCoverageOnHover: false,
        zoomToBoundsOnClick: true
    });
    clusters.addLayer(metallocations);
    map.addLayer(clusters);
});

相关问题