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

news2024/11/21 0:37:59

初识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-option
  map = 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#tilelayer
    maxZoom: 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]);
};