0

平面図でクリック可能なマーカーと形状を利用するプロジェクトを構築しています。

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

マーカーは順調に進んでおり、かなり単純に見えます…</p> 

$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 の混乱です…</p> 

$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 の形状は、ただの馬鹿げた非インタラクティブな装飾なのでしょうか?

4

1 に答える 1

1

わかりました、答えは「geojson」パラメータがあるということです。レイヤーはビットマップ用 (だと思いますか?)、Geojson はベクター用です。

<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);
});
于 2015-10-27T14:13:02.737 に答える