电子围栏 天地图 vue

image.png

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>