leaflet - 使用传单拖动标记时使用折线标记

Question

嗨，我在标记与折线之间建立了连接，例如这个 Image 。
我在这里附上一个样本。

当我用折线拖动标记时，如何使拖动成为可能。

例如，如果我拖动标记 3，它也应该更新多段线点，并且我放置标记 3 多段线的位置应该与标记 3 连接。

我需要这种类型的拖动事件，它也可以在拖动标记时更新折线。

我为此使用了传单，但仍然无法解决带有折线的标记的拖动逻辑。

这是我正在使用的示例代码

$http.get("db/getConnectionData.php").then(function (response) {


$scope.links1 = response.data.records;


// $scope.showArrow();
   angular.forEach($scope.links1, function(value, i) {
        var source_panoId = $scope.links1[i].s_panoId;
        var dest_panoId   = $scope.links1[i].d_panoId;
        var sPanoID      = $scope.links1[i].sourcePano_id;
        var dPpanoID     = $scope.links1[i].destPano_id;


          angular.forEach($scope.panoramas, function(value, index) {
              if($scope.panoramas[index].panoId == source_panoId){
                   if($scope.links.indexOf($scope.panoramas[index])== -1){
                         $scope.links.push($scope.panoramas[index]);
                     }
                    var SlatLang = $scope.panoramas[index].project_latLng ;
                    var SLatLngArr = SlatLang.split(",");
                    var Slat  = parseFloat(SLatLngArr[0]);
                    var Slang = parseFloat(SLatLngArr[1]);
                    var polypoint1 = [Slat, Slang];

                angular.forEach($scope.panoramas, function(value, index1) {
                   if($scope.panoramas[index1].panoId == dest_panoId){         
                       if($scope.links.indexOf($scope.panoramas[index1])== -1){                                      
                            $scope.links.push($scope.panoramas[index1]);
                        }
                        var DlatLang = $scope.panoramas[index1].project_latLng ;
                        var DLatLngArr = DlatLang.split(",");
                        var Dlat  = parseFloat(DLatLngArr[0]);
                        var Dlang = parseFloat(DLatLngArr[1]);
                        var polypoint2 = [Dlat, Dlang];

                       // Draw seperate polyline for each connection
                        polyline = L.polyline([[Slat, Slang],[Dlat, Dlang]],
                                              {
                                                color: 'blue',
                                                weight: 5,
                                                opacity: .7,
                                              }
                                              ).addTo(map);

                                    $scope.polycoords.push(polyline);


                                }

                            });


                        }

                    });

这是我用来用折线拖动标记的代码

angular.forEach($scope.panoramas, function(value, index4){

$scope.markers[index4].on('dragstart', function(e){

            var latlngs = polyline.getLatLngs(),
                latlng = $scope.markers[index4].getLatLng();

            for (var i = 0; i < latlngs.length; i++) {
                if (latlng.equals(latlngs[i])) {
                    this.polylineLatlng = i;
                }
            }



        });//dragstart

        $scope.markers[index4].on('drag', function(e){

          var latlngs = polyline.getLatLngs(),
              latlng = $scope.markers[index4].getLatLng();
              latlngs.splice(this.polylineLatlng, 1, latlng);
              polyline.setLatLngs(latlngs);
        });//drag

        $scope.markers[index4].on('dragend', function(e){
          delete this.polylineLatlng;
        });//dragEnd

    });

Answer 1

首先，在创建标记时，记得传递draggable选项为 true ， 像这样:

var marker = L.marker(latLng, { draggable: true });

现在， check您希望将监听器附加到哪个拖动事件，然后调用 redraw回调内折线的函数，如下所示:

// var polyline defined somewhere
marker.on('drag', function (e) {
    polyline.redraw();
});

如果这不起作用，请提供示例代码，以便我们可以解决它。

编辑

您还需要更改折线的坐标，否则重绘将无济于事。退房 this在 SO 上回答，看看它是否符合您的需求。

编辑 2

您使用的是多段线数组，而答案仅使用具有坐标数组的多段线，因此在您的情况下，您需要使用两个循环来完成相同的任务。您可以使其更快，并且可以使用对象作为查找表来为每个标记获取正确的折线，例如，如下所示:

var table = {};
// ...
table[marker] = polyline;

然后，您可以获得用于每个标记的折线。但无论如何，这就是我认为在您的情况下可以像在示例中那样工作的方式(有点难以理解，但我希望它对您有用)。

我不知道您将示例的第二部分(事件处理程序)放在哪里，但我认为它不在创建折线的双循环内，对吗？所以这就是我想出的:

marker.on('dragstart', function (e) {
    var markerLatLng = marker.getLatLng();

    this.polylineLatLngs = [];
    for (var i = 0; i < $scope.polycoords.length; i++) {
        var polyline = $scope.polycoords[i];
        var latLngs = polyline.getLatLngs()

        for (var j = 0; j < latLngs.length; j++) {
            if (markerLatLng.equals(latLngs[j])) {
                this.polylineLatLngs.push([i, j]);
            }
        }
    }
});

marker.on('drag', function (e) {
    for (var i = 0; i < this.polylineLatLngs.length; i++) {
        var polyline = $scope.polycoords[this.polylineLatLngs[i][0]];
        var latLngs = polyline.getLatLngs();
        var markerLatLng = marker.getLatLng();

        latLngs.splice(this.polylineLatLngs[i][1], 1, markerLatLng);
        polyline.setLatLngs(latLngs);
    }
});