Leaflet文档阅读笔记-Zoom levels笔记
生活随笔
收集整理的這篇文章主要介紹了
Leaflet文档阅读笔记-Zoom levels笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
?
官方解析
博主例子
?
官方解析
把地圖放縮鎖定到0級
var map = L.map('map', {minZoom: 0,maxZoom: 0 });var cartodbAttribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution">CARTO</a>';var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {attribution: cartodbAttribution }).addTo(map);map.setView([0, 0], 0);下面這個是從視角從地圖中某個點移動到另外一個效果（有點animation，但官方說flyTo是smooth animation）
L.control.scale().addTo(map);setInterval(function(){map.setView([0, 0]);setTimeout(function(){map.setView([60, 0]);}, 2000); }, 4000);L.Control.Scale當處于高層級的時候，這種移動是不明顯的。
- setView(center, zoom), 設置地圖中心；
- flyTo(center, zoom),滑動移動，效果其實和setView差不多；
- zoomIn()?/?zoomIn(delta), 增加層級（地圖會被放大，默認值為1）；
- zoomOut()?/?zoomOut(delta), 減少層級（地圖會被縮小，默認值為1）；
- setZoomAround(fixedPoint, zoom), 保持像素不變，設置一個層級；
- fitBounds(bounds), 自適應地圖大小。
?
下面是自定義縮放策略
var map = L.map('map', {zoomSnap: 0.25 });?
博主例子
這里提供了使用setInterval結合setZoom、flyTo、setView的地圖效果
效果還是可以的，先來個靜態圖！
源碼如下：
<!DOCTYPE html> <html> <head><title>Test7</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /><link rel="stylesheet" href="leaflet.css" /><script src="leaflet.js"></script> <script src="leaflet-tilelayer-wmts-src.js"></script><script src="echarts.js"></script><style>html, body {height: 100%;margin: 0;}#map {width: 100%;height: 100%;}.chart{width: 600px;height: 300px;background-color: #fff;}</style></head> <body> <div id='map'></div> <script type="text/javascript">var ign = new L.TileLayer.WMTS( "http:// XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" ,{layer: 'GG_9:gg_9',tilematrixset: "EPSG:900913",Format : 'image/png',TileMatrix: 'EPSG:900913:8'});var map = L.map('map', {minZoom: 4,maxZoom: 8}).setView([32, 118], 7);var popup = L.popup();function onMapClick(e) {popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(map);}map.on('click', onMapClick);L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);map.addLayer(ign);map.invalidateSize(true);L.control.scale().addTo(map);//添加的數據/*setInterval(function(){map.setView([32, 118]);setTimeout(function(){map.setView([39.9, 116.4]);}, 3000)}, 2000);*//*setInterval(function(){map.setZoom(7);setTimeout(function(){map.setZoom(4);}, 2000);}, 1000);*///使用flyTosetInterval(function(){map.flyTo([32, 118]);setTimeout(function(){map.flyTo([39.9, 116.4]);}, 3000)}, 2000);//添加的數據</script></body> </html>?
總結
以上是生活随笔為你收集整理的Leaflet文档阅读笔记-Zoom levels笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet文档阅读笔记-Marker
- 下一篇： Qt工作笔记-qmake和uic（对Qt