Leaflet Draw + Angular + GeoJSON：如何在Map和GeoJSON对象之间实现双向绑定

Question

我可以使用角度单张指令将Geojson图层添加到单张地图。

我还可以添加单张绘图控制和创建新的图层（多边形，折线等）

然而，似乎没有直接的方法，使通过该指令加载GeoJSON的层的编辑。

的代码看起来是这样的：

angular.extend($scope, { 
       controls: { 
        draw: {} 
       }, 
       geojson: { 
        ........... 
        ........... 
       } 
      }); 

.....

.....

<leaflet center="london" controls="controls" geojson="geojson"></leaflet> 

然而，当我尝试编辑层或创建新层，更改发生在不同的图层组中。例如，在加载GeoJSON之后，如果点击编辑按钮，则通过GeoJSON加载的项目都不可编辑。

我希望绘制控件绑定到指令中指定的GeoJSON对象。目标是通过UI对任何修改立即反映在geojson对象中，反之亦然。换句话说，我想要在编辑控件和geojson对象之间进行双向绑定。

Answer 1

您需要确保每个添加图层的位置都添加到“相同”特征/图层组中。

例如，我通常创建一个可用于$ scope的功能组，并向该组添加要共享功能的图层，例如点击编辑。请确保在从数据加载GeoJSON的函数中以及在绘制完成后添加图层的函数中执行此操作。

$scope.editableFields = new L.FeatureGroup(); 
var myLayer = L.circle([50.5, 30.5], 200); 
$scope.editableFields.addLayer(myLayer); 

然后，您需要指定控件将以哪个功能组为目标。类似于：

   controls:{ 
         draw: {}, 
         edit: { 
          featureGroup: $scope.editableFields; 
          } 
         }