天地图项目1——初始化地图

一、天地图简介

天地图作为国家测绘地理信息局建设的地理信息综合服务网站，集成了来自国家、省、市（县）各级测绘地理信息部门，以及相关政府部门、企事业单位 、社会团体、公众的地理信息公共服务资源，向各类用户提供权威、标准、统一的在线地理信息综合服务。

二、申请天地图服务

首先登陆 -> 注册，进入首页中的开发资源页面：

进入后，点击通知可以申请天地图的token，申请完成后可以在控制台找到自己账户的密钥：


点击“设置”，可以勾选自己所需要的api服务：

至此天地图服务申请结束。

三、天地图初始化

由于项目开发是基于vue的，所以天地图展示通过vue模板，导入地图的js文件进行加载。

1. 地图js文件

// map.js文件
// 导入ImageOverlay的js
function ImageOverlayJS() {
  const s = document.createElement('script')
  s.type = 'text/javascript'
  s.src = 'http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.js'
  return s
}
// 地图的初始化
async function initMap(mapLabel) {
  // 先计算地图中心点
  // 地图中心点代码根据自己的业务需求添加代码
  const centerPoint = await getCenterPoint()
  // 初始化地图对象
  var config = {
    projection: 'EPSG:900913',
    minZoom: MIN_ZOOM,
    maxZoom: MAX_ZOOM
  }
  var polygonToolConfig = {
    showLabel: true,
    color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
  }
  const map = new window.T.Map(mapLabel, config)
   // 创建标注工具对象
  const polygonTool = new window.T.PolygonTool(map, polygonToolConfig)
  // 添加标注工具对象到map实例中
  map.polygonTool = polygonTool
  // 创建自定义图层对象(卫星影像图)
  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=' + MAP_TOKEN
  const lay = new window.T.TileLayer(imageURL)
  map.addLayer(lay)
  map.centerAndZoom(new window.T.LngLat(centerPoint.lng, centerPoint.lat), centerPoint.zoom)
  // 地图相关属性配置，可以参考天地图的官方文档进行配置
  initMapSimpleAttr(map)
  map.addContextMenu(initPopMenu())
  // 禁用双击放大地图
  map.disableDoubleClickZoom()
  return map
}

2. 在调用地图的页面上，在mounted上挂载地图实例对象：

<template>
  <div id="mapDiv">
    ...
  </div>
</template>

<script>
import mapAPI from '@/utils/map'
async mounted() {
    document.body.appendChild(mapAPI.ImageOverlayJS())
    try {
      // 加载地图js文件
      // 这里的mapDiv为div容器的id
      this.map = await mapAPI.initMap('mapDiv')
    } catch(error) { error }
</script>

至此，天地图初始化基本完成。