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