标签: leaflet.markercluster

我正在尝试使用 Leafletjs 制作地图，但我无法让标记集群正常工作。我希望它显示标记集群的默认图标，但它根本不显示标记集群图标。这是一个演示：

var map = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(map);

var markers = L.markerClusterGroup();
markers.addLayer(L.marker([51.505, -0.09]));
markers.addLayer(L.marker([51.506, -0.09]));
map.addLayer(markers);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js" integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA==" crossorigin=""></script>
<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<div id="mapid" style="height:380px;"></div>

这段代码完全基于http://leafletjs.com/examples/quick-start/和https://github.com/Leaflet/Leaflet.markercluster#usage上的例子，所以我想它会在给定这些例子的情况下工作，但这似乎并没有真正显示集群后面的图标。

我发现 amarkerClusterGroup有一个名为 的方法_defaultIconCreateFunction，但它似乎没有被调用（或者如果它被调用了，它什么也不做）。

那么我在这里做错了什么？

我有一个问题，标记集群工作并显示集群中的项目数，但是图标不显示。当我放大时，会显示单个图标，但从远处看，群集图标不会显示。这是我在集群中设置数据的代码：

    // Marker cluster
    var producerLayer = new L.MarkerClusterGroup();
    // Loop through the lp array
    for (var i=0; i < lp.length; i++) {
        var name = lp[i][0];
        var place = lp[i][1];
        var lat = lp[i][2];
        var lng = lp[i][3];
        var liscence = lp[i][4];
        var risk = lp[i][5];

        var icon = greenIcon;

        var markerLocation = new L.LatLng(lat, lng);
        var marker = new L.Marker(markerLocation,  {icon});


        var content = '<div class="info_content">' +
                '<h3>' + name + '</h3>' +
                '<p>' + place + '</p>' …

我想在使用 Leaflet.markercluster 制作的集群组上添加弹出窗口，就像悬停在传单标记上的弹出窗口一样。

我使用Leaflet.markercluster插件来聚集我的点.

但是,用户要求在群集视图和非群集视图之间切换功能(基本上,他们希望以高缩放率查看所有点).

我知道我可以在特定缩放级别禁用群集:

markers = new L.MarkerClusterGroup({
    disableClusteringAtZoom: 8,
})

但是,当我进一步缩小时,我怎么能强迫一切都不成簇？

我有带有 clustergroup 的传单地图，其工作正常。我想在 clustergroup 单击时打开弹出窗口。在结束标记（元素）上，onclick 弹出窗口磨损得很好。

我也能够捕获 clustergroup 单击事件，但无法打开弹出窗口。

    //To create cluster
          this.markers =  L.markerClusterGroup(); 

          //On cluster click get all children
          this.markers.on('clusterclick', function (a) {
             this.getClusterData(a.layer.getAllChildMarkers());
            //All children is available of cluster when clicked
        },this); 

但无法打开弹出窗口。

我将Leaflet.markercluster插件添加到我现有的Leaflet地图中.

我收到此错误:

未捕获的TypeError:this._featureGroup.addEventParent不是函数

关于这条线var locations = L.markerClusterGroup();.

我找不到任何有关此错误可能含义的信息.

我链接到Markercluster JS文件,并在Leaflet之后.不知道为什么它不能找到一个功能.

我正在尝试使用带多边形的标记集群组来显示集群。现在显示了多边形，但没有显示集群。我一直在尝试对多边形使用质心，因为它看起来像markerclustergroup 不喜欢多边形，但这并没有真正起作用，因为markerclustergroup 的动画将设置在质心上而不是实际的多边形上。

我的多边形的坐标数量都不同。有些有 +10 组，其他有 3 组。我将如何对多边形使用 markerclustergroup？

在我的代码下面可以看到：

        // Create variable to hold map element, give initial settings to map
        var map = L.map('map', {
            center: [23.70489, 43.90137],
            zoom: 5
        });

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        }).addTo(map);

        var ojStyle = {
            "color": "#ff7800",
            "weight": 5,
            "opacity": 0.65
        };
        // Hardcoded polygons as GeoJSON
        var polygons = {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [37.99896240234376, 21.55017532555692],
                            [39.39422607421876, 21.476073444092435],
                            [38.88336181640626, 22.56582956966297],
                            [38.023681640625, 22.611475436593366],
                            [37.43591308593751, …

当触发特定事件(clustermouseover或clusterclick)时,我需要在集群内获取标记.我e在开发人员控制台中检查事件对象,但是e.layer._markers是一个空数组.

group_markers.on('clustermouseover', function (e) {
    console.log('clustermouseover');
    console.log(e);
});

group_markers是L.markerClusterGroup对象.

在此先感谢您的帮助!

我有两个偶尔重叠的单独的标记簇组。有什么办法可以防止这种情况发生吗？在我的实际代码中，我为其中一个群集组使用自定义图标，以便我可以区分两种群集类型之间的区别。但是，对于本示例来说这不是必需的，因此为了简单起见，我省略了该部分。

var map = L.map("map");

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

map.setView([48.85, 2.35], 12);
var mcg = L.markerClusterGroup().addTo(map);
var mcg2 = L.markerClusterGroup().addTo(map);

L.marker([48.85, 2.35]).addTo(mcg);
L.marker([48.85, 2.34]).addTo(mcg);
  
for(var i=0;i<40;i++){
    L.marker([48.85, 2.34091]).addTo(mcg2);
}

这是我的意思的一个例子：

http://plnkr.co/edit/yqIhI7RMsp9A7I3AwGnY?p=preview

该要求规定，类别 1 中的标记必须与类别 2 中的标记分开聚类。但是，这两种类型必须同时显示在地图上。

我正在尝试在传单地图上使用 MarkerClusterGroup。我有错误L.MarkerClusterGroup is not a function。我已阅读相关主题，但它们仅对 leaflet 1.7 以下的版本有效。

我正在使用 React 和 webpack。

import { Icon, Marker, Circle, LatLngBounds, Popup, DivIcon } from "leaflet";
import "leaflet.markercluster";


const divIcon = new DivIcon();
      const markersCluster = L.MarkerClusterGroup({
        chunkedLoading: true,
        iconCreateFunction: function (cluster) {
          return divIcon({
            html: cluster.getChildCount(),
            className: "mycluster",
            iconSize: null,
          });
        },
});

我还尝试过L全局导入：

import * as L from "leaflet";
import "leaflet.markercluster";


const divIcon = new L.DivIcon();
      const markersCluster = L.MarkerClusterGroup({
        chunkedLoading: true,
        iconCreateFunction: function (cluster) { …