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

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

[编辑]他们是，他们只是没有记录在任何地方。

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