vue3 +leaflet + 天地图

vue3使用leaflet

npm install leaflet -D

如果使用了ts

npm i --save-dev @types/leaflet  // 使用了ts需要下载声明类型

// 更具需要获取不通过类型的url
function getUrl(type:string) {
  interface MyObject {
    [key: string]: Array<string>; 
  }
  let obj:MyObject = {
    'vec_c':['vec_c','vec'],
    'cva_c':['cva_c','cva'],
    'img_c':['img_c','img'],
  }
  const key = '7dc37****************0052dfe0'
  const num = Math.floor(Math.random() * 8); 
  return `http://t${num}.tianditu.com/${obj[type][0]}/wmts?layer=${obj[type][1]}&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=${key}`
}

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
export function loadBaseMap( id: string, center: [number, number] = [29.18404688, 119.70671163],satellite:boolean = true) {
  let map = null
  //影像地图
  let type = satellite ? 'img_c' : 'vec_c'
  let osm = L.tileLayer(getUrl(type), {
    maxZoom: 20,
    tileSize: 256,
    zoomOffset: 1,
  }),cities = L.tileLayer(getUrl('cva_c'), {
    maxZoom: 20,
    tileSize: 256,
    zoomOffset: 1,
  }),ibo_c = L.tileLayer(getUrl('ibo_c'), {
    maxZoom: 20,
    tileSize: 256,
    zoomOffset: 1,
  })
  map = L.map(id, {
    zoomControl: false, //不显示缩放小控件
    minZoom: 3,
    maxZoom: 17,
    center: center,
    zoom: 14,
    layers: [ osm,cities,ibo_c],// 初始化底图
    attributionControl: false,
    crs: L.CRS.EPSG4326,
  })
  map.on('click', (e) => {
    console.log(e.latlng, 'e')
  })
}