当前位置: 首页 > news >正文

高德地图,绘制矢量图形并获取经纬度

效果如图
在这里插入图片描述
在这里插入图片描述

我用的是AMapLoader这个地图插件,会省去很多配置的步骤,非常方便
首先下载插件,然后在局部引入

import AMapLoader from "@amap/amap-jsapi-loader";

然后在methods里面使用

  // 打开地图弹窗mapShow() {this.innerVisible = true;this.$nextTick(() => {this.initMap();});},// 初始化高德地图initMap() {AMapLoader.load({key: "你的key", //key值是key值 和安全密钥不同version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: ["AMap.GeoJSON", "AMap.MarkerClusterer", "AMap.MouseTool"], // 需要使用的的插件列表,用到的再次注册,如比例尺'AMap.Scale'等}).then((AMap) => {// 初始化地图this.map = new AMap.Map("DMAMap", {viewMode: "3D", // 是否为3D地图模式zoom: 13, // 初始化地图级别center: [120.987239, 31.391653], //中心点坐标resizeEnable: true,});this.map.setMapStyle("amap://styles/darkblue");this.drawPolygon();});},// 绘制多边形drawPolygon() {let mouseTool = new AMap.MouseTool(this.map);mouseTool.polygon({strokeColor: "#FF33FF",strokeOpacity: 1,strokeWeight: 6,strokeOpacity: 0.2,fillColor: "#1791fc",fillOpacity: 0.4,// 线样式还支持 'dashed'strokeStyle: "solid",// strokeStyle是dashed时有效// strokeDasharray: [30,10],});mouseTool.on("draw", (event) => {// event.obj 为绘制出来的覆盖物对象let path = event.obj.getPath(); // 获取多边形的路径let str = "";let pathArr = [];for (let i = 0; i < path.length; i++) {pathArr.push([path[i].getLng(), path[i].getLat()]);str += path[i].getLng() + "," + path[i].getLat() + " ";}this.geometryArr = pathArr; // 这个就是绘制的点的坐标数组this.addForm.latlng = str;  // 转换为字符串});},// 回显多边形getwPolygon() {let paths = this.addForm.latlng.split(" ");let pathsArr = paths.filter((item) => item).map((item) => item.split(",").map((i) => Number(i)));let polygon = new AMap.Polygon({path: pathsArr,strokeColor: "#FF33FF",strokeWeight: 6,strokeOpacity: 0.2,fillOpacity: 0.4,fillColor: "#1791fc",zIndex: 50,strokeStyle: "solid",});this.map.add(polygon);// 缩放地图到合适的视野级别this.map.setFitView([polygon]);let polyEditor = new AMap.PolyEditor(this.map, polygon);polyEditor.open(); // 开启编辑矢量图形功能polyEditor.on("addnode", (event) => {let path = event.target.getPath();this.filterPath(path); // 处理多边形的经纬度});polyEditor.on("adjust", (event) => {let path = event.target.getPath();this.filterPath(path); // 处理多边形的经纬度});polyEditor.on("removenode", (event) => {let path = event.target.getPath();this.filterPath(path); // 处理多边形的经纬度});polyEditor.on("end", (event) => {let path = event.target.getPath();this.filterPath(path); // 处理多边形的经纬度});},

相关文章:

高德地图,绘制矢量图形并获取经纬度

效果如图 我用的是AMapLoader这个地图插件,会省去很多配置的步骤,非常方便 首先下载插件,然后在局部引入 import AMapLoader from "amap/amap-jsapi-loader";然后在methods里面使用 // 打开地图弹窗mapShow() {this.innerVisible true;this.$nextTick(() > {…...

【100天精通Python】Day59:Python 数据分析_Pandas高级功能-多层索引创建访问切片和重塑操作,pandas自定义函数和映射功能

目录 1 多层索引&#xff08;MultiIndex&#xff09; 1.1 创建多层索引 1.1.1 从元组创建多层索引 1.1.2 使用 set_index() 方法创建多层索引 1.2 访问多层索引数据 1.3 多层索引的层次切片 1.4 多层索引的重塑 2 自定义函数和映射 2.1 使用 apply() 方法进行自定义函…...

javaee springMVC 一个案例

项目结构 pom.xml <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/P…...

Android T 窗口层级其三 —— 层级结构树添加窗口(更新中)

序 尚未添加窗口的层级结构树&#xff0c;如图 DisplayArea层级结构中的每一个DisplayArea&#xff0c;都包含着一个层级值范围&#xff0c;这个层级值范围表明了这个DisplayArea可以容纳哪些类型的窗口。 每种窗口类型&#xff0c;都可以通过WindowManagerPolicy.getWindowLa…...

【Linux】管道

管道命令 #include <unistd.h> int pipe(int pipefd[2]); 在Linux中&#xff0c;管道&#xff08;pipe&#xff09;的返回值是一个整数数组&#xff0c;包含两个文件描述符。这两个文件描述符分别代表管道的读端和写端。 当成功创建一个管道时&#xff0c;pipe() 系统调用…...

postgre 12.11单实例安装文档

一 下载 访问https://www.postgresql.org/download/&#xff0c;点击左侧的‘source进行下载&#xff0c;一般选择bz2的安装包。 二 安装 这里安装12.11版本的postgre&#xff0c;数据目录路径为/data/server/pgdata&#xff0c;端口为5432. 2.1 安装依赖包 #安装 yum in…...

