vue 引入腾讯地图实现多边形绘制功能

效果图

新增/编辑单个/多个区域点
查看某个城市或区内的所有区域点

全局JS配置

Main.js

Vue.prototype.$TMap_Key = 'xxxxxxxx' // 腾讯地图Key

TMap.js

export function TMap(key) {
   
  return new Promise((resolve, reject) => {
   
    window.init = function() {
   
      resolve(qq)
    }
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://map.qq.com/api/js?v=2.exp&callback=init&key=" + key;
    script.onerror = reject;
    document.head.appendChild(script)
  })
}

export function TMapGL(key) {
   
  return new Promise((resolve, reject) => {
   
    window.initTMapGL = () => resolve()
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://map.qq.com/api/gljs?v=1.exp&libraries=tools&callback=initTMapGL&key=" + key;
    document.body.appendChild(script)
    script.onerror = reject;
  })
}

地图组件HTML

<template>
  <div class="map" :style="`height:${height}px;`">
    
    <div id="container" ref="map">div>
    <div class="tool-box" v-if="model !== 'show'">
      
      <el-row type="flex" justify="space-around">
        <el-button round size="small" class="tool-item" label="polygon" @click="typeChange('polygon')"
          :type="activeType === 'polygon' ? 'primary' : ''">绘制多边形el-button>
        
      el-row>
      
      <el-row type="flex" justify="space-around" class="tips-btn-box">
        <el-button round size="small" type="danger" v-if="ifEditModel" @click="deleteSelect">删除图形el-button>
        <el-button round size="small" type="danger" v-else @click="deleteSelect">删除选中图形el-button>
        <el-button round size="small" type="info" @click="showTips">绘图提示el-button>
      el-row>
    div>
   	
    <el-dialog title="分配人员" :visible.sync="assignPersonnelDialog" width="30%" center @close="clearAssignPersonnel">
      {
  { assignPersonnelName }}
    el-dialog>
  div>
template>

地图组件js

<script>
import {
    TMapGL } from "@/utils/TMap"; // 引入TMap.js中的TMapGL 
import {
    getPushCardShowListByPciId } from "@/api/UrbanIntegration/personnelManage"; // 获取某个区域内人员数据接口
export default {
   
  data() {
   
    return {
   
      map: {
   }, // 地图
      editor: null, // 编辑器
      markerLayer: {
   }, // 标记图层
      labelLayer: {
   }, // 文本标记图层
      drawCache: [], // 绘制图形缓存
      graphIds: [], // 当前 查看模式的图形数组
      polygon: [], // 查看模式图形显示
      activeType: "", // 当前选中工具的类型 就是当前工具的id
      center: "",
      assignPersonnelName: "",
      assignPersonnelInfo: [],
      assignPersonnelDialog: false
    };
  },
  props: {
   
    // 地图高度
    height: {
   
      type: Number,
      default: 400,
    },
    // 坐标
    positions: {
   
      type