admin管理员组文章数量:1530842
1.首先需要引入腾讯地图的JavaScript API库。可以通过CDN或者本地文件引入。在index.html中引入
<script charset="utf-8" src="https://map.qq/api/gljs?libraries=tools&v=1.exp&key=YOUR_KEY"></script>
其中YOUR_KEY
为你自己申请的腾讯地图开发密钥。
2.创建一个容器元素来显示地图。可以在Vue组件的模板中添加一个div元素,并设置id属性
<template>
<div id="mapContainer" style="width: 1400px; height: 800px"></div>
</template>
这里将地图容器大小设定为1400x800像素。
3.初始化地图对象,并调用相关API绘制几何图形,并在生命周期函数中调用
data() {
return {
activeId: "polygon", // 初始化默认值
editor: "",
map: null,
totals: [],
};
},
mounted() {
this.$nextTick(() => {
this.initMap();
});
},
initMap() {
this.map = new TMap.Map(document.getElementById("mapContainer"), {
zoom: 14, // 设置地图缩放级别
center: new TMap.LatLng(30.656964, 104.066186), // 设置地图中心点坐标
});
var polygon = new TMap.MultiPolygon({
map: this.map,
});
this.editor = new TMap.tools.GeometryEditor({
// TMap.tools.GeometryEditor 文档地址:https://lbs.qq/webApi/javascriptGL/glDoc/glDocEditor
map: this.map, // 编辑器绑定的地图对象
overlayList: [
// 可编辑图层 文档地址:https://lbs.qq/webApi/javascriptGL/glDoc/glDocEditor#4
{
overlay: polygon,
id: "polygon",
},
],
actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
activeOverlayId: this.activeId, // 激活图层
snappable: true, // 开启吸附
});
// 监听绘制结束事件,获取绘制几何图形
this.editor.on("draw_complete", (geometry) => {
console.log('所有顶点坐标集合', geometry);
// 多边形处理
if (this.activeId === "polygon") {
console.log("得到顶点经纬度的数组", geometry.paths);
}
});
},
使用说明:
绘制:鼠标左键点击及移动即可绘制图形
结束绘制:鼠标左键双击即可结束多边形、折线会自动闭合(圆形、矩形、椭圆单击即可结束)
中断:绘制过程中按下esc键可中断该过程
提示:
我这里只做了绘制多边形,其余的折线、圆形、矩形、椭圆,按照官网文档添加即可
版权声明:本文标题:vue调用腾讯地图绘制几何图形 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1726065702a1053995.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论