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 代码）没有任何运气。唯一有效的就是这种非 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]
            },
        }));
    });
});

有没有更好/更智能的方式将绘制的项目添加到地图中？以及如何将点击事件绑定到图层？还是 Leaflet 中的形状只是愚蠢的、非交互式的装饰？

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],
        }
    });
});

仍然不确定“功能”是否可以点击，但我会继续挖掘或为此打开一个单独的问题。

[edit] 它们是，只是没有记录在任何地方。

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