image.png
1.先需要在index.html引入天地图的js
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文件
开始绘制
重绘
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()
}
}
}
.mapDiv{
width: 100%;
height: 85vh;
}
