Leaflet:连接线内可拖动标记的体系结构

问题描述 投票:1回答:1

我正在开发基于传单的原理图/图表编辑器。基本上,这是由折线连接的任意数量的交互式(即可拖动)标记:

enter image description here

我想开发系统,以便在拖动标记时,重新绘制连接的折线以与它们一起拖动。

目前,标记和折线彼此没有意识到。标记是扩展L.marker的自定义类,折线同样延伸L.Polyline。 L.Map已经扩展为提供'addComponent'(Component == marker)和'linkComponents'方法。

我的第一个想法是在标记本身上保持对每条连接折线的引用。然后我可以覆盖拖动处理程序来重绘每条折线。

这提出了两个问题:

  • 标记如何知道我需要更改折线的哪个“结束”?
  • 在某些时候,我希望能够通过一些用户交互单独删除这些行。如果我这样做,连接的标记现在将保持对不存在的折线的引用!因此,解决这个问题的方法是让每条折线也保持对它们连接的标记的引用。但现在它似乎变得有点脆弱,有多个地方我可能需要更新信息。

所以我正在寻找有关实现此功能的合理方法/模式的建议

javascript leaflet draggable
1个回答
1
投票

答案,或者至少是一个答案让我停止思考像企业OO痴迷的开发人员并利用传单事件系统。

当我创建折线时,我传入原始标记以计算折线的起点和终点:

const Link = L.Polyline.extend({

  options: {
    fromIcon: null,
    fromPort: null,
    toIcon: null,
    toPort: null
  },

  initialize: function(latlngs, options) {
    L.Util.setOptions(this, options);

    // We will insert the 'from port' coordinate at the start and the
    // 'to' coordinate at the end. 
    // 'getPortLocation' is just a simple function to return the LatLng of where a line should start to be drawn over a 'port'
    const start = this.options.fromIcon.getPortLocation(this.options.fromPort);
    const end = this.options.toIcon.getPortLocation(this.options.toPort);

    // Insert port positions at the start and end af the latlng array.
    latlngs.unshift(start);
    latlngs.push(end);
    this._setLatLngs(latlngs);
  }
}

一个简单的解决方案就是简单地听一下拖动事件:

    // Make sure the line is updated when the connected markers are moved
    this.options.fromIcon.on('drag', (event) => this.fromDragHandler(event, this.options.fromPort));
    this.options.toIcon.on('drag', (event) => this.toDragHandler(event, this.options.toPort));

并重新绘制线条:

fromDragHandler: function(event, portNum) {
  const marker = event.target;
  const latlngs = this.getLatLngs();
  const newPos = marker.getPortLocation(portNum);
  latlngs[0] = newPos;
  this.setLatLngs(latlngs);
}

在我问起之前,我是否想过更加努力并浏览了更多代码

© www.soinside.com 2019 - 2024. All rights reserved.