本文整理汇总了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;
}示例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 © <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();
}示例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: '© <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;
}示例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);
}示例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);
};
}示例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;
示例8:
import * as L from 'leaflet';
import 'leaflet-gpx';
const osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const osmAttrib = '© <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);示例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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
L.control.polylineMeasure().addTo(map);
示例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: '© <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);