vue项目开发中，客户要使用天地图开发，并且要卫星图，这里记录一下卫星图的实现代码。

官方示例

官方示例

html引入api

<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=你的key"></script>

vue代码

<template>
  <div id="mapDiv" class="tianditu"></div>
</template>

<script>
export default {
  name: 'TiandituMap',
  data() {
    return {
      map: null,
      zoom: 16,
      center: [116.40769, 39.89945]
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      // 初始化地图对象
      this.map = new T.Map('mapDiv')

      // 设置显示地图的中心点和级别
      this.map.centerAndZoom(new T.LngLat(...this.center), this.zoom)

      // 允许鼠标滚轮缩放地图
      this.map.enableScrollWheelZoom()

      // 添加自定义图层
      this.addCustomLayer()
    },

    addCustomLayer() {
      const imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥"

      // 创建自定义图层对象
      const customLayer = new T.TileLayer(imageURL, {
        minZoom: 1,
        maxZoom: 18
      })

      // 将图层添加到地图
      this.map.addLayer(customLayer)
    }
  },
  beforeDestroy() {
    // 组件销毁时清除地图实例
    if (this.map) {
      this.map = null
    }
  }
}
</script>

<style scoped>
.tianditu {
  width: 100%;
  height: 100%;
  position: fixed;
}
</style>