• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript leaflet.tileLayer函数代码示例

原作者: [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 © Mapbox, Map Data © 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;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript leaflet.Control类代码示例发布时间:2022-05-25
下一篇:
TypeScript leaflet.popup函数代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap