Vue 프로젝트는 Tiandi 맵을 사용합니다.

1. 소개

공식 문서:

천지 지도 API

먼저 Tianmap으로 이동하여 등록을 신청한 다음 토큰을 받으세요.

그런 다음 프로젝트의 public/index.html 파일에서 Tiantu 지도가 제공하는 공식 스크립트를 가져옵니다.

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

2. 사용

Tiandi map의 공식 사용 방법에 따르면 Vue 프로젝트에서 사용할 때 오류를 직접 보고합니다. 창문.

1. 맵 초기화

여기서 프로젝트에 utils/mapinit.js 파일인 mapinit.js를 생성했고 내용은 다음과 같습니다.

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

2. 페이지

<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>