geojson 포인트 데이터 마커가 전단지 맵에서 클러스터링되지 않습니다. (The geojson point data markers are not clustering in leaflet map)

문제 설명

geojson 포인트 데이터 마커가 전단지 맵에서 클러스터링되지 않습니다. (The geojson point data markers are not clustering in leaflet map)

내 포인트 데이터를 클러스터링하기 위해 leaflet‑markercluster 플러그인을 사용하고 있습니다. 이미 'street'라는 이름의 geojson 데이터를 지도에 로드했습니다. 이 데이터에는 각각의 속성이 있는 약 40개의 포인트가 있습니다. 이 점들을 전단지 지도에 묶고 싶습니다. 하지만 내 지도에는 마커조차 표시되지 않습니다. 오류를 찾을 수 있도록 도와주세요. 내 코드는 다음과 같습니다.

var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var street = {...my_geojson_data...}

var s_light_style = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};


var markers = L.markerClusterGroup();
L.geoJSON(street, {
    onEachFeature : function(feature, layer){
        var popupContent =  '<h4 class = "text‑primary">Street Light</h4>' +
                            '<div class="container"><table class="table table‑striped">' +
                            '<thead><tr><th>Properties</th><th>Value</th></tr></thead>' +
                            '<tbody><tr><td> Name </td><td>'+ feature.properties.Name +'</td></tr>' +
                            '<tr><td>Elevation </td><td>' + feature.properties.ele +'</td></tr>' +
                            '<tr><td> Power (watt) </td><td>' + feature.properties.Power_Watt + '</td></tr>' +
                            '<tr><td> Pole Height </td><td>' + feature.properties.pole_hgt + '</td></tr>' +
                            '<tr><td> Time </td><td>' + feature.properties.time + '</td></tr>';
        layer.bindPopup(popupContent)
    },
    pointToLayer: function (feature, latlng) {
        return markers.addLayer(L.marker(latlng))  
    }
}).map.addTo(markers);

참조 솔루션

방법 1:

replace the code by

L.geoJSON(street, {
    onEachFeature : function(feature, layer){
        var popupContent =  '<h4 class = "text‑primary">Street Light</h4>' +
                            '<div class="container"><table class="table table‑striped">' +
                            '<thead><tr><th>Properties</th><th>Value</th></tr></thead>' +
                            '<tbody><tr><td> Name </td><td>'+ feature.properties.Name +'</td></tr>' +
                            '<tr><td>Elevation </td><td>' + feature.properties.ele +'</td></tr>' +
                            '<tr><td> Power (watt) </td><td>' + feature.properties.Power_Watt + '</td></tr>' +
                            '<tr><td> Pole Height </td><td>' + feature.properties.pole_hgt + '</td></tr>' +
                            '<tr><td> Time </td><td>' + feature.properties.time + '</td></tr>';
        layer.bindPopup(popupContent)
    },
    pointToLayer: function (feature, latlng) {
        return markers.addLayer(L.circleMarker(latlng, s_light_style))
    }
})
map.addLayer(markers);

In above code i specify the map.addTo(markers). But actually I have to replace "addTo" keyword with "addLayer". I have to add the layer. In this way I solved the geojson markerCluster problem.

(by Tekson、Tekson)

참조 문서

1. The geojson point data markers are not clustering in leaflet map (CC BY‑SA 2.5/3.0/4.0)