TypeScript control.layers方法代碼示例

	init(controlConfig: any, controlOptions: any): L.Control.Layers {

		let baseLayers = controlConfig.baseLayers || {};
		let overlays = controlConfig.overlays || {};

		this.layersControl = L.control.layers(baseLayers, overlays, controlOptions);

		return this.layersControl;
	}

}).addTo(map);
points.addTo(map);

var baseMaps = {
  "Streets": basemapLayer("Streets"),
  "Topographic": basemapLayer("Topographic")
};

var overlayMaps = {
  "TAs": polygons,
  "Gates": points
};

baseMaps["Streets"].addTo(map);

L.control.layers(baseMaps, overlayMaps).addTo(map);
L.control.scale().addTo(map);

polygons.bindPopup(function (feature) {
  return esriLeafletUtil.template('<p>{F_Area_ID}<br>{F_label}<br>{Use_Restri}<br>More stuff here!</p>', feature.properties);
});
points.bindPopup(function ({feature}) {
  return L.Util.template('<p>Gate {F_Area_ID}<br>{TA}<br><br>More stuff here!</p>', feature.properties);
});

polygons.on('mouseout', function (e) {
  document.getElementById('info-pane').innerHTML = 'Hover to Inspect';
});

var oldId;
polygons.on('mouseover', function (e) {

    link: function postLink(scope, element) {
      L.Icon.Default.imagePath = config.appSubUrl + "/public/vendor/leaflet/dist/images";
      var baselayers = {};
      var overlays = {};
      var layerControl = L.control.layers(baselayers, overlays, {position: 'topleft'});
      var zoomControl = L.control.zoom({position: 'topright'});
      var scaleControl = L.control.scale({position: 'bottomleft'});
      var esri = L.tileLayer(
        'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
      );
      var initialZoom = 6;
      var initialPosition = new L.LatLng(31.5635497, -91.1403352);
      var map = L.map(element[0], {
        zoomControl: false,
        attributionControl: false,
        inertia: false,
        keyboard: true,
        dragging: true,
        scrollWheelZoom: true,
        zoomAnimation: true,
        layers: [esri] // only add one!
      }).setView(initialPosition, initialZoom);

      scope.$on("zoom", function (event, args) {
        console.log("picked up the event");
        map.setView(initialPosition, args.zoomlevel,
          {
            "animate": true
          }
        );
      });

      var markerLayer = MapSrv.getMarkerLayer();
      markerLayer.success(processMarkerLayer);
      var baseLayers = MapSrv.getBaseLayers();
      baseLayers.success(processBaseLayers);
      var remoteLayers = MapSrv.getRemoteLayers();
      remoteLayers.success(processRemoteLayers);
      var layers = MapSrv.getLayers();
      layers.success(processLayers);

      zoomControl.addTo(map);
      scaleControl.addTo(map);
      layerControl.addTo(map);


      function processMarkerLayer(response) {
        var markerLayerHandlers = {
          onEachFeature: markerLayerOnEachFeatureFunction
        };
        var layer = L.geoJson(response, markerLayerHandlers);
        layer.addTo(map);
      }

      function processBaseLayers (response) {
        for (var i = 0; i < response.length; i++) {
          var name = response[i].name;
          var url = response[i].url;
          var attribution = response[i].attribution;
          var subdomains = response[i].subdomains;

          var baselayer = L.tileLayer(
            url,
            {
              attribution: attribution,
              subdomains: subdomains
            }
          );
          layerControl.addBaseLayer(baselayer, name);
        };
      }

      function processRemoteLayers (response) {
        for (var i = 0; i < response.length; i++) {
          var name = response[i].name;
          var url = response[i].url;
          var handler_factory_args = {
            style: {
              radius: 8,
              fillColor: "#" + response[i].color,
              color: "#000",
              weight: 1,
              opacity: 1,
              fillOpacity: 0.8
            }
          };
          var handler_factories = {
            style: defaultStyleFactory,
            pointToLayer: circleMarkerPointToLayerFactory,
            onEachFeature: simplePopupOnEachFeatureFactory
          };
          process_geojson(url, name, handler_factory_args, handler_factories);
        }
      }

      function processLayers(response) {
        for (var i = 0; i < response.length; i++) {
          var name = response[i].display_name;
          var url = "http://129.114.111.79/media/" + "geojson/" + response[i].file_name;
          //var url = "http://localhost:8000/media/" + "geojson/" + response[i].file_name;
//.........這裏部分代碼省略.........

		this.zone.runOutsideAngular(() => {
			this.layersControl = control.layers(baseLayers, overlays, controlOptions);
		});