高德地图JS API AMap.MouseTool绘制

fang在这里插入图片描述

🤖 作者简介：水煮白菜王 ，一位资深前端劝退师 👻
👀 文章专栏： 高德AMap专栏 ，记录一下平时在博客写作中，总结出的一些开发技巧✍。
感谢支持💕💕💕

关联文章：
高德地图JS API 开发——区划浏览DistrictExplorer
高德地图JS API加载行政区边界AMap.Polygon

目录

    • 高德地图JS API AMap.MouseTool绘制
      • 鼠标工具 AMap.MouseTool
      • 运行示例
      • 实现步骤
        • 1.引入JS API加载地图
        • 2.创建MouseTool工具类
        • 3.通过鼠标进行绘制覆盖物
        • 4.获取通过 AMap.MouseTool 绘制的点、线、面覆盖物的位置/范围/路径
        • 5.鼠标工具距离量测、面积量测、拉框放大
        • 全部代码

高德地图JS API AMap.MouseTool绘制

在前期文章谈到过关于高德矢量图形，用于在地图上绘制线、面等矢量地图要素的类型；接下来介绍鼠标工具 MouseTool 绘制，包括绘制线段、多边形、矩形、圆形，这种功能来DIY区域块、设置为围栏划分。

鼠标工具 AMap.MouseTool

new AMap.MouseTool(map: Map)

AMap.MouseTool 插件主要通过用户在地图图面的鼠标操作，绘制相应的点、线、面覆盖物；或者进行图面的距离测量、面积量测、拉框放大、拉框缩小等。。其下的成员主体函数：marker(opts)、circle(opts)、rectangle(opts)、polyline(opts)、polygon(opts)、measureArea(opts)、rule(opts)、rectZoomIn(opts)、rectZoomOut(opts)、及close(ifClear)

成员函数描述参数
marker([opts])开启鼠标画点标注模式。鼠标在地图上单击绘制点标注，标注样式参考MarkerOptions设置opts (MarkerOptions) 可选，参考MarkerOptions设置
circle([opts])开启鼠标画圆模式。鼠标在地图上拖动绘制相应的圆形。圆形样式参考CircleOptions设置opts (CircleOptions) 可选，参考CircleOptions设置
rectangle([opts])开启鼠标画矩形模式。鼠标在地图上拉框即可绘制相应的矩形。矩形样式参考PolygonOptions设置opts (PolygonOptions) 可选，参考PolygonOptions设置
polyline([opts])开启鼠标画折线模式。鼠标在地图上点击绘制折线，鼠标左键双击或右键单击结束绘制，折线样式参考PolylineOptions设置opts (PolylineOptions) 可选，参考PolylineOptions设置
polygon([opts])开启鼠标画多边形模式。鼠标在地图上单击开始绘制多边形，鼠标左键双击或右键单击结束当前多边形的绘制，多边形样式参考PolygonOptions设置opts (PolygonOptions) 可选，参考PolygonOptions设置
measureArea([opts])开启面积量测模式。鼠标在地图上单击绘制量测区域，鼠标左键双击或右键单击结束当前量测操作，并显示本次量测结果。量测面样式参考PolygonOptions设置opts (PolygonOptions) 可选，参考PolygonOptions设置
rule([opts])开启距离量测模式。鼠标在地图上单击绘制量测节点，并计算显示两两节点之间的距离，鼠标左键双击或右键单击结束当前量测操作。量测线样式参考PolylineOptions设置 注：不能同时使用rule方法和RangTool插件进行距离量测opts (PolylineOptions) 可选，参考PolylineOptions设置
rectZoomIn([opts])开启鼠标拉框放大模式。鼠标可在地图上拉框放大地图。矩形框样式参考PolygonOptions设置opts (PolygonOptions) 可选，参考PolygonOptions设置
rectZoomOut([opts])开启鼠标拉框缩小模式。鼠标可在地图上拉框缩小地图。矩形框样式参考PolygonOptions设置opts (PolygonOptions) 可选，参考PolygonOptions设置
close([ifClear])关闭当前鼠标操作。参数arg设为true时，鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象；设为false时，保留所绘制的覆盖物对象。默认为falseifClear (boolean) 可选，是否清除地图上的覆盖物

运行示例

InsCode审核中

实现步骤

1.引入JS API加载地图

加载JS API注意AMap.MouseTool需要引入使用 plugins: ["AMap.MouseTool"]

引入方式看自己项目选择，前期文章可供参考👉 「JS API急救包」

  import AMapLoader from '@amap/amap-jsapi-loader';const initializeMap = async () => {await AMapLoader.load({key: "", // 请替换为您自己的高德地图API Keyversion: "2.0",plugins: ["AMap.MouseTool"] // 引入AMap.MouseTool 插件}).then((AMap) => {map = new AMap.Map('container', {zoom: 14});});};
2.创建MouseTool工具类
      //在地图中添加MouseTool插件mouseTool = new AMap.MouseTool(map);//添加绘制触发事件draw()mouseTool.on('draw', (e) => {overlays.value.push(e.obj);});
3.通过鼠标进行绘制覆盖物
mouseTool.marker({// 在这里配置样式
});

如果想通过鼠标点击，在图面添加自定义样式 Marker 点，只需要在 marker 方法中添加点样式 MarkerOptions。具体配置参考 「点覆盖物」。
线，面的添加方式同上。只要将 marker 方法替换成相应的线 mousetool.polyline(); 或者 面 mousetool.polygon(); 方法即可。

mouseTool.polyline(opts);
mouseTool.polygon(opts);
mouseTool.rectangle(opts);
// 更多...
4.获取通过 AMap.MouseTool 绘制的点、线、面覆盖物的位置/范围/路径

使用鼠标工具绘制的点、折线、多边形、圆形、矩形等覆盖物，都可以通过多边形覆盖物自身的方法，获取到位置/范围/路径。此处以多边形为例，阐述获取相应信息的方式：

    //在地图中添加MouseTool插件var mouseTool = new AMap.MouseTool(map);//用鼠标工具画多边形var drawPolygon = mouseTool.polygon(); //添加事件AMap.event.addListener( mouseTool,'draw',function(e){console.log(e.obj.getPath());//获取路径/范围});
5.鼠标工具距离量测、面积量测、拉框放大

鼠标工具除可以绘制多种覆盖物以外，还可以进行距离量测、面积量测、拉框放大、拉框缩小等操作。

以下以距离量测模式为例介绍。鼠标在地图上单击绘制量测节点，并计算显示两两节点之间的距离，鼠标左键双击或右键单击结束当前量测操作。距离测量方式：

   //在地图中添加MouseTool插件var mouseTool = new AMap.MouseTool(map);//测量mouseTool .rule();

在这里插入图片描述

全部代码
<!-- Vue 3 Code -->
<template><div><div ref="container" id="container"></div><div class="info">操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过点击来绘制</div><div class="input-card"><div class="input-item"><input type="radio" name="func" value="marker" v-model="selectedTool"><span class="input-text">画点</span><input type="radio" name="func" value="polyline" v-model="selectedTool"><span class="input-text">画折线</span><input type="radio" name="func" value="polygon" v-model="selectedTool"><span class="input-text" style="width:5rem;">画多边形</span></div><div class="input-item"><input type="radio" name="func" value="rectangle" v-model="selectedTool"><span class="input-text">画矩形</span><input type="radio" name="func" value="circle" v-model="selectedTool"><span class="input-text">画圆</span><input type="radio" name="func" value="distance" v-model="selectedTool"><span class="input-text">测距</span></div><div class="input-item"><input id="clear" type="button" class="btn" value="清除" @click="clearOverlays" /><input id="close" type="button" class="btn" value="关闭绘图" @click="closeDrawing" /></div></div></div></template><script setup>import { ref, onMounted, onBeforeUnmount, watch } from 'vue';import AMapLoader from '@amap/amap-jsapi-loader';const containerRef = ref(null);const selectedTool = ref('marker');const overlays = ref([]);let map = null;let mouseTool = null;const initializeMap = async () => {await AMapLoader.load({key: "22b379529dd2879095130ee6b2774d36", // 请替换为您自己的高德地图API Keyversion: "2.0",plugins: ["AMap.MouseTool"]}).then((AMap) => {map = new AMap.Map('container', {zoom: 14});mouseTool = new AMap.MouseTool(map);mouseTool.on('draw', (e) => {overlays.value.push(e.obj);});});};const draw = (type) => {switch (type) {case 'marker':mouseTool.marker();break;case 'polyline':mouseTool.polyline({ strokeColor: '#ff33ff', //轮廓线颜色strokeOpacity: 1, //轮廓线透明度strokeWeight: 3, //轮廓线宽度strokeStyle: "solid", //线样式还支持 'dashed'});break;case 'polygon':mouseTool.polygon({ strokeColor: '#3366FF',strokeWeight: 3, });break;case 'rectangle':mouseTool.rectangle({ fillColor: '#87CEFA', // 填充颜色fillOpacity: 0.2, // 填充透明度strokeColor: '#1E90FF',strokeWeight: 3, });break;case 'circle':mouseTool.circle({ fillColor: '#ff3333', strokeColor: '#DC143C',strokeWeight: 3, });break;case 'distance':mouseTool.rule();break;}};const clearOverlays = () => {map.remove(overlays.value);overlays.value = [];};const closeDrawing = () => {mouseTool.close(true);selectedTool.value = '';};watch(selectedTool, (newVal) => {if (newVal) {draw(newVal);}});onMounted(() => {initializeMap();});onBeforeUnmount(() => {if (map) {map.destroy();}});</script><style scoped>// import "../assets/mousetool.css"; 示例原样式https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css#container {height: 100vh;width: 100vw;
}</style>

在这里插入图片描述
如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/144888.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

TPDO触发条件如何满足？

TPDO触发条件如何满足？

在上一期中&#xff0c;我们了解到TPDO&#xff08;传输过程数据对象&#xff09;的传输类型有很多种&#xff1a;同步周期性传输、RTR&#xff08;远程传输请求&#xff09;以及异步制造商特定事件等。这些类型的触发条件主要分为三种&#xff1a;同步&#xff08;SYNC&#x…
阅读更多...
Java 多态（难）

Java 多态（难）

1. 即同一方法可以根据发送对象的不同而采用多种不同的行为方式。 2&#xff0e;一个对象的实际类型是确定的&#xff0c;但可以指向对象的引用的类型有很多。 举例说明&#xff1a;新建两个类&#xff0c;Person类和Student类&#xff0c;Student类继承Person类&#xff1a…
阅读更多...
Xinstall助力App推广，下载自动绑定提升转化率

Xinstall助力App推广，下载自动绑定提升转化率

在App推广和运营的过程中&#xff0c;我们经常会遇到一些痛点。比如&#xff0c;用户下载App后需要手动进行一系列繁琐的操作才能完成注册和绑定&#xff0c;这不仅影响了用户体验&#xff0c;还降低了转化率。那么&#xff0c;有没有一种方法能够简化这个过程&#xff0c;提升…
阅读更多...
VsCode汉化教程（新手教程）

VsCode汉化教程（新手教程）

刚用VsCode的可能不知道怎么汉化&#xff0c;这里出个给新手的教程。 一.下载汉化插件 1.点击左侧边栏中的扩展 2.下载简体中文汉化插件&#xff08;搜索chinese就行&#xff09; 二.切换语言 很多人认为下完成就汉化成功了&#xff0c;实际上需要自己切换&#xff0c;这个插…
阅读更多...
苹果撤诉NSO，竟因惧怕情报泄露？！VMware vCenter惊现高危漏洞!20万台设备遭感染！新型物联网僵尸网络肆虐全球！ | 安全周报0920

苹果撤诉NSO，竟因惧怕情报泄露？！VMware vCenter惊现高危漏洞!20万台设备遭感染！新型物联网僵尸网络肆虐全球！ | 安全周报0920

新闻1&#xff1a;苹果撤诉NSO&#xff0c;竟因惧怕情报泄露&#xff1f;&#xff01; 苹果公司已提交动议&#xff0c;“自愿”撤销对商业间谍软件供应商NSO集团的诉讼&#xff0c;理由是风险形势的转变可能导致关键“威胁情报”信息的暴露。 这一进展最初由《华盛顿邮报》于…
阅读更多...
C++模拟实现list：list、list类的初始化和尾插、list的迭代器的基本实现、list的完整实现、测试、整个list类等的介绍

C++模拟实现list：list、list类的初始化和尾插、list的迭代器的基本实现、list的完整实现、测试、整个list类等的介绍

文章目录 前言一、list二、list类的初始化和尾插三、list的迭代器的基本实现四、list的完整实现五、测试六、整个list类总结 前言 C模拟实现list&#xff1a;list、list类的初始化和尾插、list的迭代器的基本实现、list的完整实现、测试、整个list类等的介绍 一、list list本…
阅读更多...
电脑怎么录屏？超实用免费电脑录屏软件推荐与教程

电脑怎么录屏？超实用免费电脑录屏软件推荐与教程

在数字化时代&#xff0c;电脑录屏已成为我们工作、学习和娱乐中不可或缺的一部分。无论是录制教学视频、游戏直播、会议记录还是软件操作演示&#xff0c;一款好用的录屏软件都能大大提升我们的效率。今天&#xff0c;我们就来介绍五款超实用的电脑录屏软件&#xff0c;并附上…
阅读更多...
【prefect】python任务调度工具 Prefect | 可视化任务工具 | Python自动化的终极武器 | 高效数据管道管理

【prefect】python任务调度工具 Prefect | 可视化任务工具 | Python自动化的终极武器 | 高效数据管道管理

一、产品介绍 1、官方 Github https://github.com/PrefectHQ/prefect 2、官方文档 https://docs.prefect.io/3.0/get-started/index 3、Pgsql说明 正确的python链接pgsql如下&#xff1a; import psycopg2 from sqlalchemy import create_enginedef connect_with_psycopg2(…
阅读更多...
Node.js官网无法正常访问时安装NodeJS的方法

Node.js官网无法正常访问时安装NodeJS的方法

目录 一、使用 nvm 进行安装二、通过阿里云开源镜像站进行安装 一、使用 nvm 进行安装 此时如果直接使用 nvm install 命令进行安装会报错&#xff1a; nvm install 16.14.0Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt. Get “https://nodejs.org/dis…
阅读更多...
对称加密算法使用示例

对称加密算法使用示例

Demo包括以下对称加密算法组合 备注&#xff1a;XTS仅支持AES128和AES256&#xff0c;不支持AES192 from cryptography.hazmat.primitives.ciphers import Cipher, algorithms, modes from cryptography.hazmat.primitives import cmac from cryptography.hazmat.primitives.…
阅读更多...
MFC-基础架构

MFC-基础架构

前言 各位师傅大家好&#xff0c;我是qmx_07&#xff0c;今天讲解MFC的基础架构 概述 介绍&#xff1a;MFC&#xff08;Microsoft Foundation Classes&#xff09;是微软公司提供的一个类库&#xff0c;用于在 Windows 操作系统下进行 C 应用程序开发MFC把Windows SDK API函…
阅读更多...
解决：The play() request was interrupted by a call to pause().报错

解决：The play() request was interrupted by a call to pause().报错

前言&#xff1a; 最近在公司中实现进入页面之后点击单词直接播放音频的时候&#xff0c;发现音频并不会播放声音&#xff0c;并且控制台报错&#xff1a; 研究之后找到了解决方案&#xff0c;与小伙伴们进行分享 原因&#xff1a; 首先看这句话的意思&#xff1a; 在调用 …
阅读更多...
红黑树构建模拟实现

红黑树构建模拟实现

目录 一.红黑树概述 二.红黑树的性质 ​编辑 三.构建红黑树模拟实现 插入新节点情况分析 情况一、cur为红色&#xff0c;parent为红色&#xff0c;grandfather为黑色&#xff0c;uncle存在且为红 情况二、cur为红色&#xff0c;parent为红色&#xff0c;grandfather为黑色…
阅读更多...
VS运行程序时报错--无法定位程序输入点

VS运行程序时报错--无法定位程序输入点

发现问题&#xff1a; VS 在运行程序时&#xff0c;报错&#xff1a; 找到原因&#xff1a; 因为我在替换动态库的时候&#xff0c;只替换了lib库&#xff0c;没有替换运行目录下的dll库&#xff0c;运行时候的dll与程序中的lib库不对应。 替换库后就能解决这个问题。
阅读更多...
PyTorch使用------自动微分模块

PyTorch使用------自动微分模块

目录 &#x1f354; 梯度基本计算 1.1 单标量梯度的计算 1.2 单向量梯度的计算 1.3 多标量梯度计算 1.4 多向量梯度计算 1.5 运行结果&#x1f4af; &#x1f354; 控制梯度计算 2.1 控制不计算梯度 2.2 注意: 累计梯度 2.3 梯度下降优化最优解 2.4 运行结果&#x1…
阅读更多...
dgl库安装

dgl库安装

此篇文章继续上一篇pytorch已经安装成功的情况 &#xff08;python3.9&#xff0c;pytorch2.2.2&#xff0c;cuda11.8&#xff09; 上一篇pytorch安装教学链接 选择与之匹配的版本 输入下方代码进行测试 import dgl.data dataset dgl.data.CoraGraphDataset() print(‘Numb…
阅读更多...
契约锁与您相约2024新疆数字经济创新大会暨新疆数字丝路博览会

契约锁与您相约2024新疆数字经济创新大会暨新疆数字丝路博览会

9月20日&#xff0c;由新疆数字经济联合会主办&#xff0c;多家行业协会及企业共同承办的“2024(第一届)新疆数字经济创新发展大会暨新疆数字丝路博览会”在新疆国际会展中心盛大开幕&#xff0c;活动期间&#xff0c;契约锁作为电子签章行业领先的服务商携数字可信系列产品亮相…
阅读更多...
小程序服务零工市场

小程序服务零工市场

零工市场小程序有着信息发布、岗位匹配、线上接单、零工人员保障险参保、技能培训、费用结算、完工确认、服务评价、纠纷调解等功能&#xff0c;为求职者和雇主搭建一座高效、便捷、精准的对接桥梁。 用工单位通过小程序的“雇主找人”&#xff0c;发布招聘信息&#xff0c;找到…
阅读更多...
本地生活商城开发搭建 同城O2O线上线下推广

本地生活商城开发搭建 同城O2O线上线下推广

同城本地化商城目前如火如荼&#xff0c;不少朋友咨询本地生活同城平台怎么开发&#xff0c;今天商淘云与大家分享同城O2O线上商城的设计和开发。 本地生活商城一般会涉及到区域以及频道类&#xff0c;一般下单需要支持用户定位、商家定位&#xff0c;这样利于用户可以快速找到…
阅读更多...
一文解读OLAP的工具和应用软件

一文解读OLAP的工具和应用软件

OLAP&#xff08;OnlineAnalyticalProcessing&#xff09;是一种用于快速分析大规模、多维度数据的方法。OLAP工具和应用软件则是帮助人们进行OLAP分析的重要工具。本文将介绍几种常见的OLAP工具和应用软件&#xff0c;并探讨它们在数据分析中的作用。 一 OLAP工具的分类 在选…
阅读更多...
最新文章

Copyright @ 2022~2023