El proyecto Vue utiliza el mapa Tiandi

1. Presentar

Documentación oficial:

API de mapas de Tiandi

Primero vaya a Tianmap para solicitar el registro y luego obtenga el Token

Luego importe el Script oficial provisto por el mapa Tiantu en el archivo public/index.html del proyecto

 <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的Token"></script>

2. uso

De acuerdo con el método de uso oficial del mapa de Tiandi, si se usa en el proyecto Vue, se informará directamente de un error. Esto se debe a que las funciones y los objetos en el complemento de secuencia de comandos del mapa de Tiandi se montan directamente en el nivel superior. objeto de la ventana.

1. Inicializar el mapa

Aquí creé el archivo utils/mapinit.js mapinit.js en el proyecto y el contenido es el siguiente

// 初始化地图
export default {
  init() {
    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (window.T) {
        console.log('天地图脚本初始化成功...')
        resolve(window.T)
        reject('error')
      }
    })
  },
}

2. Página

<template>
    <div id="mapContent"></div>
</template>

import MapInit from '@/utils/mapinit'
 export default {
    name: 'HomeMap',
    data() {
      return {
        map: null,
        // 地图配置
        lay: null,
      }
    },
    computed: {
      ...mapGetters({
        area: 'zone/area',
      }),
    },
    mounted() {
      this.getMap()
    },
    methods: {
      async getMap() {
        const { data } = await getEquipmentsByAreaId({ areaId: this.area })
        this.deviceList = data.list
        this.mapData = true
        console.log(this.deviceList)
        MapInit.init()
          .then((T) => {
            let 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=你的Token'
            //创建自定义图层对象
            this.lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })
            //初始化地图对象
            this.map = new T.Map('mapContent')
            //设置显示地图的中心点和级别
            this.map.centerAndZoom(new T.LngLat(116.40969, 39.89945),14)
            //创建卫星和路网的混合视图
            this.map.setMapType(window.TMAP_HYBRID_MAP)
            //允许鼠标滚轮缩放地图
            this.map.enableScrollWheelZoom()
          })
          .catch()
      },
    },
  }
</script>

<style scoped>
.mapContent{
    width: 500px;
    height: 500px;
}
</style>