标签: leaflet.markercluster

我试图在鼠标移动时获得x,y坐标.当我想要得到它时,我会收到错误.

TypeError:无法在HTMLDivElement.onmousemove(仪表板:442)的mouseMove(仪表板:593)处读取undefined属性'latlng'

<div id="map" onmousemove="mouseMove()"></div>
<script type="text/javascript">
        var iMaxZoom = 1;

        var map = L.map('map', {
            crs: L.CRS.Simple,
            minZoom: -5,
            maxZoom: 1
        });



        var bounds = [[0,0], [711,473]];

        var image = L.imageOverlay('{!! asset('assets/images/birlikmarket.png')  !!}', bounds).addTo(map);
        map.fitBounds(bounds);
        // mouse move detect x, y coordinates
        function mouseMove(e) {
            var tileSize = [711,473]
            try {
                console.log(e.latlng)
            }catch(error) {
                console.log(error)
            }
}
</script>

我是leafletjs的新手.一直在研究cesiumjs,我们现在正在尝试传单.转换的主要原因是看看是否存在巨大的性能差异.

在Cesium中,我绘制了一组原始点.在leafletjs中绘制140K点的最有效方法是什么？使用标记或创建单个小圆圈？

我也在考虑使用集群插件(http://leafletjs.com/2012/08/20/guest-post-markerclusterer-0-1-released.html),所以请分享对性能的任何想法.

我对分组标记和以小饼图形式按组呈现计数的解决方案着迷/sf/answers/4236759621/ 我只是 R，不懂 JS。我希望代码对每个数据点的值求和而不是计数（每个单独的数据点可能已经代表一个计数）。我想根据值控制更多气泡的大小。你能帮助我并展示如何更改 js 代码，以便它对数据点的值进行求和，以及如何增加/控制气泡的大小？

这里有一个所需的解决方案，对非饼图标记进行求和而不是计数：How to display the value (sum)rather than count of labels in a dc.leaflet.js 这里 有一个解决方案，它还可以控制气泡的大小：带有总和（不是计数）的聚类传单标记：如何获得一致的圆形红色形状和标签格式，就像非聚类标记一样

原始代码来自/sf/users/189819871/ @DanielBonnery

library(leaflet)
library(dplyr)
#Creates data
data("breweries91",package="leaflet")
#set.seed(1);
breweries91$goodbear<-sample(as.factor(c("terrific","marvelous","culparterretaping")),nrow(breweries91),replace=T)
#Colors
joliepalette<-c("red","green","blue")[1:nlevels(breweries91$goodbear)]
getColor <- function(breweries91) {joliepalette[breweries91$goodbear]}

icons <- awesomeIcons(
  icon = 'ios-close',
  iconColor = 'black',
  library = 'ion',
  markerColor = getColor(breweries91)
)

#Generate the javascript

jsscript3<-
  paste0(
"function(cluster) {
const groups= [",paste("'",levels(breweries91$goodbear),"'",sep="",collapse=","),"];
const colors= {
groups: [",paste("'",joliepalette,"'",sep="",collapse=","),"],
center:'#ddd',
text:'black'
};
const markers= cluster.getAllChildMarkers();

const proportions= groups.map(group …

我目前正在使用Leaflet库进行地图可视化。我还使用markercluster插件来聚类我的点。

所以我现在的问题如下：

我在 3 个不同的层中有 3 个不同类别的标记。例如餐厅、咖啡馆和酒吧层。我想将所有活动层组合到一个特定的集群。

目前，条目是分开聚集的，但我想将它们聚集在一起。

下一步是根据 childMarkers 为集群着色。例如，集群包括餐厅和酒吧标记 => 半红/半绿，仅餐厅 => 仅红色等。

我希望有人可以帮助我找到解决方案。谢谢！

我目前正在使用它tmap来创建交互式地图。由于初始缩放时结果非常混乱（见下图），我想实现标记集群。

我知道传单允许通过添加参数或调用来使用标记集群（来源：clusterOptions = markerClusterOptions()https : //rstudio.github.io/leaflet/markers.html），但还没有找到如何使用.addMarkers()addCircleMarkers()tmap

如何在 中添加标记簇tmap？

我做错了什么，或者为什么下面的例子不起作用？leafletProxy()我正在尝试使用选项使传单标记簇插件在 R Shiny 应用程序中使用iconCreateFunction。该插件是否无法使用 向地图添加自定义图标标记leafletProxy()？

当我按下第一个按钮并缩小下面的示例时，我收到一条错误消息：

类型错误：this._group.options.iconCreateFunction 不是函数

我尝试从markercluster文档中复制原始示例：

library(shiny)
library(dplyr)
library(leaflet)

ui <- fluidPage(
  titlePanel("Hello Shiny!"),
  sidebarLayout(
    sidebarPanel(
      actionButton(inputId = "my_button1",
                   label = "Use leafletProxy()"),
      actionButton(inputId = "my_button2",
                   label = "Use renderLeaflet()")
    ),
    mainPanel(
      leafletOutput(
        outputId = "map",
        width = "100%",
        height = "300px"
      )
    )
  )
)

server <- function(input, output, session) {

  some_data <- data.frame(
    "lon"=c(4.905167,4.906357,4.905831),
    "lat"=c(52.37712,52.37783,52.37755),
    "number_var"=c(5,9,7),
    "name"=c("Jane","Harold","Mike"),
    stringsAsFactors = F
  )

  output$map <- renderLeaflet({
    return(
      leaflet(data = some_data[0,]) …

我将Leaflet与realtime和markercluster插件结合使用，以便显示在地图上实时更新的标记。这些插件相互独立运行非常好，但是当我想使用markercluster功能对实时层进行集群时，就会出现问题。

我在其中将json转换为标记，分配自定义图标并应用一些onEachFeature函数的实时层的代码示例：

realtimeLayer = L.realtime({
    url: 'someURL',
    crossOrigin: true,
    type: 'json'
}, {
    interval: 3 * 1000,
    onEachFeature: onEachFeature,
    pointToLayer: function(feature, latlng) {
        return L.marker(latlng, {
            icon: customIcon
        });
    }
});

我能够对非实时标记层进行的操作是创建一个标记集群组并将其添加到该组中，这样标记就可以像这样集群：

var clusterGroup = L.markerClusterGroup();
clusterGroup.addLayer(someLayer);

但是，当我将realtimeLayer添加到集群组时，将不应用集群，或者将标记加载为net。我想念什么？谢谢！

我正在尝试使用 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>' …

我正在使用react-leaflet和react-leaflet-markercluster将React中的传单映射转换为钩子。除了使用 MarkerCluster 组件之外，一切都运行良好。该应用程序给出了这个错误： Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>

我尝试做与此codesandbox中完全相同的事情，包括使用相同版本的软件包： https://codesandbox.io/s/9binx ?file=/src/styles.scss:168-206

无论是在现有项目还是全新项目（create-react-app）中。在现有项目中仍然出现同样的错误。新项目也是如此，但在从 package.json 中删除此项目时已修复：

    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]

但这从来没有出现在现有的项目中。这是现有项目的 package.json：

{
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@reduxjs/toolkit": "1.4.0",
        "@sentry/react": "5.27.1",
        "@sentry/tracing": "5.27.1",
        "classnames": "^2.3.1",
        "http-proxy-middleware": "1.0.6",
        "leaflet": "^1.7.1",
        "leaflet.markercluster": "^1.5.1",
        "moment": "2.29.1",
        "normalize.css": "8.0.1",
        "rc-slider": "9.5.4",
        "react": "17.0.1",
        "react-app-polyfill": "2.0.0",
        "react-datepicker": "3.3.0",
        "react-dates": "21.8.0",
        "react-dom": "17.0.1",
        "react-html5-camera-photo": "1.5.4",
        "react-leaflet": …