本文整理汇总了TypeScript中leaflet.control类的典型用法代码示例。如果您正苦于以下问题：TypeScript control类的具体用法？TypeScript control怎么用？TypeScript control使用的例子？那么, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了control类的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: 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;
}示例2: init
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;
}示例3:
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);
示例4: basemapLayer
}).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) {示例5: postLink
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;
//.........这里部分代码省略.........
示例6:
this.zone.runOutsideAngular(() => {
this.layersControl = control.layers(baseLayers, overlays, controlOptions);
});示例7:
import * as L from 'leaflet';
import 'leaflet.fullscreen';
const map: L.Map = L.map('map-container');
// Defaults
const icon: L.Control.Fullscreen = L.control.fullscreen({
position: 'topleft',
title: 'Full Screen',
titleCancel: 'Exit Full Screen',
forceSeparateButton: false,
forcePseudoFullscreen: false
});
icon.addTo(map);
// My Usage
L.control.fullscreen({
position: 'topleft',
content: '<i class="fa fa-arrows-alt"></i>',
forceSeparateButton: true,
}).addTo(map);
示例8:
import * as L from 'leaflet';
import 'leaflet-geocoder-mapzen';
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 = new L.Map('map', {layers: [osm], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 });
// Add geocoding plugin
L.control.geocoder('search-MKZrG6M').addTo(map);
示例9:
import * as L from 'leaflet';
const map = L.map('map', {
center: [51.505, -0.09],
zoom: 13,
});
const panControl = L.control.pan({position: 'topright'});
map.addControl(panControl);
示例10:
import * as L from 'leaflet';
import 'leaflet.locatecontrol';
const map = L.map('map', {
center: [51.505, -0.09],
zoom: 13
});
// Defaults
L.control.locate().addTo(map);
// Simple
const lc = L.control.locate({
position: 'topright',
strings: {
title: "Show me where I am, yo!"
}
}).addTo(map);
// Locate Options
map.addControl(L.control.locate({
locateOptions: {
maxZoom: 10,
enableHighAccuracy: true
}}));