當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Leaflet文档阅读笔记-Zoom levels笔记

發布時間：2025/3/15 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 Leaflet文档阅读笔记-Zoom levels笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

官方解析

博主例子

官方解析

把地圖放縮鎖定到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
下一篇： Spring Boot中的Profile