wie in angular1 programmatisch

Question

in HTML ein Rechteck auf einer ui-Faltblatt Karte hinzufügt meine Karte als diese

defnied ist

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

in der Steuerung, erweitere ich den Winkel Umfang, zu Grenzen und Schichten zu definieren. Ich weiß nicht, wie ich auf die Prospektkarte zugreifen kann, um OverlayItems hinzuzufügen. Zur Zeit habe ich ein Rechteck erstellt, das aber nicht auf der Karte angezeigt wird.

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 
} 

ich diese Fehlermeldung erhalten, wenn Sie den Code ausgeführt wird:

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) 

Answer 1

In Ihrem Code gibt es über den Kopf, auch zusätzliche Parameter. Mach es so einfach wie möglich.

wie:

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

Siehe Jsfiddle für weitere Informationen: http://jsfiddle.net/nidhiarya1245/5hukx0g5/