1.先需要在index.html引入天地图的js
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=xxxxx"></script>
2.初始化天地图
// tMap.js
export default {
init () {
return new Promise((resolve, reject) => {
// debugger
// 如果已加载直接返回
// 如果已加载直接返回
if (typeof window.T !== 'undefined') {
console.log('地图脚本初始化成功1111...')
resolve(window.T)
return true
}
window.onload = function() {
console.log('地图脚本初始化成功...')
// eslint-disable-next-line
resolve(window.T)
}
})
}
}
3.vue文件引入天地图
// vue文件
<template>
<div>
<a-button type="primary" @click="drawPolygon">开始绘制</a-button>
<a-button type="primary" @click="drawPolygon">重绘</a-button>
<div id="mapDiv" class="mapDiv" ref="mapDiv"></div>
</div>
</template>
<script>
import TMap from '@/utils/tMap'
export default {
data() {
return {
map: null
}
},
mounted() {
this.init()
},
methods: {
init () {
this.map = new T.Map('mapDiv')
this.map.centerAndZoom(new T.LngLat(116.40969, 39.89945), 12)
},
drawPolygon () {
const PolygonOptions = {
color: '#f00',
opacity: '0.2',
fillColor: '#00f',
fillOpacity: '0.2'
}
const PolygonTool = new T.PolygonTool(this.map, PolygonOptions)
this.map.clearOverLays()
PolygonTool.open()
//绑定draw事件 用户双击完成一次折线绘制时触发事件。
PolygonTool.addEventListener('draw', this.getPoints)
},
getPoints (e) {
console.log(e)
},
removeOverlay () {
this.map.clearOverLays()
}
}
}
</script>
<style scoped>
.mapDiv{
width: 100%;
height: 85vh;
}
</style>