官方解析

把地图放缩锁定到0级

var map = L.map('map', {minZoom: 0,maxZoom: 0
});var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <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文档阅读笔记-Quick Start Guide笔记
目录网络加载JS和CSS 初始化地图在地图上做标记在地图上点击事件获得坐标个人对这篇文档的体会网络加载JS和CSS 先要加载css,然后在加载js <link rel="st ...
Leaflet文档阅读笔记- Showing video files解析
目录官方解析博主例子官方解析这里,官方首先告诉我们,当<video>这个标签还没出现的时候,在web上展示视频是很艰巨的.现在有了这个标签,只需要如下代码就能在web页面上展示视频 ...
Leaflet文档阅读笔记-Extending Leaflet: Handlers and Controls笔记
目录官方解析博主栗子官方解析 Leaflet 1.0中出现了处理者这个新概念,处理浏览器里的dom事件单击,双击,地图滑动及map状态的改变. 当处理者启动时调用addHooks()函数,未启动 ...
Leaflet文档阅读笔记-Using GeoJSON with Leaflet笔记
目录官方解析博主例子官方解析个人觉得这官方教程给得是相当的好,因为功能非常的强大,在此记录下,方便以后使用,以后肯定会经常用到! 此节将会学到从GeoJson对象中创建且调用map vecto ...
Leaflet文档阅读笔记-Markers With Custom Icons笔记
目录官方解析博主例子官方解析这个内容主要是把自定义图片,放到地图上,并且还可以增加阴影图片,以及点击图片后的弹出事件. 官方是准备了下面这4张图片: 使用下面这种方式可以单独设置,自定义图标 ...
Leaflet文档阅读笔记-Leaflet on Mobile笔记
目录 CSS和HTML改如何设置定位功能 CSS和HTML改如何设置如下的设置: body {padding: 0;margin: 0; } html, body, #map {height: 1 ...
Qt文档阅读笔记-共享库的创建与调用
使用共享库的符号这个符号可以作用在变量.类.函数中,并且这些都可以被调用端使用. 在编译共享库中,需要使用export符号.在使用端调用的时候使用import符号. 这里是本人从文档中记录的笔记,大 ...
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图 QHeightMapSurfaceDataProxy:是Q3DSurface的一个基本代理类. 他是专门加载高度图. 高度图是没有X, ...
Qt文档阅读笔记-Rotations Example相关
Rotations Example文档阅读笔记使用这种方式,对y轴和z轴进行旋转. QQuaternion yRotation = QQuaternion::fromAxisAndAngle(0.0 ...

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

官方解析

博主例子

Leaflet文档阅读笔记-Zoom levels笔记相关推荐

最新文章

热门文章