TypeScript leaflet.tileLayer函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中leaflet.tileLayer函数的典型用法代码示例。如果您正苦于以下问题：TypeScript tileLayer函数的具体用法？TypeScript tileLayer怎么用？TypeScript tileLayer使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了tileLayer函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: initMap

 initMap() {
   this.map = L.map('map', {
     center: [this.coords[0], this.coords[1]],
     zoom: 8,
   });
   let basemap = L.tileLayer('https://api.mapbox.com/styles/v1/nathanhnew/cj62p1p9l3nyx2qp07zm12yh5/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF0aGFuaG5ldyIsImEiOiJjajYxZXJ2NHowdHk1MnFvZnFvcjE2aTZ3In0.uyW_Te8pYugmfTiKuVHvOA', {
     attribution: 'Imagery &copy; Mapbox, Map Data &copy; OpenStreetMap |'
   });
   var radarWMS = L.tileLayer.wms("https://nowcoast.noaa.gov/arcgis/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer/WMSServer", {
     layers: '1',
     format: 'image/png',
     transparent: true,
     opacity: 0.8,
     attribution: 'Radar data provided by National Weather Service via nowCOAST'
   });
   var warningsWMS = L.tileLayer.wms("https://nowcoast.noaa.gov/arcgis/services/nowcoast/wwa_meteoceanhydro_shortduration_hazards_warnings_time/MapServer/WMSServer", {
     layers: '1',
     format: 'image/png',
     transparent: true,
     opacity: 0.8,
     attribution: 'nowCOAST'
   });
   let overlay = L.tileLayer('https://api.mapbox.com/styles/v1/nathanhnew/cj62phsw73npj2rphndjzt3i2/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF0aGFuaG5ldyIsImEiOiJjajYxZXJ2NHowdHk1MnFvZnFvcjE2aTZ3In0.uyW_Te8pYugmfTiKuVHvOA');
   let layers = L.layerGroup([basemap,radarWMS,warningsWMS,overlay]).addTo(this.map)
   this.initialized = true;
 }

开发者ID:nathanhnew，项目名称:nathansweather-legacy，代码行数:26，代码来源:leaflet-map.component.ts

示例2: displayMap

  displayMap() {
    var bounds = new L.latLngBounds([52.5, 21], [44, 41]);

    map = L.map('map', {
      center: new L.LatLng(48.46, 30.87),
      zoom: 6,
      maxZoom: 18,
      minZoom: 6,
      zoomControl: false,
      inertia: false,
      attributionControl: false,
      maxBounds: bounds
    });

    L.tileLayer(
      'https://api.mapbox.com/styles/v1/kastrulya/ciopmkl6g0052i8nmlnjw6iww/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoia2FzdHJ1bHlhIiwiYSI6ImNpb3Bsdm92dTAwMDJ2bG0xenEwZmJlYm4ifQ.nsPNZQ726nMQtszDGhDX3w',
      {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ÂŠ <a href="http://mapbox.com">Mapbox</a>',
        accessToken: 'pk.eyJ1Ijoia2FzdHJ1bHlhIiwiYSI6ImNpb3Bsdm92dTAwMDJ2bG0xenEwZmJlYm4ifQ.nsPNZQ726nMQtszDGhDX3w'
    }).addTo(map);

    this.createMask();
    this.createDistricts();
    //Disable drag on min zoom
    map.on('drag', function () {
      map.panInsideBounds(bounds, {animate: false});
    });
    this.createInfo();
  }

开发者ID:illyaV，项目名称:Pathfinder，代码行数:29，代码来源:map.ts

示例3: ngOnInit

    ngOnInit () {
        let options = {
            mapId: "map",
            lat: "51.505",
            lng: "-0.09",
            zoom: 12
        }
        let map = L.map(options.mapId, {
            center: new L.LatLng(options.lat, options.lng),
            zoom: options.zoom,
            zoomControl: false
        });

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        var zoomControl = L.control.zoom({
            position: 'topright'
        });
        map.addControl(zoomControl);
        this.map = map;
        this.addDrawControl();

        return map;
    }

开发者ID:panterz，项目名称:geofence-designer，代码行数:25，代码来源:map.component.ts

示例4: createTileLayer

	/**
	 * Creates a TileLayer from the provided definition. This is a convenience function
	 * to help with generating layers from objects.
	 *
	 * @param layerDef The layer to create
	 * @returns {TileLayer} The TileLayer that has been created
	 */
	static createTileLayer(layerDef: LeafletTileLayerDefinition): TileLayer {
		let layer: TileLayer;

		switch (layerDef.type) {
			case 'xyz':
				layer = tileLayer(layerDef.url,  layerDef.options);
				break;
			case 'wms':
			default:
				layer = tileLayer.wms(layerDef.url,  layerDef.options);
				break;
		}

		return layer;
	}

开发者ID:misteronak，项目名称:Verion-1.0-Donation-Dashboard，代码行数:22，代码来源:leaflet-tile-layer-definition.model.ts

