Leaflet Draw + Angular + GeoJSON：如何实现 Map 和 GeoJSON 对象之间的两种方式绑定答案

【问题标题】：Leaflet Draw + Angular + GeoJSON: How to achieve two way binding between Map and GeoJSON objectLeaflet Draw + Angular + GeoJSON：如何实现 Map 和 GeoJSON 对象之间的两种方式绑定
【发布时间】：2014-12-05 18:10:45
【问题描述】：

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

我还可以添加传单 Draw 控件并创建新图层（多边形、折线等）

但是，似乎没有直接的方法可以编辑指令加载的 GeoJSON 图层。

代码如下所示：

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

.....

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

但是，当我尝试编辑图层或创建新图层时，更改发生在不同的图层组中。例如，GeoJSON 加载后，如果我点击编辑按钮，通过 GeoJSON 加载的所有项目都无法编辑。

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

【问题讨论】：

标签： angularjs leaflet angular-leaflet-directive

【解决方案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;
                          }
                         }

【讨论】：