Vue中使用天地图

Vue 中使用天地图

天地图使用

• 到天地图官网(https://www.tianditu.gov.cn/)注册一个账号

• 进入天地图的控制台(https://console.tianditu.gov.cn/api/key)，申请一个key

• 在 vue 的页面代码中进行使用

• 代码：

  <template>
  <div>
      <div id="map"></div>
  </div>
  </template>
  
  <script>
  export default {
  name: 'Tiamditu',
  data () {
      return {
      map: {},
      inputLocation: ''
      }
  },
  mounted () {
      this.loadTDTjsOnCurrentPage()
      this.initTDT()
      this.initMap(107.199167, 34.373333, 16)
      this.loadMapTypeControl()
      this.loadZoomControl()
      this.loadScaleControl()
      this.loadOverviewMapControl()
  },
  methods: {
      /**
       * 只在当前页面中引入天地图JS
       */
      loadTDTjsOnCurrentPage () {
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=950317887aad3940b03bd591c0db8db9'
      document.body.appendChild(script)
      },
      /**
       * 初始化天地图对象
       */
      initTDT () {
      new Promise((resolve, reject) => {
          if (window.T) {
          console.log('天地图初始化成功...')
          resolve(window.T)
          reject('error')
          }
      }).then(T => {
          window.T = T
      })
      },
      /**
       * 初始化地图
       * @param {*} lng 经度
       * @param {*} lat 纬度
       * @param {*} zoom 缩放比例(1~18)
       */
      initMap (lng, lat, zoom) {
      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=950317887aad3940b03bd591c0db8db9';
      let lay = new window.T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
      let config = { layers: [lay] };
      // 地图实例
      this.map = new window.T.Map('map', config);
      this.map.centerAndZoom(new window.T.LngLat(lng, lat), zoom);
      },
      /**
       * 加载地图比例尺控件
       */
      loadMapTypeControl () {
      // 初始化地图类型选择控件
      let ctrlMapType = new window.T.Control.MapType({
          mapTypes: [{
          'title': '地图',
          'icon': 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png',
          'layer': window.TMAP_NORMAL_MAP
          }, {
          'title': '卫星',
          'icon': 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
          'layer': window.TMAP_SATELLITE_MAP
          }, {
          'title': '卫星混合',
          'http': 'api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
          'layer': window.TMAP_HYBRID_MAP
          }, {
          'title': '地形',
          'icon': 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png',
          'layer': window.TMAP_TERRAIN_MAP
          }, {
          'title': '地形混合',
          'icon': 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png',
          'layer': window.TMAP_TERRAIN_HYBRID_MAP
          }]
      });
      // 添加地图类型选择控件
      this.map.addControl(ctrlMapType);
      // 设置地图位地星混合图层
      this.map.setMapType(window.TMAP_HYBRID_MAP);
      },
      /**
       * 加载地图缩放控件
       */
      loadZoomControl () {
      // 初始化地图缩放控件
      let ctrlZoom = new window.T.Control.Zoom({ position: window.T_ANCHOR_BOTTOM_LEFT });
      // 添加地图缩放控件
      this.map.addControl(ctrlZoom);
      },
      /**
       * 加载地图比例尺控件
       */
      loadScaleControl () {
      // 初始化地图比例尺控件
      let ctrlScale = new window.T.Control.Scale({ position: window.T_ANCHOR_TOP_LEFT });
      // 添加地图比例尺控件
      this.map.addControl(ctrlScale);
      },
      /**
       * 加载鹰眼地图控件
       */
      loadOverviewMapControl () {
      // 初始化鹰眼地图控件
      let ctrlOverviewMap = new window.T.Control.OverviewMap({ anchor: window.T_ANCHOR_BOTTOM_RIGH, size: new T.Point(300, 300), isOpen: true });
      // 添加鹰眼地图控件
      this.map.addControl(ctrlOverviewMap);
      },
  }
  }
  </script>
  
  <style>
  #map {
  width: 100%;
  height: 1000px;
  }
  </style>
  

• 效果图：