Question

我想让一组对象同时可拖动，这样它们只能被拖到一起。这意味着：如果我移动一个对象，图层中的其他对象将被移动到。特别是我有一个geojson文件，其中的featureCollection由几个对象组成，我希望它们可以拖动，但在地图上表现为单个标记。

到目前为止，我有：

var mymap = L.map('mapid').setView...
...

var drag = L.geoJson(null,{
    draggable: true,
});

omnivore.geojson('data.geojson', null, drag).addTo(mymap)

我已添加 Leaflet.Path.Drag 以使geojson对象可拖动。

在结果中，geojson要素集合中的每个要素都可以独立拖动。我怎么能把它们结合起来？

Answer 1

我终于通过让d3处理拖动部分来解决它。将组元素添加到地图后选择它，并通过d3.drag（）在其上使用translate元素。

var d = [{ x: 0, y: 0 }];
d3.select('svg').select('g').data(d)
  .attr("transform", function (d) {
      return "translate(" + d.x + "," + d.y + ")"; })
  .call(onDragDrop(dragmove, dropHandler));

function onDragDrop(dragHandler, dropHandler) {
  var drag = d3.drag();

  drag.on("drag", dragHandler)
      .on("end", dropHandler);
  return drag;
}

function dropHandler(d) {
    alert('dropped');
}

function dragmove(d) {
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        d3.select(this)
          .attr("transform", "translate(" + d.x + "," + d.y + ")");
}

是否可以制作一个由多个可在传单中拖拽的对象的图层？

1 个答案: