目录
废话少说,直接开始。
一、创建项目
我这里演示vue3。
# 创建vue项目
yarn create vite
创建完毕就可以使用啦~
二、引入
在index.html中引入下面代码:
<script src="https://map.qq.com/api/gljs?v=1.exp&key=你的密钥&libraries=tools"></script>
三、使用
直接上代码
# html
<template>
<div style="position: relative;">
<div id="map_view"></div>
<div id="edit_view">
<button @click.stop="handleEdit">编辑</button>
<button @click.stop="handleAdd">绘制</button>
<button @click.stop="handleMerge">合并</button>
<button @click.stop="handleSplit">拆分</button>
</div>
</div>
</template>
<style scoped>
#map_view {
width: 100%;
height: 100vh;
overflow: hidden;
}
#edit_view {
display: flex;
}
</style>
script单独来:
1.创建地图实例
由于用的是语法糖,所以在setup中无法获取到dom。所以引入onMounted,在这里面使用。
import { onMounted } from 'vue';
var map, editor
onMounted(() => {
// 创建地图实例
map = new TMap.Map(document.getElementById('map_view'), {
zoom: 17, // 设置地图缩放级别
center: new TMap.LatLng(40.04019000341765, 116.27446815226199)
})
})
2.实例化编辑模块
onMounted(() => {
editor = new TMap.tools.GeometryEditor({
map,
// 可编辑图层
overlayList: [
{
id: 'polygon1', // 随便给的
selectedStyleId: 'highlight',
overlay: new TMap.MultiPolygon({
map,
// 样式
styles: {
highlight: new TMap.PolygonStyle({
color: 'rgba(255, 255, 0, 0.6)'
})
}
})
}
],
actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, //编辑器的工作模式 DRAW INTERACT
snappable: true, // 开启邻近吸附
selectable: true,// 开启点选功能
activeOverlayId: 'polygon1', // 激活图层
})
// 开始监听几何图形
editor.on('draw_complete', geometry => {
console.log(geometry)
})
// 监听删除、修改、拆分、合并完成事件
let evtList = ['delete', 'adjust', 'split', 'union'];
evtList.forEach(evtName => {
editor.on(evtName + '_complete', evtResult => {
console.log(evtName, evtResult);
});
});
// 监听拆分失败事件,获取拆分失败原因
editor.on('split_fail', (res) => {
alert(res.message);
});
// 监听合并失败事件,获取合并失败原因
editor.on('union_fail', (res) => {
alert(res.message);
});
})
3.添加功能
/**
* @function 开始绘制地图
*/
const handleAdd = () => {
// 指定图层处于编辑状态
// editor.setActiveOverlay("polygon1");
editor.setActionMode(2)
}
/**
* @function 编辑地图
*/
const handleEdit = () => {
// 指定图层处于操作状态
editor.setActionMode(1)
}
/**
* @function 地图合并
*/
const handleMerge = () => {
editor.union()
}
/**
* @function 拆分地图
*/
const handleSplit = () => {
editor.split()
}
4.设置初始点并操作
如果需要加载一个初始点位,那么可以预先创建出这个点:
const firstPaths = [
new TMap.LatLng(40.04051164600918, 116.27488518619089), //(纬度,经度)
new TMap.LatLng(40.040943635857445, 116.27804611629756),
new TMap.LatLng(40.03951759379146, 116.2783762087081),
new TMap.LatLng(40.03891287066983, 116.2752049655744)
]
然后再可编辑图层中放入即可。
overlayList: [
{
overlay: new TMap.MultiPolygon({
geometries: [
{
id: 'hhhh',// 随意给的
paths: firstPaths
}
]
}),
},
5.判断点位是否在区域内
自己看:
https://lbs.qq.com/webDemoCenter/glAPI/glComputeLib/isPointInPolygon
四、完整代码
<template>
<div style="position: relative;">
<div id="map_view"></div>
<div id="edit_view">
<button @click.stop="handleEdit">编辑</button>
<button @click.stop="handleAdd">绘制</button>
<button @click.stop="handleMerge">合并</button>
<button @click.stop="handleSplit">拆分</button>
</div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
var map, editor
/**
* @function 开始绘制地图
*/
const handleAdd = () => {
// 指定图层处于编辑状态
editor.setActiveOverlay("polygon1");
editor.setActionMode(2)
}
/**
* @function 编辑地图
*/
const handleEdit = () => {
// 指定图层处于操作状态
editor.setActionMode(1)
}
/**
* @function 地图合并
*/
const handleMerge = () => {
editor.union()
}
/**
* @function 拆分地图
*/
const handleSplit = () => {
editor.split()
}
onMounted(() => {
// 创建地图实例
map = new TMap.Map(document.getElementById('map_view'), {
zoom: 17, // 设置地图缩放级别
center: new TMap.LatLng(40.04019000341765, 116.27446815226199)
})
// 加载一个初始化的图层
const firstPaths = [
new TMap.LatLng(40.04051164600918, 116.27488518619089),
new TMap.LatLng(40.040943635857445, 116.27804611629756),
new TMap.LatLng(40.03951759379146, 116.2783762087081),
new TMap.LatLng(40.03891287066983, 116.2752049655744)
]
editor = new TMap.tools.GeometryEditor({
map,
// 可编辑图层
overlayList: [
{
id: 'polygon1',
selectedStyleId: 'highlight',
overlay: new TMap.MultiPolygon({
map,
// 样式
styles: {
highlight: new TMap.PolygonStyle({
color: 'rgba(255, 255, 0, 0.6)'
})
},
geometries: [
{
id: 'hhhh',
paths: firstPaths
}
]
}),
},
],
actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, //编辑器的工作模式 DRAW INTERACT
snappable: true, // 开启邻近吸附
selectable: true,// 开启点选功能
activeOverlayId: 'polygon1', // 激活图层
})
// 开始监听几何图形
editor.on('draw_complete', geometry => {
console.log(geometry)
})
// 监听删除、修改、拆分、合并完成事件
let evtList = ['delete', 'adjust', 'split', 'union'];
evtList.forEach(evtName => {
editor.on(evtName + '_complete', evtResult => {
console.log(evtName, evtResult);
});
});
// 监听拆分失败事件,获取拆分失败原因
editor.on('split_fail', (res) => {
alert(res.message);
});
// 监听合并失败事件,获取合并失败原因
editor.on('union_fail', (res) => {
alert(res.message);
});
})
</script>
<style scoped>
#map_view {
width: 100%;
height: 100vh;
overflow: hidden;
}
#edit_view {
display: flex;
}
</style>