标签: leaflet.markercluster

我想向传单地图上的（随后）集群图标添加单击事件（使用 Leaflet.markercluster 插件）。事件本身有效，但警报始终为单击的每个图标生成数组的最后一个元素。我不明白原因。将“标记”声明为数组并没有改变结果。

    map.clearLayers;

    var marker = [];

    var markers = L.markerClusterGroup({
        disableClusteringAtZoom: 10,
        spiderfyOnMaxZoom: true,
        chunkedLoading: true
    });

    for (id in reclist) {       
        var posn = reclist[id]['info'][1];
        var pose = reclist[id]['info'][2];
        var title = reclist[id]['info'][0];
        var mapicon = L.icon({iconUrl: 'url of icon');  

        marker[id] = new L.marker(new L.LatLng(posn, pose), {icon: mapicon})
        .on('click', function(){alert(title)});

        markers.addLayer(marker[id]);

    }

    map.addLayer(markers); 

我正在寻找一种使群集边界永久可见的方法，而不仅仅是在鼠标悬停时。到目前为止，我还没有找到解决方案。我正在使用markercluster插件制作传单。我必须插入数据点以及有关本地带宽的信息。我希望这些聚类，然后让“区域”按特定颜色勾勒轮廓。感谢您的支持：-)

问候语

我正在使用Leaflet.markercluster。

这是我的代码，基于各种相关问题：

    // Takes an L.markerClusterGroup as input parameter
    Self.GetNumMarkersInClusterGroup = function(clusterGroup)
    {
        Self.map.eachLayer(function (layer) {
            if (layer.getChildCount) {
// somehow need to check here for our desired cluter group

                console.log('Cluster group has ' + layer._childClusters.length + 'layers')        ;
                console.log('With a total of ' + layer._childCount + ' markers');  
                }
        });
    }       // GetNumMarkersInClusterGroup()

