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

一只小柚叽

已于 2022-07-28 09:42:35 修改

阅读量2.8k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-07-27 16:26:02 首次发布

本文链接：https://blog.csdn.net/Kamikorosu/article/details/125521148

版权

本文介绍如何在Vue项目中结合腾讯地图，实现多边形绘制功能。包括效果图展示，全局JS配置，地图组件的HTML结构和JavaScript实现，以及新增/编辑单个或多个区域点的功能。

摘要由CSDN通过智能技术生成

效果图

新增/编辑单个/多个区域点新建/编辑打卡点
查看某个城市或区内的所有区域点
在这里插入图片描述

全局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-button round size="small" class="tool-item" label="circle" @click="typeChange('circle')" :type="activeType === 'circle' ? '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