一、天地图简介
天地图作为国家测绘地理信息局建设的地理信息综合服务网站,集成了来自国家、省、市(县)各级测绘地理信息部门,以及相关政府部门、企事业单位 、社会团体、公众的地理信息公共服务资源,向各类用户提供权威、标准、统一的在线地理信息综合服务。
二、申请天地图服务
首先登陆 -> 注册,进入首页中的开发资源页面:
进入后,点击通知可以申请天地图的token,申请完成后可以在控制台找到自己账户的密钥:
点击“设置”,可以勾选自己所需要的api服务:
至此天地图服务申请结束。
三、天地图初始化
由于项目开发是基于vue的,所以天地图展示通过vue模板,导入地图的js文件进行加载。
- 地图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
}
- 在调用地图的页面上,在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>
至此,天地图初始化基本完成。