Angular-Leaflet-Directive圖層

Question

我正在構建一個項目，利用可點擊的標記和形狀在平面圖上。

<leaflet layers="layers" markers="markers" ></leaflet> 

的標誌進展順利，似乎很簡單...

$scope.markers = {}; 
lodash.each(data.markers, function(marker, i) { 
    $scope.markers[marker.name] = { 
     lat : device.map_location[0], 
     lng : device.map_location[1], 
    }; 
}); 
$scope.$on('leafletDirectiveMarker.click', function (e, args) { 
    $scope.selected_marker = $scope.markers[args.modelName]; 
}); 

但層似乎並不管用這樣的事。我沒有將代碼添加到$ scope.layers（一個典型的Angular代碼）中。唯一可行的是這種無角度的混亂...

$scope.layers = { 
    overlays: { 
     spaces: { 
      name: 'Spaces', 
      type: 'group', 
     }, 
    } 
}; 
leafletData.getLayers().then(function(layers) { 
    lodash.each(data.spaces, function(space, i) { 
     layers.overlays.spaces.addLayer(L.geoJson({ 
      type: 'Feature', 
      geometry: { 
       type: "Polygon", 
       coordinates: [space.map_area] 
      }, 
     })); 
    }); 
}); 

有更好/更聰明的方式添加繪製的項目到地圖嗎？如何將點擊事件綁定到圖層？或者是宣傳單中的形狀只是啞巴，非互動的裝飾品？

Answer 1

好的，答案是有一個「geojson」參數。圖層用於位圖（我猜？），Geojsons用於矢量。

<leaflet geojson="vector_shapes" markers="markers" ></leaflet> 

$scope.vector_shapes = { 
    data: { 
     "type": "FeatureCollection", 
     "features": [], 
    }, 
    style: { 
     fillColor: "green", // etc. 
    } 
}; 

lodash.each(spaces, function(space, i) { 
    $scope.vector_shapes.data.features.push({ 
     type  : "Feature", 
     id   : space.id, 
     properties : { 
      name : space.name, 
     }, 
     geometry : { 
      type : "Polygon", 
      coordinates : [space.map_area], 
     } 
    }); 
}); 

仍然不確定是否「功能」可以點擊，但我會繼續挖掘或打開一個單獨的問題。

他們是，他們只是沒有記錄在任何地方。

$scope.$on('leafletDirectiveGeoJson.click', function(e, args) { 
    console.log('clicked shape'); 
    console.log(e); 
    console.log(args); 
});