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

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();
});

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

编辑

您还需要更改折线的坐标，否则重绘将无济于事。查看 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 时的这张图片。 我使用您上面提供的源代码得到的这种类型的结果。