初識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]);
};
