如何创建包含数千个不会使浏览器崩溃的标记的传单地图?

DWa*_*Wal 7 javascript r leaflet

我正在使用R中的传单包来生成一个包含大量圆圈的地图.目标是我可以发布到我的网站的地图.我遇到的问题是,当我增加圈数时,生成的地图加载速度非常慢,我得到"无响应的脚本"警告,最终它完全冻结了我的浏览器.

我知道这种事情是可能的,因为我发现了一张传单,可以按我希望的方式工作:

http://cartologic.com/geoapps/map_viewer/5/ny-crimes-2014-dot-density-map

我在上面的地图上注意到,圆圈看起来并不像我在地图上的圆圈那样"可点击",而且它们看起来像方块一样加载.我预感到这些事情与我的问题有关.不幸的是,我在传单/ javascript的东西上太过于自我解决这个问题了.

这是一个说明我的问题的玩具示例:

library("leaflet")
library("htmlwidgets")

dots <- data.frame(x=c(runif(10000, -93.701281, -93.533053)),
                   y=c(runif(10000,  41.515962,  41.644369)))

m <- leaflet(dots) %>%
  addTiles('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png') %>% 
  setView(-93.617167, 41.580166, zoom = 12) %>% 
  addCircles(~x, ~y, weight = 1, radius = 5, 
             color = "#FFA500", stroke = TRUE, fillOpacity = 0.1) 

m

saveWidget(widget = m, file="example.html", selfcontained = TRUE)
Run Code Online (Sandbox Code Playgroud)

小智 1

如果要向地图添加大量矢量对象,很少能轻松完成。

请注意,栅格数据被分解为图块,因此不必一次显示所有信息。对于矢量数据(在本例中为圆圈),您必须执行相同的操作。

基本上我喜欢做的是将大数据集分解为较小的(矢量)图块,其边界与您显示的栅格图块相同。如果您希望数据以多个缩放级别显示,请复制数据。当您显示圆形时,想象一下您在图块边界上划分了圆形的中心点。

我有一个与此类似的应用程序,我基本上在图块边界上对矢量数据进行分区并将信息存储在 geojson 文件中。当我收到栅格图块已加载的事件时,我可以将等效的矢量文件作为 geojson 图层加载(卸载栅格图块时也是如此)。通过这种方式,您可以限制任一时间必须显示的矢量数据量。

如果您有很多点,那么它们在低缩放级别下实际上不会可见,因此最好以适当的缩放级别显示它们(可能在低缩放时使用不同的表示形式 - 就像热图) )。这将使任一时间显示的数据量保持较低。