Leaflet Draw + Angular + GeoJSON:如何实现地图与GeoJSON对象的双向绑定

Question

我可以使用angular leaflet指令将Geojson层添加到leaflet地图中。

我还可以添加leaflet绘制控件并创建新的图层(多边形、折线等)。

但是，似乎没有直接的方法来启用对指令加载的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;
                          }
                         }