vue3 +leaflet + 天地图

Posted 2023-05-20 高山仰行，景行行止

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\')
  )

leaflet怎么加载天地图的wmts服务

参考技术A Web地图服务（WMS）：利用具有地理空间位置信息的数据制作地图，其中将地图定义为地理数据可视的表现，地图本身并不是数据。地图通常以图像格式表达，例如PNG,GIF或是JPEG，有时候也表达为基于矢量图形，如可缩放矢量图形（SVG）或是网络电脑图形元文件等格式（WebCGM）。根据OGC规范，地图服务是专门提供共享地图数据的服务，负责根据客户程序的请求，提供地图图像、指定坐标点的要素信息、以及地图服务的功能说明信息。
WMS规范定义了三个接口（操作）：GetCapabilities（获取服务能力）, GetMap（获取地图）和GetFeatureInfo（获取对象信息）。其中GetMap为核心操作。GetCapabitities返回服务级元数据，它是对服务信息内容和要求参数的一种描述；GetMap返回一个地图影像，其地理空间参考和大小参数是明确定义了的；GetFeatureInfo（可选）返回显示在地图上的某些特殊要素的信息。这个规范还定义了一个用于调用上述操作的万维网统一资源定位器（URL）语法和服务级元数据的XML（可扩展标记语言）表达法。本回答被提问者采纳