当前位置: 首页 > 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的缩…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

【1】跨越技术栈鸿沟:字节跳动开源TRAE AI编程IDE的实战体验

2024年初&#xff0c;人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目&#xff08;一款融合大型语言模型能力的云端AI编程IDE&#xff09;时&#xff0c;技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力&#xff0c;TRAE在WayToAGI等…...

深入理解 C++ 左值右值、std::move 与函数重载中的参数传递

在 C 编程中&#xff0c;左值和右值的概念以及std::move的使用&#xff0c;常常让开发者感到困惑。特别是在函数重载场景下&#xff0c;如何合理利用这些特性来优化代码性能、确保语义正确&#xff0c;更是一个值得深入探讨的话题。 在开始之前&#xff0c;先提出几个问题&…...

中国政务数据安全建设细化及市场需求分析

(基于新《政务数据共享条例》及相关法规) 一、引言 近年来,中国政府高度重视数字政府建设和数据要素市场化配置改革。《政务数据共享条例》(以下简称“《共享条例》”)的发布,与《中华人民共和国数据安全法》(以下简称“《数据安全法》”)、《中华人民共和国个人信息…...