高德地图矢量图形点击事件生成

news2024/12/23 6:28:47

官方文档https://lbs.amap.com/demo/javascript-api-v2/example/overlay-editor/polylineeditor

生成矢量图形如上,代码如下

const markerAddof = ref(false)
// 绘图
function drawMark () {
  if (!markerAddof.value) {//限制矢量图形点击只显示一个
    if (cameraId.value !== 0) {
      markerQure()
    } else {
      squareVertices.value = calculateSquareVertices(
        cameraLatInpt.value,//中心坐标
        cameraLngInpt.value,//中心坐标
        1000
      )
      setTimeout(() => {
        markerQure()
      }, 1000)

      console.log('squareVertices.value', squareVertices.value)
    }
    markerAddof.value = true
  }
}

对地图进行渲染, 如果点击后只显示一个矢量图形,可以加上限制判断,不需要的不用加。必须添加中心点,需要根据中心点进行渲染

// 画图各个点标记
const calculateSquareVertices = (centerLat, centerLng, sideLength) => {
  // 将长度从米转换为经度差值
  const deltaLat = (sideLength / 111300) * 1.1
  const deltaLng =
    (sideLength / (111300 * Math.cos(centerLat * (Math.PI / 180)))) * 1.1
  // console.log('deltaLat', deltaLat)
  // console.log('deltaLng', deltaLng)
  const vertices = [
    { lat: Number(centerLat) + deltaLat, lng: Number(centerLng) - deltaLng }, // 右上角
    { lat: Number(centerLat) - deltaLat, lng: Number(centerLng) - deltaLng }, // 右下角
    { lat: Number(centerLat) - deltaLat, lng: Number(centerLng) + deltaLng }, // 左下角
    { lat: Number(centerLat) + deltaLat, lng: Number(centerLng) + deltaLng }, // 左上角
  ]
  console.log(vertices)
  return vertices
}

 通过计算给四周的点进行标记,可以直接使用该算法

// 绘图变化
const markerQure = () => {
  console.log('进来了没有地图渲染')
  // console.log('squareVertices.value', squareVertices.value)
  if (view.value) {
    // polyEditor.value.close()
    // polyEditor.value = null
    // map.value.clearMap()
  }
  const path: any = []
  if (cameraId.value !== 0) {
    squareVertices.value.forEach((i) => {
      path.push([i[0], i[1]])
    })
  } else {
    console.log(' squareVertices.value2', squareVertices.value)
    squareVertices.value.forEach((i) => {
      path.push([i.lng, i.lat])
    })
  }
  console.log('path', path)
  const polygon = new AMap.Polygon({
    path: path,
    strokeColor: '#FF33FF',
    strokeWeight: 6,
    strokeOpacity: 0.2,
    fillOpacity: 0.4,
    fillColor: '#1791fc',
    zIndex: 50,
    bubble: true,
  })
  console.log('polygon', polygon)
  map.value.add([polygon])
  map.value.setFitView()
  // centerPointFn()
  polyEditor.value = new AMap.PolygonEditor(map.value, polygon)
  polyEditor.value.addAdsorbPolygons([polygon])
  polyEditor.value.open()
  // 监听坐标点的变化
  polyEditor.value.on('addnode', function (event) {
    squareVertices.value = []
    event.target.getPath().forEach((i) => {
      squareVertices.value.push({
        lng: i.lng,
        lat: i.lat,
      })
    })
    console.log('这里有吗', squareVertices.value)
    // centerPointFn()
  })
  view.value = true
  // 监听拖动变化
  polyEditor.value.on('adjust', function (event) {
    squareVertices.value = []
    event.target.getPath().forEach((i) => {
      squareVertices.value.push({
        lng: i.lng,
        lat: i.lat,
      })
    })
    console.log('坐标参数', squareVertices.value)
    // centerPointFn()
  })
  polyEditor.value.on('removenode', function (event) {
    squareVertices.value = []
    event.target.getPath().forEach((i) => {
      squareVertices.value.push({
        lng: i.lng,
        lat: i.lat,
      })
    })
    console.log('坐标参数2', squareVertices.value)
    // centerPointFn()
  })
}

通过改变点的位置,对矢量图形重新绘画并重新获取各个点的位置进行渲染

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Discord邀请Midjourney机器人失败?教你一招解决

最近小鲨在使用Midjourney的过程中,遇到一个问题: Discord在邀请Midjourney机器人的时候,报错: Unable to accept invite(无法接受邀请) 因为Midjourney目前,主要还是在Discord里使用。 如果D…

【docker】在IDEA工具内,远程操作服务器上的docker

一,配置 在服务器上,对docker配置如下内容: vi /usr/lib/systemd/system/docker.service添加如下: -H tcp://0.0.0.0:2375重新加载,并重启docker: #重新加载配置 systemctl daemon-reload# 重启docker …

双路创新深度学习!TCN-Transformer+LSTM多变量时间序列预测(Matlab)

双路创新深度学习!TCN-TransformerLSTM多变量时间序列预测(Matlab) 目录 双路创新深度学习!TCN-TransformerLSTM多变量时间序列预测(Matlab)效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab…

肾癌的多模态预测模型-临床-组织学-基因组

目录 摘要 技术路线 ① lncRNA的预测模型 ②病理 WSI 的分类器 ③临床病理分类器 模型结果 与别的模型比较 同行评审学习 1)使用lncRNA的原因 2)模型临床使用意义 3)关于截止值的使用 摘要 A multi-classifier system integrated…

51.字符串比较实例-用户登录

//已知正确的用户名和密码,请用程序实现模拟用户登录 //总共三次机会,登录之后给出相应的提示 import java.util.Scanner;public class 登录 {public static void main(String[] args) {//1.定义两个变量,记录正确的用户名和密码String righ…

