本文整理匯總了TypeScript中leaflet.map函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript map函數的具體用法？TypeScript map怎麽用？TypeScript map使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了map函數的9個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: it
it('returns a marker with latlng', () => {
const latlng = [-105, 35];
overlay.map = L.map(document.createElement('div'));
const marker = overlay.createMarkerPlaceholder(latlng);
expect(marker.getLatLng()).toEqual(L.latLng(latlng));
});示例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: 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;
}示例5: beforeEach
beforeEach(() => {
latlng = [-105, 35];
name = 'test-name';
layer = {
feature: {
geometry: {
coordinates: [latlng],
type: 'Point'
},
properties: {
name: name
}
}
};
overlay.map = L.map(document.createElement('div'));
});示例6: 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);
}示例7: MainController
.controller("com.app.earthquake.mainController", function MainController($scope) {
const socket = Rx["DOM"].fromWebSocket("ws://127.0.0.1:8080");
this.tweetList = [];
this.earthquakesList = [];
const quakesTable = document.getElementById("quakes_info");
const map = L.map("map").setView([33.858631, -118.279602], 7);
const quakeLayer = L.layerGroup([]).addTo(map);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
const codeLayers = {};
const getRowFromEvent = event => {
return Rx.Observable
.fromEvent(quakesTable, event)
.filter(event => {
const el = event["target"];
return el.tagName === "TD" && el.parentNode.id.length;
})
.pluck("target")
.pluck("parentNode")
.distinctUntilChanged();
};
const quakes = Rx.Observable.interval(5000)
.flatMap(() => {
return Rx["DOM"].jsonpRequest({
url: "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojsonp",
jsonpCallback: "eqfeed_callback"
});
})
.flatMap(result => Rx.Observable.from(result["response"].features))
.distinct(quake => quake["properties"].code)
.share();
quakes.subscribe(quake => {
const coords = quake["geometry"].coordinates;
const size = quake["properties"].mag * 10000;
const circle = L.circle([coords[1], coords[0]], size)
.addTo(map);
quakeLayer.addLayer(circle);
codeLayers[quake["id"]] = quakeLayer.getLayerId(circle);
});
quakes.pluck("properties")
.subscribe(quake => $scope.$apply(() => this.earthquakesList.push(quake)));
getRowFromEvent("mouseover")
.pairwise()
.subscribe(rows => {
const prevCircle = quakeLayer.getLayer(codeLayers[rows[0]["id"]]);
const currCircle = quakeLayer.getLayer(codeLayers[rows[1]["id"]]);
prevCircle.setStyle({ color: "#59a27a" });
currCircle.setStyle({ color: "#b01055" });
});
getRowFromEvent("click")
.subscribe(row => {
const circle = quakeLayer.getLayer(codeLayers[row["id"]]);
map.panTo(circle.getLatLng());
});
quakes
.bufferWithCount(100)
.map(quakeList => {
return quakeList.map(quake => {
return {
id: quake["properties"].net + quake["properties"].code,
lat: quake["geometry"].coordinates[1],
lng: quake["geometry"].coordinates[0],
mag: quake["properties"].mag
};
});
})
.subscribe(quakes => socket.onNext(JSON.stringify({ quakes })));
socket.map(message => JSON.parse(message.data))
.subscribe(tweet => {
$scope.$apply(() => {
this.tweetList.push(tweet);
this.tweetList = E.from(this.tweetList)
.distinct(i => i["created_at"]).toArray();
});
});
});示例8:
class MiddleMarkerClass { }
class PolygonClass { }
class PolygonEditorClass { }
class PolylineClass { }
class PolylineEditorClass { }
class VertexMarkerClass { }
const map: L.Map = L.map('div', {
editable: true,
editOptions: {
drawingCSSClass: 'css-class',
editLayer: L.layerGroup(),
featuresLayer: L.layerGroup<L.Marker|L.Polyline|L.Polygon>(),
lineGuideOptions: {},
markerClass: MarkerClass,
markerEditorClass: MarkerEditorClass,
middleMarkerClass: MiddleMarkerClass,
polygonClass: PolygonClass,
polygonEditorClass: PolygonEditorClass,
polylineClass: PolylineClass,
polylineEditorClass: PolylineEditorClass,
skipMiddleMarkers: true,
vertexMarkerClass: VertexMarkerClass
}
});
const currentPoly: L.Polygon|L.Polyline| L.Marker = map.editTools.currentPolygon;
map.editTools.stopDrawing();
const marker: L.Marker = map.editTools.startMarker(L.latLng(0, 0), { draggable: true });
marker.disable();
marker.enable();示例9:
import * as L from 'leaflet';
const map = L.map('map', {
center: [51.505, -0.09],
zoom: 13,
fullscreenControl: true,
});