标签: leaflet

全部,我想检测用户图层选择,以便将我的侧边栏与显示的图层同步.

但我没有在API参考中看到任何图层控制事件; 我怎么知道这种用户层选择何时发生？

作为替代方案,我查看了图层加载和卸载事件,但我没有看到任何返回的标识.我不知道怎么回事？

我想用数据填充GeoJson图层,然后动态过滤要显示的功能.

我已经使过滤器功能工作,但我不知道如何更改过滤器,然后刷新图层.

添加数据后,有什么办法可以更新过滤器吗？

我需要在地图中选择多个标记.这样的事情:Google地图中的框/矩形绘制选择,但使用Leaflet和OSM.

我认为可以通过修改在OSM地图中移动单击并拖动时出现的缩放框来完成,但我不知道该怎么做.

编辑:我重写了_onMouseUp函数,正如L. Sanna所建议的那样,结果是这样的:

_onMouseUp: function (e) {

    this._finish();

    var map = this._map,
    layerPoint = map.mouseEventToLayerPoint(e);

    if (this._startLayerPoint.equals(layerPoint)) { return; }

    var bounds = new L.LatLngBounds(
    map.layerPointToLatLng(this._startLayerPoint),
    map.layerPointToLatLng(layerPoint));

    var t=0;
    var selected = new Array();

    for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        pt = new L.LatLng(a[0], a[1]);

        if (bounds.contains(pt) == true) {
            selected[t] = a[2];
            t++;
        }
    }

    alert(selected.join('\n'))
},

在我们的项目之一,我们使用Leaflet以及Leaflet.markercluster插件.通过Leaflet查看源代码,我发现它将_collapse()函数附加到地图的click事件中,所以每当我点击地图时它就会收缩先前扩展的集群.
现在,我想禁用此行为.如果群集被扩展,那么我只想取消选择click事件上的所有标记(并且不收缩群集本身).这是我的代码片段:

map.on('click', function(e) {
    scope.deselectAllMarkers();
});

我试图在这个单行回调的末尾添加以下行,以便停止click事件的传播:

scope.L.DomEvent.stopPropagation(e);
scope.L.DomEvent.preventDefault(e);
scope.L.DomEvent.stop(e);
scope.L.DomEvent.stopPropagation(e.originalEvent);
scope.L.DomEvent.preventDefault(e.originalEvent);
scope.L.DomEvent.stop(e.originalEvent);

而且它们都不起作用.隐藏在Leaflet源内部的默认侦听器会在我单击地图时保持其调用.我错过了什么吗？

小册子文档显示您可以向标记添加弹出窗口

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

或创建一个独立的弹出窗口

var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);

有没有办法设置弹出选项并将其绑定到标记？我希望能够为弹出窗口设置自己的最大宽度,并在单击标记时打开/关闭它们.

我有一个传单地图,用于位置共享.当用户共享其位置时,会在地图中添加显示其位置的标记,供所有其他用户查看.无论何时添加,移动或删除一个标记,它都会自动调整地图以显示所有标记.我还添加了一个自定义控件,可以打开和关闭自动调整行为.这一切都很好,但我还想使地图足够智能,以便在用户平移或缩放地图时自动关闭自动调整行为.

事实证明这非常困难,因为我无法找到一种好方法来区分用户是启动平移/缩放操作还是自动调整.我最初是在听panstart和zoomstart事件,但这些事件也是由自动调整触发的.我想我可以设置一个标志,告诉它在自动调整引起缩放/平移时不要关闭自动调整.我在关闭自动调整以响应panstart和zoomstart之前先检查此标志,然后在收到panend和zoomend时将其清除.

这似乎工作正常,直到发生自动调整,不会导致平移或缩放.假设我们有一个大的自动拟合标记簇,并且中间的一个标记被移除.由于绑定框未更改,因此不会触发平移或缩放,因此不会清除告知其不关闭自动调整的标记.下次用户平移或缩放地图时,它不会像应该的那样关闭自动调整,因为它认为它仍处于自动调整操作的中间.

如何在用户直接平移或缩放地图时可靠地关闭自动调整,但在通过其他方式平移或缩放时将其保持打开状态？

这是相关代码:

var markers = [];        // Map markers are stored in this array.
var autoFit = true;      // Whether auto-fit is turned on
var lockAutoFit = false; // Temporarily lock auto-fit if true
var map;                 // Leaflet map object

function initMap() {
    // Leaflet map initialized here
    map.on('movestart zoomstart', function() {
        if (!lockAutoFit) {
            autoFit = false;
        }
    });
    map.on('moveend zoomend', function() {
        lockAutoFit = false;
    });
}

function toggleAutoFit() {
    autoFit = !autoFit;

    if (autoFit) …

我想leaflet在html文档中更改地图输出的高度和宽度.有没有一种简单的方法在R markdown中执行此操作而无需进入整个CSS业务？

```{r}
library(leaflet)
library(dplyr)

m <- leaflet() %>% setView(lng = -71.0589, lat = 42.3601, zoom = 12)
m %>% addTiles() 
```

理想情况下,我希望map的宽度与代码块的宽度相同,如下所示.

我似乎在任何地方都找不到这个 - 有开放街道地图的示例，以及使用 mapbox 的提示，但除此之外我想知道还有哪些其他地图和网址可用？

我正在使用 Leaflet JS 和 MapBox 创建地图。我的浏览器显示如下：

地图根本不显示，我的地图图块是空白的。我在开发工具控制台中得到的错误是：

GET https://api.tiles.mapbox.com/v4/mapbox.streets/9/123/183.png?access_token=pk.eyJ1IjoibXl2ZXJkaWN0IiwiYSI6ImNrZmoyYmpuNDB1eHYycG16bms0aHN2ZWwifQ.w0DRp5yDUHxa2RJa0aDRlQ 410 (Gone)
Image (async)       
createTile  @   TileLayer.js:158
_addTile    @   GridLayer.js:812
_update     @   GridLayer.js:709
_setView    @   GridLayer.js:570
_resetView  @   GridLayer.js:526
 onAdd      @   GridLayer.js:162
_layerAdd   @   Layer.js:114
whenReady   @   Map.js:1465
addLayer    @   Layer.js:176
addTo       @   Layer.js:52
(anonymous) @   maps.js:16

上面的 maps.js:16 引用了下面 maps.js 代码片段中的最后一行 .addTo(map)：

let coordinates = [ 44.96, -93.2 ] 
let zoomLevel = 9
let map = L.map("college-map").setView(coordinates, zoomLevel)

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery …

对于我正在进行的一个小项目,我需要能够在leaflet.js驱动的图像映射上放置一个标记并更新该标记的位置(如果它被拖动).我使用以下代码试试这个,但它失败了.我收到错误'标记未定义'.我不知道为什么它不起作用 - 也许你们可以帮助我？;)

function onMapClick(e) {
    gib_uni();
    marker = new L.marker(e.latlng, {id:uni, icon:redIcon, draggable:'true'};
    map.addLayer(marker);
};

marker.on('dragend', function(event){
    var marker = event.target;
    var position = marker.getLatLng();
    alert(position);
    marker.setLatLng([position],{id:uni,draggable:'true'}).bindPopup(position).update();
});