Кластеризация маркеров после нанесения точек в листовке? - PullRequest
Новая
       9

Кластеризация маркеров после нанесения точек в листовке?

0 голосов
/ 02 октября 2018

Я строю некоторые точки на карте листовок, чтобы их можно было кластеризовать.

Это то, что я пробовал до сих пор, но я получаю ошибку javascript L.markerClusterGroup is not a function.Карта нарисована, но точки или кластеры не отображаются: 

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

var map = L.map('map').setView([41.8781,-87.6298], 10).addLayer(tiles);

var markers = L.markerClusterGroup();

$.getJSON("points.geojson",function(data){
    var geoJsonLayer = L.geoJson(data, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.address);
        }
    });
    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
    map.fitBounds(markers.getBounds());

});

Моя попытка показать кластеры основана на этом примере, который работает.geoJsonData - это переменная javascript с тем же значением geojson, что и points.geojson: 

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

    var map = L.map('map')
            .addLayer(tiles);

    var markers = L.markerClusterGroup();

    var geoJsonLayer = L.geoJson(geoJsonData, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.address);
        }
    });
    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
    map.fitBounds(markers.getBounds());

Этот блок просто отображает точки перед добавлением кластеризации: 

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

var map = L.map('map').setView([41.8781,-87.6298], 10).addLayer(tiles);

$.getJSON("points.geojson",function(data){
    L.geoJson(data).addTo(map);
});
...