Leaflet系列——【一】初识Leaflet与Leaflet视图操作

本文主要是介绍Leaflet系列——【一】初识Leaflet与Leaflet视图操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

初识Leaflet（vue3 ）

前言：当你熟悉了openlayer、mapbox、cesium等一些GIS框架之后，对于我们开发来说其实他们的本质就是往瓦片上面叠加图层、【点、线、面、瓦片、geoJson、热力图、图片、svg等等】都是一层层的Layer图层，基本上大差不差，然后这个Leaflet系列我也就基本上照着前面OL的风格写了
OpenLayer 请移步到这

安装依赖

npm i leaflet

1、初始化地图

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';onMounted(() => {initMap()
});
let map = null;function initMap() {// 这里控制的经纬度，纬度在前，经度在后// 地图options配置可见 https://leafletjs.cn/reference.html#map-optionmap = L.map('map',{}).setView([23, 129], 5);const sourceUrl = 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png';const targetUrl = 'http://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade_Dark/MapServer/tile/{z}/{y}/{x}.png';// 添加一个地图瓦片图层（也可以使用img图像，地图就有会用img展示）const tileLayer = L.tileLayer(sourceUrl, {// 关于options配置可见 https://leafletjs.cn/reference.html#tilelayermaxZoom: 18,minZoom: 2,// 版权文字attribution: '© modify'});tileLayer.addTo(map);
}

2、更换瓦片

在leaflet当中可以在初始化地图得到的一个layer（图层）给这个图层重新设置一个瓦片url，完成瓦片切换效果

 // tileLayer methods  这里简单实现，直接五秒后执行这里的代码setTimeout(() => {// 重新设置瓦片 --->  更改瓦片tileLayer.setUrl(targetUrl);}, 5000);

3、层级切换

和初始化地图是一样的，重新通过setView重新设置即可

 map.setView([23, 129], 6);

4、区域定位

通过L.map('map')实例的fitBounds方法直接进行定位

  const bounds = [[24.5, 125.7], [26.1, 126.8]];map.fitBounds(bounds);

5、地图状态修改

其中3和4都是修改地图的状态，其中还包括一些修改最大最小层级、缩放、平移、平滑等。
移步 —> 修改地图状态

下面的代码也简单都实现一下，仅供参考

const changeMap = () => {// map.setView([43, 124], 4);// map.setZoom(6);// map.zoomIn(7);// map.zoomOut(5);// map.setZoomAround([23, 120]);
};

这篇关于Leaflet系列——【一】初识Leaflet与Leaflet视图操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---