高德地图绘图,点标记,并计算中心点

news2024/11/8 6:35:23

 

效果图

代码如下

/ 地图初始化
const map: any = ref(null)
const marker: any = ref(null)
const polyEditor: any = ref(null)
const view: any = ref(false)
const squareVertices: any = ref([])
const init = () => {
  workSpacesCurrent(workspaceId, {}).then((res) => {
    console.log('地图呢', res.data)
    map.value = new AMap.Map('container6', {
      center: [res.data.longitude, res.data.latitude],
      // center:
      //   ['118.622184', '32.096262'],
      layers: [
        // 卫星
        new AMap.TileLayer.Satellite(),
        // 路网
        new AMap.TileLayer.RoadNet(),
      ],
      zoom: 17, // 地图显示的缩放级别
      zooms: [0, 19], // 设置缩放级别范围为3至16
    })

    pointMark()
  })
}

// 点标记
function pointMark () {
  if (cameraId.value !== 0) {
    console.log('你是多少', cameraId.value)
    console.log('cameraLngInpt', cameraLngInpt.value)
    console.log('cameraLatInpt', cameraLatInpt.value)
    setTimeout(() => {
      marker.value = new AMap.Marker({
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        position: [cameraLngInpt.value, cameraLatInpt.value],
      })
      map.value.add(marker.value)
    }, 5000)
  } else {
    if (squareVertices.value.length === 0) {
      map.value.on('click', (e) => {
        if (view.value) {
          polyEditor.value.close()
          polyEditor.value = null
          map.value.clearMap()
        }
        console.log('地图点击进来啦吗')
        console.log('e', e)
        marker.value = new AMap.Marker({
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          position: [e.lnglat.lng, e.lnglat.lat],
        })
        map.value.add(marker.value)
        // marker.value.setMap(map.value)
        console.log('地图点击点标记', marker.value)
        const cameralng = e.lnglat.lng
        const cameralat = e.lnglat.lat
        cameraLngInpt.value = cameralng
        cameraLatInpt.value = cameralat
        // 绘图
        drawMark(e)
      })
    } else {
      // centerPointFn()
    }
  }
}

// 绘图
function drawMark (e: any) {
  squareVertices.value = calculateSquareVertices(
    e.lnglat.lat,
    e.lnglat.lng,
    1000
  )
  console.log('squareVertices.value', squareVertices.value)
  markerQure()
}

// 监听绘图变化
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 {
    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)
    clearMarker()
    setTimeout(() => {
      pointMark()
    }, 500)

    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)
    clearMarker()
    pointMark()
    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)
    clearMarker()
    pointMark()
    centerPointFn()
  })
}

// 画图各个点标记
const calculateSquareVertices = (centerLat, centerLng, sideLength) => {
  // 将长度从米转换为经度差值
  const deltaLat = (sideLength / 111300) * 1.1
  const deltaLng =
    (sideLength / (111300 * Math.cos(centerLat * (Math.PI / 180)))) * 1.1

  const vertices = [
    { lat: centerLat + deltaLat, lng: centerLng - deltaLng }, // 右上角
    { lat: centerLat - deltaLat, lng: centerLng - deltaLng }, // 右下角
    { lat: centerLat - deltaLat, lng: centerLng + deltaLng }, // 左下角
    { lat: centerLat + deltaLat, lng: centerLng + deltaLng }, // 左上角
  ]

  return vertices
}


// 中心点坐标
function centerPointFn () {
  let sumLng = 0
  let sumLat = 0
  if (cameraId.value !== 0) {
    console.log('是否进来')
    for (let i = 0; i < squareVertices.value.length; i++) {
      sumLng += squareVertices.value[i][0]
      sumLat += squareVertices.value[i][1]
    }
  } else {
    for (let i = 0; i < squareVertices.value.length; i++) {
      sumLng += squareVertices.value[i].lng
      sumLat += squareVertices.value[i].lat
    }
  }

  const centerLng = sumLng / squareVertices.value.length
  const centerLat = sumLat / squareVertices.value.length
  // 创建多边形的中心点坐标对象
  const centerPoint = new AMap.LngLat(centerLng, centerLat)
  const centerPointInpp = [centerLng, centerLat]
  centerPointInpt.value = centerPointInpp.toString()
  addMarker(centerLng, centerLat)
  console.log('参数3', centerPointInpt.value)
  console.log(
    '多边形的中心点经度:' +
      centerPoint.getLng() +
      ',纬度:' +
      centerPoint.getLat()
  )

  // const marker = new AMap.Marker({
  //   icon: '/src/assets/center.png',
  //   position: [centerLng, centerLat],
  //   offset: new AMap.Pixel(-13, -30),
  // })
  // map.value.add(marker)
}


