可视化开发(2)——leaflet引入天地图瓦片

1.自己练习使用,首先需要去国家地理信息公共服务平台注册账号,在平台注册登录进入地图服务页面申请使用密钥

2.初始化地图容器

<template>
<div id='map'></div>
</template>

<script setup lang="ts">
//...省略中间的

const centerPoint=[lat,lng]//经纬度 定中心点的
const key='' //密钥

let map = L.map('map', {
    //参考坐标系  crs (坐标参考系) EPSG 43626，默认是 EPSG 3857。
    crs: L.CRS.EPSG4326,
    // 中心点
    center: centerPoint,
    //最小显示等级
    minZoom: 1,
    //最大显示等级
    maxZoom: 18,
    //当前显示等级
    zoom: 7,
    //不添加属性说明控件
    attributionControl: false,
    //限制显示地理范围
    maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180))
  })


//方法里面添加天地图,该方法在onMounted里调用即可

const addLayer = () => {
  let mapTypes = ['vec_c', 'cva_c'] //矢量图&标记,需要其他的就看名字代
  let layers = [] //天地图图层
  for (let i = 0, len = mapTypes.length; i < len; i++) {
    let layerUrl = `http://t0.tianditu.gov.cn/DataServer?T=${mapTypes[i]}&x={x}&y={y}&l={z}&tk=${key}`
    let layer = L.tileLayer(layerUrl, {
      zoomOffset: 1,
      noWarp: true
    })
    layers.push(layer)
    
  }
    let layerGroup = L.layerGroup(layers).addTo(map.value)
}
//...
</script >