效果图
新增/编辑单个/多个区域点
查看某个城市或区内的所有区域点
全局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