// 添加标记点
function addMarker (lng, lat) {
  if (marker.value) {
    console.log('添加点坐标更新')
    marker.value.setPosition([lng, lat]) // 更新点坐标
  } else {
    marker.value = new AMap.Marker({
      // icon: '/src/assets/center.png',
      map: map.value,
      position: [lng, lat],
      offset: new AMap.Pixel(-13, -30),
    })
  }
}

// 清除标记点
function clearMarker () {
  console.log('清除打点位置', marker.value)
  if (marker.value) {
    marker.value.setMap(null)
    marker.value = null
  }
}

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

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

相关文章

html+css+js网页设计 旅游 龙门石窟8个页面

htmlcssjs网页设计 旅游 龙门石窟8个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#…

实战案例(5)防火墙通过跨三层MAC识别功能控制三层核心下面的终端

如果网关是在核心设备上面&#xff0c;还能用MAC地址进行控制吗&#xff1f; 办公区域的网段都在三层上面&#xff0c;防火墙还能基于MAC来控制吗&#xff1f; 采用正常配置模式的步骤与思路 &#xff08;1&#xff09;配置思路与上面一样 &#xff08;2&#xff09;与上面区…

分类预测|基于鲸鱼优化-卷积-门控制单元网络-注意力数据分类预测Matlab程序 WOA-CNN-GRU-Attention

分类预测|基于鲸鱼优化-卷积-门控制单元网络-注意力数据分类预测Matlab程序 WOA-CNN-GRU-Attention 文章目录 一、基本原理1. WOA&#xff08;鲸鱼优化算法&#xff09;2. CNN&#xff08;卷积神经网络&#xff09;3. GRU&#xff08;门控循环单元&#xff09;4. Attention&…

计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

IMS中的号码规整 5G注册流程中的语音相关参数

目录 1. IMS中的号码规整 1.1 主要内容 1.2 什么是 IMS 的号码规整及 FAQ 1.3 VoNR(VoLTE) 打 VoNR(VoLTE),被叫号码规整流程 主叫 AS 来做规整 主叫 S-CSCF 来做规整 2. 5G注册流程中的语音相关参数 2.1 主要内容 2.2 使用 VoNR 的第一步:5G注册流程 2.3 5G 注册流…

2024年9月12日(k8s环境及测试 常用命令)

一、环境准备及测试 1、报错处理&#xff1a; kube-system calico-node-5wvln 0/1 Init:0/3 0 16h kube-system calico-node-d7xfb 0/1 Init:0/3 0 16h ku…

3个WebSocket的.Net开源项目

推荐3个有关Websocket的.Net开源项目。 一、FreeIM 一个使用Websocket协议实现的、高性能即时聊天组件&#xff0c;可用于群聊、好友聊天、游戏直播等场景。 1、跨平台&#xff1a;基于.NetCore开发&#xff0c;支持Windows、Mono、Liunx、Windows Azure、Docker。 2、支持…

vue3使用panolens.js实现全景,带有上一个下一个,全屏功能

panolens官方文档Home - Panolens 1.加载核心js库 &#xff08;文件在untils里面&#xff09; import /utils/panolens/three.min.js; import /utils/panolens/panolens.min.js; /项目中 /railway/modalIframe/playPanorama/player/js/panolens-ht.js 为修改后版本 可以获取…

elementUI中el-form 嵌套el-from 如何进行表单校验?

在el-form中嵌套另一个el-form进行表单校验和添加规则&#xff0c;首先&#xff0c;需要确保每个嵌套的el-form都有自己的model、rules和ref。 以下是一个简化的示例&#xff1a; <template><el-form :model"parentForm" :rules"parentRules" r…

