一、安装leaflet依赖包
1、终端执行 pnpm i leaflet
安装成功后package.json中会增加leaflet
2、全局引入leaflet
在main.js中引入leaflet
注意:同时需要引入leaflet.css文件
3、挂载至vue实例
将leaflet挂载到vue实例上,同时需要配置leaflet.icon
二、实现leaflet加载地图
1、地图组件引入leaflet
2、创建地图容器
3、初始化地图对象
L.map("map", {
crs: L.CRS.EPSG4326,
center: [34.26, 108.96],
zoom: 4,
maxZoom: 18, //最大缩放层级
minZoom: 1, //最小缩放层级
tileSize: 256, //切片大小
attributionControl: false, // 移除右下角leaflet标识
zoomControl: false, //禁用 + - 按钮
maxBounds: bounds, //设置边界
preferCanvas: true, //默认使用svg渲染,设置canvas渲染
doubleClickZoom: false, //关闭双击缩放
// dragging: false, //鼠标移动事件
});
}
4、定义天地图图层
// 影像图
const img = L.tileLayer(
"http://t0.tianditu.gov.cn/img_c/wmts?tk=‘自己申请的天地图token’&layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",
{
crossOrigin: "anonymous",
tileSize: 256,
zoomOffset: 1,
noWrap: true,
}
);
// 影像注记
const cia = L.tileLayer(
"http://t0.tianditu.gov.cn/cia_c/wmts?tk=自己申请的天地图token&layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",
{
crossOrigin: "anonymous",
tileSize: 256,
zoomOffset: 1,
noWrap: true,
}
);
// 矢量图
const vec = L.tileLayer(
"http://t0.tianditu.gov.cn/vec_c/wmts?tk=自己申请的天地图token&layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",
{
crossOrigin: "anonymous",
tileSize: 256,
zoomOffset: 1,
noWrap: true,
}
);
// 矢量注记
const cva = L.tileLayer(
"http://t0.tianditu.gov.cn/cva_c/wmts?tk=自己申请的天地图token&layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",
{
crossOrigin: "anonymous",
tileSize: 256,
zoomOffset: 1,
noWrap: true,
}
);
5、图层控制切换影像矢量图层
const vector = L.layerGroup([vec, cva]);
const image = L.layerGroup([img, cia]);
const baseLayers = {
矢量: vector,
影像: image,
};
// 初始化显示矢量图层
this.map.addLayer(vector);
// 添加图层控件;
L.control.layers(baseLayers).addTo(this.map);