在使用传单拖动标记时使用polyline标记

Question

嗨，我有标记和像这个图像一样的折线连接。我在这里附上一个样品。

​

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

例如，如果我拖动标记3，它还应该更新polyline点，无论我将标记3放在哪里，它都应该与标记3连接。

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

我正在使用传单用于这个目的，但仍然无法解决拖曳逻辑的标记与多线。

下面是我使用的示例代码

$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);


                                }

                            });


                        }

                    });

下面是我用来用polyline拖动标记的代码

angular.forEach($scope.panoramas，函数(值，index4)){

$scope.markersindex4.on('dragstart'，函数(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 });

现在，要将侦听器附加到其中的拖动事件的检查，然后在回调中调用polyline的重画函数，如下所示：

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

如果这不起作用，请提供示例代码，这样我们就可以使用它了。

编辑

您还需要更改polyline的坐标，否则重绘将没有任何作用。查看这的答案，看看它是否适合你的需要。

编辑2

您使用的是一个多行数组，而答案只是使用一个具有坐标数组的polyline，所以在您的例子中，您需要使用两个循环来完成相同的任务。您可以使这更快，并可能使用一个对象作为查找表，以便为每个标记获取正确的polyline，例如：

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

然后，您可以得到用于每个标记的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);
    }
});

Answer 2

我有这种行为。请告诉我如何解决这个问题。

谢谢您抽时间见我。

​

​

这是通过从db获取数据或在全景图之间建立连接而创建的polyline。

​

​

当我开始拖动标记2时，我得到了这样的结果

​

​

当我拖动标记3的时候，这个图像。这种结果是使用你上面提供的源代码得到的。