示例5: loadMap

  loadMap() {
    this.map = Leaflet
      .map("map")
      .setView(this.latLng, 13)
      .on("click", this.onMapClicked.bind(this))

    Leaflet.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
      .addTo(this.map);

    this.marker = Leaflet
      .marker(this.latLng, { draggable: true })
      .on("dragend", this.onMarkerPositionChanged.bind(this))
      .addTo(this.map);

    this.circle = Leaflet.circle(this.latLng, this.radius).addTo(this.map);
  }

开发者ID:lhammond，项目名称:ionic2-geofence，代码行数:16，代码来源:geofence-details.ts

示例6: processBaseLayers

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

开发者ID:tclaytempleton，项目名称:grafana，代码行数:17，代码来源:leaflet_directive.ts

示例7:

	wheelDebounceTime: 30,
	wheelPxPerZoomLevel: 25,
	tap: false,
	tapTolerance: 10,
	bounceAtZoomLimits: false
};

mapOptions.doubleClickZoom = true;
mapOptions.doubleClickZoom = 'center';

mapOptions.center = latLng;
mapOptions.center = latLngLiteral;
mapOptions.center = latLngTuple;

mapOptions.layers = [];
mapOptions.layers = [L.tileLayer('')]; // add layers of other types

mapOptions.maxBounds = latLngBounds;
mapOptions.maxBounds = [];
mapOptions.maxBounds = latLngBoundsLiteral;

// mapOptions.renderer = ?

mapOptions.scrollWheelZoom = true;
mapOptions.scrollWheelZoom = 'center';

mapOptions.touchZoom = false;
mapOptions.touchZoom = 'center';

let layer: L.Layer;

开发者ID:Igorbek，项目名称:DefinitelyTyped，代码行数:30，代码来源:leaflet-tests.ts

示例8:

import * as L from 'leaflet';
import 'leaflet-gpx';
const osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
const osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib });
const map = L.map('map', { layers: [osm], center: L.latLng(-37.7772, 175.2756), zoom: 15 });

const gpx = new L.GPX(
    '<?xml version="1.0" encoding="UTF-8"?>\
  <gpx creator="Garmin Connect" version="1.1" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/11.xsd" \
   xmlns="http://www.topografix.com/GPX/1/1" \
   xmlns:ns3="http://www.garmin.com/xmlschemas/TrackPointExtension/v1" \
   xmlns:ns2="http://www.garmin.com/xmlschemas/GpxExtensions/v3" \
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">\
   <metadata><link href="connect.garmin.com"><text>Garmin Connect</text></link><time>2017-09-12T18:02:33.000Z</time>\
   </metadata><trk><name>Villefontaine Course Ă  pied</name><type>running</type><trkseg>\
   <trkpt lat="45.6159922666847705841064453125" lon="5.14371019788086414337158203125">\
   <ele>282.399993896484375</ele><time>2017-09-12T18:02:33.000Z</time><extensions>\
   <ns3:TrackPointExtension><ns3:cad>58</ns3:cad></ns3:TrackPointExtension></extensions></trkpt>\
   <trkpt lat="45.61599235050380229949951171875" lon="5.1437102816998958587646484375">\
   <ele>282.399993896484375</ele><time>2017-09-12T18:02:34.000Z</time><extensions><ns3:TrackPointExtension><ns3:cad>58</ns3:cad>\
   </ns3:TrackPointExtension></extensions></trkpt><trkpt lat="45.6161034107208251953125" lon="5.14358597807586193084716796875">\
   <ele>282</ele><time>2017-09-12T18:03:44.000Z</time><extensions><ns3:TrackPointExtension><ns3:cad>58</ns3:cad></ns3:TrackPointExtension></extensions>\
   </trkpt></trkseg></trk></gpx>',
    { async: true })
    .on('loaded', (e: any) => {
        map.fitBounds(e.target.getBounds());
    }).addTo(map);

const durationString: string = gpx.get_duration_string(1000, true);
const durationStringIso: string = gpx.get_duration_string_iso(1000, true);

开发者ID:AlexGalays，项目名称:DefinitelyTyped，代码行数:31，代码来源:leaflet-gpx-tests.ts

示例9:

import * as L from 'leaflet';
import 'leaflet.polylinemeasure';

const map = L.map('map', {center: L.latLng(43.24209, 76.87743), zoom: 15});

L.tileLayer("http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
    subdomains: ['a', 'b', 'c'],
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

L.control.polylineMeasure().addTo(map);

开发者ID:AbraaoAlves，项目名称:DefinitelyTyped，代码行数:11，代码来源:leaflet.polylinemeasure-tests.ts

示例10:

import * as L from 'leaflet';
import 'leaflet-routing-machine';

const map: L.Map = L.map('map-container');

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.Routing.control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ]
}).addTo(map);

开发者ID:AlexGalays，项目名称:DefinitelyTyped，代码行数:15，代码来源:leaflet-routing-machine-tests.ts

注：本文中的leaflet.tileLayer函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。