Leaflet geojson更新可拖动状态或标记

时间:2018-01-08 18:45:44

标签: javascript jquery leaflet geojson

我想知道是否有可能更新传单中GEOJSON图层内标记的可拖动事件,我知道我可以通过添加以下内容来实现:

layer.options.draggable = True

在onEachFeature函数中,我想要实现的是,更新元素单击时的可拖动选项,如:

$(document).on('click','#someButton',function(){
    layer.options.draggable = True; //Only one specific marker
});

这样我想让所有标记都禁用拖动选项,然后单击按钮,启用可拖动选项,仅适用于一个特定标记。是否有可能使用geojson层实现这一目标?我在featureGroup中也有这个geojson层,希望你们能帮助我。感谢

2 个答案:

答案 0 :(得分:0)

您可以通过简单地从地图中删除它,设置(重置)其draggable选项,然后将其重新添加到地图来动态启用/禁用传单标记的可拖动性:

var map = L.map('map').setView([48.86, 2.35], 11);

var marker = L.marker([48.86, 2.35]).addTo(map);

document.getElementById('dragonoff').addEventListener('click', function(event) {
  event.preventDefault();

  // Toggle Marker draggability.
  marker.remove();
  marker.options.draggable = !marker.options.draggable;
  marker.addTo(map);

  alert(marker.options.draggable ? 'Marker is now draggable' : 'Marker is no longer draggable');
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>

<div id="map" style="height: 150px"></div>

<button id="dragonoff">Enable / Disable dragging</button>

是否通过GeoJSON Leaflet图层组创建标记是无关紧要的。

答案 1 :(得分:0)

每个L.Marker都有一个dragging属性,这是标记的Handler进行拖动-并且Leaflet处理程序可以分别为enable() d和disable() d。 / p>

Leaflet documentation about L.Marker's dragging property还明确指出:

  

交互处理程序是标记实例的属性,可让您控制运行时的交互行为,从而启用或禁用某些功能,例如拖动(请参见Handler方法)。示例:

marker.dragging.disable();

在您的特定情况下,这意味着:

$(document).on('click','#someButton',function(){
    layer.dragging.enable();
});

请注意,这仅适用于L.Marker s-如果您使用的是GeoJSON,请不要指望它适用于直线或多边形或您特别决定显示为L.Circle s的点或L.CircleMarker s(通过pointToLayer的{​​{1}}选项)