Слои Angular-Leaflet-Directive

Я разрабатываю проект, в котором используются интерактивные маркеры и фигуры на плане этажа.

<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 — просто глупые, неинтерактивные украшения?


angularjs leaflet angular-leaflet-directive
person Eric_WVGG    schedule 26.10.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, ответ в том, что есть параметр «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);
});
person Eric_WVGG    schedule 27.10.2015