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

Question

嗨我在标记与折线之间有连接，就像这张图片一样。 我在这里附上一个样本。

当我使用折线拖动标记时，如何进行拖动。

示例，如果我拖动标记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（＆＃39; dragstart＆＃39;，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();
});

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

修改

您还需要更改折线的坐标，否则重绘将不执行任何操作。在SO上查看this答案，看看它是否符合您的需求。

修改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);
    }
});

Answer 2

我正在接受这种行为。请让我知道如何解决这个问题。

感谢您的时间。

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

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

拖动标记3时的图像。 我使用您在上面提供的源代码获得的这种结果。