但是，layer.getChildCount未定义:-( 我做错了什么？

相关问题：

• 迭代markerCluster中的簇：传单
• 计算 MarkerCluster 中的元素数量
• 使用 Leaflet 获取簇的数量及其标记？
• 获取传单标记簇中的子项计数

地图`像这样:

L.Map = L.Map.extend({
openPopup: function(popup) {
this._popup = popup;
        return this.addLayer(popup).fire('popupopen', {
            popup: this._popup
        });
    }
});

但我正在使用传单.无论如何都有这样的程度,以便我可以阻止关闭我的标记弹出窗口？

L.mapbox.accessToken = constant.accessToken;
var map = L.mapbox.map('map', 'mapbox.streets', {zoomControl: true});

我刚刚开始为我即将进行的项目了解 Leaflet.js。

我想要完成的任务： 我需要制作一个显示在地图上的标记列表，当列表项悬停（或鼠标悬停）时，它将显示地图上的位置（对于单个标记，它应该改变）它的颜色。对于聚集标记，它应该显示覆盖线，就像我们将其悬停时的行为一样。如果可能的话，也许还可以更改其颜色）。地图以及缩放级别不应更改，简单地说，我需要突出显示地图上的标记/集群。

我现在所取得的成就：我能够在单标记上完成它。

让我超级沮丧的是：我没能找到一种方法让它在Clustered Marker上发生。

我使用全局 var 对象来存储任何创建的标记。

function updateMapMarkerResult(data) {
  markers.clearLayers();
  for (var i = 0; i < data.length; i++) {
    var a = data[i];
    var myIcon = L.divIcon({
      className: 'prop-div-icon',
      html: a.Description
    });
    var marker = L.marker(new L.LatLng(a.Latitude, a.Longitude), {
      icon: myIcon
    }, {
      title: a.Name
    });
    marker.bindPopup('<div><div class="row"><h5>Name : ' + a.Name + '</h5></div><div class="row">Lat : ' …

我在angular 5应用程序中使用ngx-leaflet-markercluster。我根据演示更改了代码，但仍然收到以下错误：

无法绑定到“ leafletMarkerCluster”，因为它不是“ div”的已知属性。

有任何想法吗？有人尝试过v1.0.0吗？

我正在尝试通过此链接重现传单包上 Rstudio 示例的结果。它一直工作到第 5 节。当我尝试使用具有完全相同设置的 AddMarkers 命令时：

##### Location Names
Location <- c("Atlanta ","Los Angeles","Chicago","New York","Dallas","Baltimore","Phoenix","Charlotte","Houston","San Antonio", "Seattle" )

#### Latitude and Longitude values for each of the above location
Lat <- c(33.74401,33.82377,41.78798,40.767309,32.88153,39.148492,33.45444,35.2406,29.935842,29.44838,47.714965 )
Lon <- c(-84.56032,-118.2668,-87.7738,-73.978308,-96.64601,-76.796211,-112.32401,-81.04028,-95.398436,-98.39908,-122.127166 )

#### Some hypothetical number of orders shipped out of each location
Orders <- c(1992,2500,3600,2252,3650,3450,4145,3945,5050,4300,1987)

#### Let us create some hypothetical class flags for the cities
Type <- c(rep("Yoda",5),rep("Vader",6))
### Create data set from the above vectors
df <- data.frame(Location, Lat,Lon,Orders,Type)

mymap …

加载地图后，图钉和标记簇图标均可见。只有在缩放到最大之后，所有销钉才会断开，并且簇在缩小时开始按预期工作。

我做错了什么会导致这个问题？

当前设置：

const markerCluster = Leaflet.markerClusterGroup({showCoverageOnHover: false})

//within a loop the markers are created:

() => {
  const pinBackground = item.current ? '#db2828' : '#3dcc4a'
  const interior = item.pin.icon_url
    ? `<img style="background: ${item.pin.color_code}" src=${item.pin.icon_url}>`
    : `<div class="mapPanelAbbreviation" style="background: ${item.pin.color_code}">${item.pin.abbreviation}</div>`
  const pinLayout = `<div class="mapPanelIconContainer" style="background:${pinBackground}">
      ${interior}
    </div>`

  let marker = Leaflet.marker(coord, {icon: Leaflet.divIcon({html: pinLayout})})
    .bindPopup(`<p class='pinText'>${item.taskId}</p><p class='pinDetails'>${item.title}</p>`)
    .addTo(this.currentMap)
    .addTo(this.markerGroup)

  markerCluster.addLayer(marker)
}

//then the markerCluster is added to the map

this.currentMap.addLayer(markerCluster)

当地图加载时，我看到创建的图钉（应包含在标记集群中）和显示图钉计数的集群图标：

第一次缩放后：

一如既往，我们非常感谢任何指导和帮助，所以提前致谢！

我不确定这是否是react-leaflet-markercluster、react-leaflet、leaflet、react或我的代码的问题。

我有一张包含数千个标记的地图，我正在使用react-leaflet-markercluster 进行标记聚类。如果我需要更新 的全局状态MapComponent，则反映此更改时会有 1-3 秒的延迟。

我创建了一个包含 5000 个标记的codeandox，您可以看到有 2 个存在性能问题的用例：

1.)MapComponent位于react-reflex元素内部，允许调整面板大小并将新尺寸（宽度、高度）传播到MapComponent. 如果宽度和高度发生变化，mapRef.invalidateSize()则调用该函数来更新地图尺寸。调整大小非常慢。

2.) 如果用户单击Marker，则更新所选的全局状态。它是单击的标记 ID 的列表。地图调用fitBounds方法以关注单击的标记，并且标记图标也发生更改。大约有 1 秒的延迟。

在我的项目中，如果我需要更改MapComponent状态，则在开发模式下需要 2-3 秒才能反映更改，并且它只是MapComponent及其元素（标记）的一次重新渲染。

我查看了 Chrome 性能概况，似乎大部分时间都花在内部 React 方法上。

可以通过使用 防止重新渲染来解决此问题memo，这与 类似shouldComponentUpdate，但它使整个代码库过于复杂。preferCanvas选项不会改变任何东西。我想知道解决这些问题的好方法是什么。

我正在使用几个L.markerClusterGroup({})，以便可以在“图层控件”中进行切换。

但是群集彼此隐藏。

我希望能够获得两个群集的总数。

我想念什么？

考虑来自传单 R 包的 breweries91 数据。我在 breweries91 数据框中模拟了一个附加变量，该变量对应于啤酒厂的两组。

下面的代码将重现下图的左侧部分：

这里在 Javascript 中有一个解决方案：

http://bl.ocks.org/gisminister/10001728

另一个例子在这里：https : //github.com/SINTEF-9012/PruneCluster

饼图的主题也在那里讨论：https : //ux.stackexchange.com/questions/76402/how-to-cluster-map-markers-with-different-statuses

有没有人通过 JS 函数在传单选项中使用过类似的 JS 代码？

library(leaflet)
library(dplyr)
data("breweries91",package="leaflet")
set.seed(1);breweries91$goodbear<-sample(as.factor(c("terrific","marvelous")),nrow(breweries91),replace=T)
leaflet() %>%
  addTiles() %>%
  addMarkers(data=breweries91,
             clusterOptions = markerClusterOptions(
               iconCreateFunction =
                 JS("function(cluster) {
   return new L.DivIcon({
     html: '<div style=\"background-color:rgba(77,77,77,0.5)\"><span>' + cluster.getChildCount() + '</div><span>',
     className: 'marker-cluster'
   });}")))

如何调整代码以生成右侧的图像？

试图让 Leaflet.markercluster 与 react-leaflet 2 一起工作。

https://github.com/OpenGov/react-leaflet-cluster-layer似乎与 2.x 不兼容。

感谢任何让我入门的示例代码！