使用LightPicture开源搭建私人图床:详细教程及远程访问配置方法

文章目录 1.前言2. Lightpicture网站搭建2.1. Lightpicture下载和安装2.2. Lightpicture网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 现在的手机越来越先进&#xff0c;功能也越来越多&#xff0c;而手机…...

基于视觉重定位的室内AR导航项目思路(1):最初的项目思路(SLAM)

文章目录 最初的项目思路&#xff08;SLAM&#xff09;&#xff1a;后文&#xff1a; 前情提要&#xff1a; 是第一次做项目的小白&#xff0c;文章内的资料介绍如有错误&#xff0c;请多包含&#xff01; 最初的项目思路&#xff08;SLAM&#xff09;&#xff1a; 由于我们在…...

小白学go基础05-变量声明形式

和Python、Ruby等动态脚本语言不同&#xff0c;Go语言沿袭了静态编译型语言的传统&#xff1a;使用变量之前需要先进行变量的声明。 变量声明形式使用决策流程图 这里大致列一下Go语言常见的变量声明形式&#xff1a; var a int32 var s string "hello" var i 13 …...

高可用Kuberbetes部署Prometheus + Grafana

概述 阅读官方文档部署部署Prometheus Grafana GitHub - prometheus-operator/kube-prometheus at release-0.10 环境 步骤 下周官方github仓库 git clone https://github.com/prometheus-operator/kube-prometheus.git git checkout release-0.10 进入工作目录 cd kube…...

ardupilot 安装gcc-arm-none-eabi编译工具

目录 文章目录 目录摘要0简介1.下载网站2.安装摘要 本节主要记录ardupilot使用的编译器安装过程。 0简介 gcc-arm-none-eabi是GNU项目下的软件,是一个面向裸机arm的编译器。那么说了这么多介绍,它都包含什么具体功能又怎么安装与使用呢,我们继续。 1.下载网站 gcc-arm-n…...

ORACLE集群管理-19C RAC重新配置IPV6

1 问题概述 数据库已经配置和IPV6和 IPV4双线协议&#xff0c;需要重新配置IPV6 2 关闭相关资源 1 root用户执行 ./srvctl stop scan_listener -i 1 ./srvctl stop scan ./srvctl stop listener -n orcldb1 ./srvctl stop listener -n orcldb2 ./srvctl stop vip -n orcldb…...

Mybatis实体类属性与数据库字段的对应关系

方法一:起别名 select t_id(数据库字段) tId(类的属性), ... , ...from 表名 方法二:开启驼峰映射 <!-- 开启驼峰映射 数据库 s_id java类 sId--><setting name"mapUnderscoreToCamelCase" value"true"/> 当java类中属性命名…...

Unity(三) Shader着色器初探

学习3D开发技术的时候无可避免的要接触到Shader&#xff0c;那么Shader是个什么概念呢&#xff1f;其实对于开发同事来说还是比较难理解的&#xff0c;一般来说Shader是服务于图形渲染的一类技术&#xff0c;开发人员可以通过其shader语言来自定义显卡渲染页面的算法&#xff0…...

苹果电脑要安装杀毒软件吗?mac用什么杀毒软件好?

对于这个问题让人很是纠结&#xff0c;Mac不需要杀毒这个理论一直都深入人心&#xff0c;Mac OS X权限管理特性可以防毒的说法也一直甚嚣尘上&#xff0c;很多小伙伴如我一样搞不清楚到底要不要安装杀毒软件。&#xff0c;毕竟当前个人信息安全泄露泛滥不穷的年代&#xff0c;我…...

MySQL——索引

索引在 MySQL 数据库中分三类&#xff1a; B 树索引Hash 索引全文索引 目的&#xff1a;在查询的时候提升效率 b树 参考&#xff1a;https://blog.csdn.net/qq_40649503/article/details/115799935 数据库索引&#xff0c;是数据库管理系统中一个排序的数据结构&#xf…...

110. 平衡二叉树

题目链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 递归法&#xff1a; 我的代码&#xff1a; *** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* Tree…...

遗忘因子递推最小二乘参数估计(FFRLS)

基于遗忘因子的最小二乘法电池参数辨识 最小二乘法是系统辨识中最常用的一种估算方法。为了克服最小二乘法存在”数据饱和”的问题&#xff0c;我们通常采用含有遗忘因子的递推最小二乘法(Forgetting Factor Recursive Least Square,FFRLS)算法进行电池模型的参数辨识。 1、二…...

【redis进阶】基础知识简要回顾

1. 常见功能介绍 聚合统计 使用list集合的差集、并集来统计 排序统计 SortedSet&#xff08;ZSet&#xff09;统计&#xff0c;再利用分页列出权重高的元素 二值状态统计 BitMap存储&#xff0c;获取并统计 SETBIT uid:sign:3000:202008 2 1 GETBIT uid:sign:3000:202008 2…...

HTML5-3-表格

文章目录 属性边框属性标题跨行和跨列单元格边距 HTML 表格由 <table> 标签来定义。 tr&#xff1a;tr 是 table row 的缩写&#xff0c;表示表格的一行。td&#xff1a;td 是 table data 的缩写&#xff0c;表示表格的数据单元格。th&#xff1a;th 是 table header的缩…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...