推荐7款可以写论文的AI免费工具,原创一键生成神器!

在当今学术研究和写作领域&#xff0c;AI技术的应用越来越广泛&#xff0c;特别是在论文写作方面。为了帮助学生和研究人员提高写作效率和质量&#xff0c;以下推荐7款可以写论文的AI免费工具&#xff0c;这些工具均具备一键生成高质量论文的功能&#xff0c;是原创写作的神器。…

工业机器人9公里远距离图传模块,无人机低延迟高清视界,跨过距离限制

在科技日新月异的今天&#xff0c;无线通信技术正以未有的速度发展&#xff0c;其中&#xff0c;图传模块作为连接现实与数字世界的桥梁&#xff0c;正逐步展现出其巨大的潜力和应用价值。今天&#xff0c;我们将聚焦一款引人注目的产品——飞睿智能9公里远距离图传模块&#x…

自制一键杀死端口进程程序# tomcat 如何杀死tomcat进程

直接cmd 窗口执行如下命令即可 netstat -ano | findstr :8080 taskkill /F /PID <PID>简简单单的两个指令,总是记不住,也懒的记, 每次端口冲突的时候, 都是直接查百度,很苦逼, 如果有一个程序,直接输入端口号,点击按钮直接杀死进程,岂不爽歪歪. 跟我一起制作一个屠猫的…

【CSS】 Grid布局:现代网页设计的基石

引言 最近接到一个网页布局比较复杂的页面&#xff0c;看了半天还是决定用grid布局来写&#xff0c;记录一下 布局是构建用户界面的关键部分。CSS Grid布局提供了一种简单而强大的方式来创建复杂的网格布局&#xff0c;它让设计师和开发者能够更直观、更灵活地控制网页的结构。…

git pull之后发现项目错误,如何回到之前的版本方法

目录 首先我们打开小程序的cmd的黑窗口&#xff0c;git reflog查看之前的版本 之后再git reset --hard main{1} 我这个就已经返回了之前的6daaa2e的版本了 首先我们打开小程序的cmd的黑窗口&#xff0c;git reflog查看之前的版本 之后再git reset --hard main{1} 我这个就已…

Haption力反馈设备在机器人遥操作中的应用优势

在工业、医疗、科研等多个领域&#xff0c;机器人遥操作正在成为一项关键技术&#xff0c;它允许操作者在远离实际工作环境的情况下&#xff0c;通过远程控制系统对机器人进行精准操作。Haption Virtuose力反馈设备作为遥操作系统中的重要组成部分&#xff0c;其应用优势日益凸…

OpenGL3.3_C++_Windows(37)

调试&#xff1a; 视觉错误与CPU调试不同&#xff0c;在GLSL代码中也不能设置断点&#xff0c;出现错误的时候寻找错误的源头可能会非常困难。 glGetError&#xff08;&#xff09; GLenum glGetError();返回整形数字&#xff0c;查询错误标记&#xff0c;但是当一个错误标记…

JS设计模式之装饰者模式:优雅的给对象增添“魔法”

引言 在前端开发中&#xff0c;我们经常会遇到需要在不修改已有代码的基础上给对象添加新的行为或功能的情况。而传统的继承方式并不适合这种需求&#xff0c;因为继承会导致类的数量急剧增加&#xff0c;且每一个子类都会固定地实现一种特定的功能扩展。 装饰者模式则提供了…

LLM - 理解 多模态大语言模型 (MLLM) 的预训练与相关技术 (三)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/142063880 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 完备(F…

基于锂电池的多路直流电源模块设计

本实物模块从实物外观、接口介绍及功能说明三部分来介绍这款基于锂电池的多路直流电源模块。 1、实物外观 2、接口介绍 本模块的3D外观图如下图所示&#xff0c;整体尺寸为6*8cm。H1为单节锂电池接口&#xff0c;H2为5V输出接口&#xff0c;H3为12V输出接口&#xff0c;H4为-…

【开源免费】基于SpringBoot+Vue.JS房产销售系统(JAVA毕业设计)

本文项目编号 T 028 &#xff0c;文末自助获取源码 \color{red}{T028&#xff0c;文末自助获取源码} T028&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 销…