标签: leaflet

我试图允许用户能够设置矩形的一个角以在鼠标按下事件上绘制，当鼠标向上事件触发时，我想设置对角坐标并绘制矩形。我在我的 *.ASPX javascript 中尝试了以下操作：

var oneCorner;
var TwoCroner;

map.on('mousedown', setOneCorner);
map.on('mouseup', setTwoCorner);

function setOneCorner(e)
{
    oneCorner = e.latlng;
}

function setTwoCorner(e)
{
    twoCorner = e.latlng;
    var bounds = [oneCorner.latlng, twoCorner.latlng];
    L.rectangle(bounds, {color:"#ff7800", weight:1}).addTo(map);
}

我的图块仍然可以在鼠标按下事件上平移，但我希望能够在我想要的地方绘制一个矩形。我该怎么做呢？

有人知道如何仅使用北/南边界限制 Mapbox 地图中的平移吗？我想做的是使用世界副本，以便用户可以连续从东向西平移，但限制向北和向南平移，这样您就无法在地图图块之外平移（我觉得这非常烦人）。我目前在初始化地图时使用 maxbounds，以防止平移到两极上方和下方的白色瓷砖中，但这对于世界复制来说是不行的。

我有一个简单的传单热图示例，其中包含数据（超过 10,000 行）。但它并没有产生应有的梯度热图。

演示位于http://shafiqmustapa.my/test.html

热图未根据值生成颜色

在arcmap（arcgis）中它是什么样子进行比较（不要比较极性，因为传单不支持它）

可能是什么问题呢。提前致谢。

我试图限制用户超出指定的城市边界。maxBounds在传单中，我通过地图对象的属性或setMaxBounds通过提供southwest&点的功能实现了这一点northeast。，这样它就限制了滚动/缩放超出该城市边界。

有没有像上面这样的方法来限制android中谷歌地图的滚动/缩放？

我在传单地图上绘制了一个多边形，我在一个闪亮的应用程序中使用它。每次触发事件时，我想删除旧的多边形并在其上绘制新的多边形。那不起作用-我想我用layerId错了？

对此有任何提示吗？

# draw polygons
observeEvent(da$ar, {
    # remove polygon
    removeShape(map, layerId = unique(10))

    leafletProxy("myMap") %>% addPolygons(data = da$ar, stroke = TRUE, 
    fillOpacity = 0.5, smoothFactor = 0.5,
    layerId = unique(10)
    )
})

我的闪亮应用程序中无法显示“全屏”地图，因为当我使用“100%”参数时，地图消失了......

ui <- fluidPage(
  leafletOutput("mymap", height = "100%", width = "100%"),

但是当我这样做时

ui <- fluidPage(
  leafletOutput("mymap"),

没有问题，但是一半是地图，一半是空白。我需要它是全屏的

我试过

leafletOutput("mymap", height = 800, width = 1300)

但这不是我需要的，因为它没有缩放到窗口，这就是为什么我更喜欢“100%”参数。

我正在尝试自定义 Leaflet.js 地图的归因部分。归因的自定义部分是Leaflet |屏幕截图中所示的所有内容。

我的自定义归因字符串添加如下：

var ATTRIBUTION = '...'
var map;

$(document).ready(function() {
    var tiles = new L.TileLayer(TILES_URL, {attribution: ATTRIBUTION});
    map = new L.Map('map').addLayer(tiles);
    // ...
});

Leaflet.js 将其自身添加到我现有的归因字符串的前面，可以在来源中看到。如何附加传单归属字符串？

我有使用该选项设置样式的线条几何图形dashArray。我正在尝试添加黑色轮廓来区分较浅底图上的间隙。

我尝试在下面添加一条具有较重重量的黑色路径来创建轮廓，但间隙似乎是透明的。

将以下样式应用到各个图层将创建一条带有黑色轮廓的白线：

path = {
    color: '#ffffff',
    weight: 3,
    opacity: 1
}

outline = {
    color: '#000000',
    weight: 5,
    opacity: 1
}

当我应用dashArray底层时，显示出来：

path = {
    color: '#000000',
    weight: 3,
    opacity: 1,
    dashArray: '5,10'
}

outline = {
    color: '#000000',
    weight: 5,
    opacity: 1
}

有没有一种简单的方法可以实现这一目标？

传单路径样式选项在这里。

编辑：顶部路径dashArray本身。第二个是当我将其覆盖dashArray在较宽的黑线（轮廓）上时。第三是我想要实现的目标。

考虑来自传单 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'
   });}")))

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

我正在努力让deck.gl 与传单（https://github.com/visgl/deck.gl/issues/5588）一起工作。

基本上，当 Leaflet 地图平移或缩放时，deck.gl 视图需要同步，以便在正确的位置渲染。这似乎在这里工作正常：https : //codepen.io/clebal/pen/rNjdzzr

它使用地图边界来更新deck.gl。在 codepen 中很明显，这在缩放期间效果不佳（deck.gl 不会与 Leaflet 一起动画）。

我的理解是 Leaflet 使用 CSS 制作动画，因此确实没有任何中间状态可供利用。

我见过的一种解决方法是覆盖内部_animateMove方法并调用和使用计时器在整个 250ms Leaflet 中定期更新deck.gl 以完成缩放动画。

这部分都相对简单，我面临的挑战是如何实际计算在分数缩放下的边界框。例如进入动画 25 毫秒（简化假设 CSS 动画是线性的，但实际上并非如此），我需要能够计算缩放 11.10 时地图的边界框是什么（地图本身不需要更新）。我希望然后可以使用这个边界框在deck.gl 端执行计算。

Leaflet 是否支持这种开箱即用的计算？我可以参考 Leaflet 代码库中的任何代码来帮助实现这一目标（甚至使用 turf 等外部工具）？