1

HTMLでは、私のマップは次のように定義されています

<leaflet bounds="map.spatial_bounds_card" layers="map.layers_card" height="200px" ></leaflet>

コントローラーで、角度スコープを拡張して、境界とレイヤーを定義します。OverlayItems を追加するためにリーフレット マップにアクセスする方法がわかりません。現在、長方形を作成しましたが、マップには表示されません。

function Ctrl($scope, leafletBoundsHelpers, leafletDrawEvents) {
    var drawnItems2 = new L.FeatureGroup();
    angular.extend($scope, {
        map: {
            spatial_bounds_card: {},
            layers_card: {
                baselayers: {
                    osm: {
                        name: 'OpenStreetMap',
                        url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        type: 'xyz'
                    }
                }
            },
            drawOptions: {
                position: "bottomright",
                draw: {
                    polyline: false,
                    polygon: false,
                    circle: false,
                    rectangle: {
                        metric: false,
                        showArea: true,
                        shapeOptions: {
                            color: 'blue'
                        }
                    },
                    marker: false
                },
                edit: {
                    featureGroup: drawnItems2,
                    remove: false
                }
            },
            defaults: {
                scrollWheelZoom: false
            }
        }
    });
    var bb = L.latLngBounds($scope.filters.spatial.params.southwest, $scope.filters.spatial.params.northeast);
    console.log(bb);
    var selectedBoundingBox = new L.rectangle(bb,
            {
                color: 'blue'
            });
    selectedBoundingBox.addTo($scope.map); // <-- error here
}

コードを実行すると、次のエラーが発生します。

angular.js:13920 TypeError: t.addLayer is not a function
    at e.addTo (leaflet.js:7)
    at new FilterSpatialCardCtrl (filter_spatial_card.controller.js:50)
    at Object.invoke (angular.js:4718)
    at $controllerInit (angular.js:10354)
    at nodeLinkFn (angular.js:9263)
    at angular.js:9673
    at processQueue (angular.js:16383)
    at angular.js:16399
    at Scope.$eval (angular.js:17682)
    at Scope.$digest (angular.js:17495)
4

1 に答える 1

1

あなたのコードにはオーバーヘッドがあり、余分なパラメータもあります。できるだけシンプルにしてください。

お気に入り：

angular.extend($scope, {
    center: {
            lat: 54.559322,
            lng: -5.767822,
            zoom: 14
    },
        defaults: {
            maxZoom: 25,
            minZoom: 1,
            path: {
                weight: 10,
                color: '#800000',
                opacity: 1
            }
        }
});

    var markersFeatureGroup = new L.FeatureGroup();
leafletData.getMap()
.then(function(map) {
    var latlang = L.latLng(50.5, 30.5);
    var circleobj = L.rectangle([[54.559322, -5.767822], [54.560900, -5.760000]],{
    color: 'blue'
        }).bindLabel("Hello World", { direction: 'bottom', clickable: "interactive" });//use left, left, auto, 
  markersFeatureGroup.addLayer(circleobj);
  map.addLayer(markersFeatureGroup);
});

詳細については、Jsfiddle を参照してください: http://jsfiddle.net/nidhiarya1245/5hukx0g5/

于 2016-10-20T12:10:31.610 に答える