红黑树:强大的数据结构之插入详解,附图

一、红黑树概述 红黑树是一种自平衡二叉查找树,具有以下性质:节点要么是红色要么是黑色;根节点是黑色;每个叶子节点(NIL 节点)是黑色;每个红色节点的两个子节点都是黑色;从任一节点到…

【已解决】ElementPlus 的 el-menu 组件如何用 js 控制展开某个子菜单,并在其他组件中控制使用呢?

文章目录 需求几次探索官网寻找线索(解决办法) 需求 我如何用代码来实现 ElementPlus 的菜单的展开和收缩呢? 几次探索 尝试通过找到节点之后,使用 click 事件,失败了 // 伪代码如下 const handleFindNodeAndClick …

【数据结构】散列(哈希)表简单介绍

散列表也叫做哈希表(Hash table),散列表通过关键码和存储地址建立唯一确定的映射关系,能够快速查找到对应的元素,排序算法中的计数排序就是一种利用哈希进行排序的算法。 一、散列表的概念 散列表(Hash ta…

【优选算法之前缀和】No.6--- 经典前缀和算法

文章目录 前言一、前缀和例题模板:1.1 【模板】前缀和1.2 【模板】⼆维前缀和1.3 寻找数组的中⼼下标1.4 除⾃⾝以外数组的乘积1.5 和为 K 的⼦数组1.6 和可被 K 整除的⼦数组1.7 连续数组1.8 矩阵区域和 前言 👧个人主页:小沈YO. &#x1f6…

提升晶振电路抗扰性:优化方案解析

在现代电子设备中,晶振作为提供稳定时钟信号的核心组件,其稳定性对整个系统的运行至关重要。然而,电路抗扰性不良往往会导致晶振失效,进而影响设备的整体性能。晶发电子针对这一问题,提出了以下关于晶振电路抗扰性及优…

【C++】拆分详解 - string类

文章目录 一、为什么学习string类?二、标准库中的string类  1. 定义  2. 常用接口说明     2.1 构造     2.2 容量操作     2.3 访问及遍历操作     2.4 修改操作     2.5 非成员函数 三、OJ练习自测  [1. 仅仅反转字母](https://leetcod…

9.23 My_string.cpp

my_string.h #ifndef MY_STRING_H #define MY_STRING_H#include <iostream> #include <cstring>using namespace std;class My_string { private:char *ptr; //指向字符数组的指针int size; //字符串的最大容量int len; //字符串当前…

华为三折叠一拆,苹果脸被打肿了!

文&#xff5c;琥珀食酒社 作者 | 随风 哎呀 苹果这次脸真是被华为狠狠打肿了 那些高高兴兴买iPhone 16的 东西一收到&#xff0c;脸马上就绿了啊 各种意想不到的问题啊 拆开手机后发现有两处掉漆咱就不说了 第一次滑动iPhone 16 Pro屏幕有响应 再滑动就没有响应了咱也…

【27】C++项目练习

练习1 题目如下 代码如下 .h #pragma once #include <string> using namespace std;class Toy { public:Toy();Toy(string name,int price,string place);~Toy();string getName() const;int getPrice() const;string getPlace() const;void changePrice(float count)…

自己开发的windows服务在虚拟机上不能正常启用

最近开发了个数据采集系统&#xff0c;在我本机上发布、安装是没有问题的&#xff1b;但是在虚拟机上进行安装部署的时候&#xff0c;反馈的错误码是1053&#xff0c;服务不能正常启动。 网上搜索可能的原因&#xff0c;如图&#xff1a; 能引起1053的问题比较多&#xff0c;首…

springboot实战学习笔记(4)(Spring Validation参数校验框架、全局异常处理器)

接着上篇博客学习。上篇博客是已经基本完成用户模块的注册接口的开发。springboot实战学习笔记&#xff08;3&#xff09;(Lombok插件、postman测试工具、MD5加密算法、post请求、接口文档、注解、如何在IDEA中设置层级显示包结构、显示接口中的方法)-CSDN博客本篇博客主要是关…

最新版Visual Studio安装教程(超详细,新手必看)

一、官网下载 这里奉上Visual Studio官方下载地址&#xff1a; https://visualstudio.microsoft.com/zh-hans/downloads/https://visualstudio.microsoft.com/zh-hans/downloads/ 对于我们学习来说&#xff0c;下载第一个社区免费版即可&#xff0c;点击下载。 下载完成以后是…

Kubernetes Pod调度基础(kubernetes)

实验环境依旧是k8s快照&#xff0c;拉取本次实验所需的镜像文件&#xff1b; 然后在master节点上传已经编写好的yaml文件&#xff1b; 然后同步会话&#xff0c;导入镜像&#xff1b; pod控制器&#xff1a; 标签选择器--》标签&#xff1a; 标签&#xff1a; 在Kubernetes&…

还在用windows自带录屏?试试这三款录屏工具

作为一名办公室文员&#xff0c;我经常需要录制电脑屏幕来制作教程或者记录工作流程。在众多的录屏工具中&#xff0c;我尝试了四款不同的录屏工具&#xff0c;包括Windows自带录屏工具。今天&#xff0c;我就来跟大家分享一下我的使用体验&#xff0c;希望能帮助到和我有同样需…

利用代码,玩转腾讯云脱敏服务:Java、Python、PHP案例集

腾讯云数据脱敏服务-数据管理的优势是什么&#xff1f; 腾讯云数据脱敏服务-数据管理 提供了一种高效且灵活的方式来保护敏感数据。其核心优势在于可以在数据处理和传输过程中自动化地执行数据脱敏操作。无论是脱敏信用卡号、身份证号还是其他个人信息&#xff0c;该服务都能精…