《Leaflet 基础知识点》- 地图定位、跳转和缩放

目录

一、setView

二、setZoom、zoomIn 和 zoomOut

三、panTo 和 flyTo

---

L.map 中有多种方法改变地图位置和缩放级别，接下来详细介绍。

一、setView

跳到指定中心点和缩放级数，API 说明如下：

包含 3 个参数，第一个是中心点，第二个是缩放级数，第三个是可选设置(可选)。

示例

// 指定中心点
let center = L.latLng(30.68, 113.98);

// 方式 1：跳到指定中心点，不缩放级数。第二参数说明文档没有说是可选，但我测试可用且不报错
this.map.setView(center); 

// 方式 2：跳到指定中心点，不缩放级数。这里第二个参数使用 map.getZoom() 获取当前缩放级数
this.map.setView(center, this.map.getZoom()); 

// 方式 3：跳到指定中心点和指定的缩放级数
this.map.setView(center, 8); 

二、setZoom、zoomIn 和 zoomOut

3 个关于缩放级数的设置方法，API 说明如下：

1. setZoom：设置指定级数；
2. zoomIn ：放大，第一个可选参数 delta，不设置时默认每次放大 1 个级别，否则根据指定级数放大；
3. zoomOut：缩小，第一个可选参数 delta，不设置时默认每次缩小 1 个级别，否则根据指定级数缩小；

示例

// 缩放到指定级数
this.map.setZoom(8);

// 放大：每次调用默认放大 1 个级数
this.map.zoomIn();
// 放大：每次调用放大 3 个级数
this.map.zoomIn(3);

// 缩小：每次调用默认缩小 1 个级数
this.map.zoomOut();
// 缩小：每次调用缩小 3 个级数
this.map.zoomOut(3);

三、panTo 和 flyTo

1. panTo：平移到指定中心点；
2. flyTo：与 panTo 相比，在平移时，多了一个可设置缩放级数的功能；

API 说明如下：

示例

// 中心点
let center = L.latLng(30.68, 113.98);

// 平移
this.map.panTo(center);

// 平移，与上面的 panTo 功能一样
this.map.flyTo(center);
// 平移，且缩放到指定级数
this.map.flyTo(center, 3);