vue3在高德地图中制作气象扇形雷达图

news2024/12/24 9:10:31

在这里插入图片描述
这是效果图,每隔22.5°就会有一个扇形区域,有三层区域,第一层是距离圆点5km,第二层是10km,第三层是50km。

第一步:高德地图中绘画圆

在这里插入图片描述

      // 构造矢量圆形
      let circle = new AMap.Circle({
        center: position.value, // 圆心位置
        radius: 5000, //半径
        strokeColor: "#94D8F6", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线粗细度
        fillColor: "", //填充颜色
        fillOpacity: 0.35, //填充透明度
      });
      let circle01 = new AMap.Circle({
        center: position.value, // 圆心位置
        radius: 10000, //半径
        strokeColor: "#94D8F6", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线粗细度
        fillColor: "", //填充颜色
        fillOpacity: 0.35, //填充透明度
      });
      let circle02 = new AMap.Circle({
        center: position.value, // 圆心位置
        radius: 50000, //半径
        strokeColor: "#94D8F6", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线粗细度
        fillColor: "", //填充颜色
        fillOpacity: 0.35, //填充透明度
      });
      map.add(circle); // 增加圆圈
      map.add(circle01); // 增加圆圈
      map.add(circle02); // 增加圆圈

第二步:绘制圆点到50km圆的分割线

在这里插入图片描述
就是每隔22.5°增加一条线

思路就是,要得知距离圆点50km某个方位的新点位。我写了一个方法。

  // 已知某个点位,在相同经度下,计算沿纬度方向移动n米,然后旋转N度,获得的新点位:
  calculateNewPoint(lat: number, lng: number, distance: number, angle: number) {
    // lat 起始点纬度  lng起始点经度  distance 两点距离 angle  角度,顺时针为正,逆时针为负
    const R = 6378137; // 地球半径,单位为米
    const dRad = distance / R; // 距离转换为弧度
    const angleRad = angle * Math.PI / 180; // 角度转换为弧度
  
    const newLat = Math.asin(
      Math.sin(lat * Math.PI / 180) * Math.cos(dRad) +
      Math.cos(lat * Math.PI / 180) * Math.sin(dRad) * Math.cos(angleRad)
    ) * 180 / Math.PI;
  
    const newLng = lng + Math.atan2(
      Math.sin(angleRad) * Math.sin(dRad) * Math.cos(lat * Math.PI / 180),
      Math.cos(dRad) - Math.sin(lat * Math.PI / 180) * Math.sin(newLat * Math.PI / 180)
    ) * 180 / Math.PI;
  
    return { lat: newLat, lng: newLng };// return 新点位的经纬度
  }

在这里插入图片描述

然后获取获取点位

  for (let i = 1; i <= 31; i = i + 2) {
    obj.push($tool.calculateNewPoint(position.value[1], position.value[0], n, 11.25 * i));// 获取最外圈的点位,因为第一条线,距离我的纬度是11.25,所以以此循环过后,就得到一周18个点

  }

然后开始画线,将所有的50km获取的新点位,都和圆点进行连线

      for (let index = 0; index < sectorPoints.value.length; index++) {
        let line = new AMap.Polyline({
          path: [
            position.value,
            [sectorPoints.value[index].lng, sectorPoints.value[index].lat],
          ],
          isOutline: true,
          outlineColor: index % 2 == 0 ? "#ff0056" : "#FFF766",
          borderWeight: 0,
          strokeColor: index % 2 == 0 ? "#ff0056" : "#FFF766",
          strokeOpacity: 1,
          strokeWeight: 1,
          // 折线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          // strokeDasharray: [15, 5],
          lineJoin: "round",
          lineCap: "round",
          zIndex: 150,
        });
        pathline.push(line);
      }
map.add(pathline);// 增加线段

然后我们就得到了这样的图案
在这里插入图片描述

第三步:寻找5km、10km、50的点,用来后期去分割区域

因为高德没有扇形的绘画功能,所以只能在扇形的两个点之间寻找很多个点,用来分割扇形,然后再画多边形
在这里插入图片描述
找点的代码

let setSector = (n: number, obj: any[]) => {
  // 绘制扇形线条
  // position.value 中心点
  for (let i = 1; i <= 31; i = i + 2) {
    obj.push($tool.calculateNewPoint(position.value[1], position.value[0], n, 11.25 * i));
    let _path = [];
    for (let j = 11.25 * (i - 2); j <= 11.25 * i; j = j + 0.5) {
      let _one = $tool.calculateNewPoint(position.value[1], position.value[0], n, j);
      _path.push([_one.lng, _one.lat]);
      // [sectorPoints.value[index].lng, sectorPoints.value[index].lat]
    }

    if (n == 5000) {
      // _path.push(position.value);
      sector5kmLine.value.push({
        path: _path,
      });
    } else if (n == 10000) {
      sector10kmLine.value.push({
        path: _path,
      });
    } else if (n == 50000) {
      sector50kmLine.value.push({
        path: _path,
      });
    }
  }
};
setSector(50000, sectorPoints.value);// 存点
setSector(5000, sectorPoints5km.value);
setSector(10000, sectorPoints10km.value);

然后存储多边形的数据,都存到sectorArea中

for (let i = 0; i < sector5kmLine.value.length; i++) {
  let _path01: any[] = [];
  let _path02: any[] = [];
  let _path03: any[] = [];
  _path01 = JSON.parse(JSON.stringify(sector5kmLine.value[i].path));
  _path01.push(position.value);

  _path02 = JSON.parse(
    JSON.stringify(
      sector5kmLine.value[i].path.concat(
        JSON.parse(JSON.stringify(sector10kmLine.value[i].path)).reverse()
      )
    )
  );

  _path03 = JSON.parse(
    JSON.stringify(
      sector50kmLine.value[i].path.concat(
        JSON.parse(JSON.stringify(sector10kmLine.value[i].path)).reverse()
      )
    )
  );
  sectorArea.value.push({
    // 5km 扇形区域
    id: "5km" + i,// 预留每个区域id
    status: 0, // 0 正常 1 撤离 2  隐蔽 3避迁 4 禁用食物
    show: false,
    path: _path01,
    fillcolor: "#ee91fc",
    polygon: "", // 多边形
  });
  sectorArea.value.push({
    // 5km~10km 扇形区域
    id: "5km10km" + i,// 预留每个区域id
    status: 0, // 0 正常 1 撤离 2  隐蔽 3避迁 4 禁用食物
    show: false,
    path: _path02,
    fillcolor: "#179188",
    polygon: "", // 多边形
  });
  sectorArea.value.push({
    // 50km~10km 扇形区域
    id: "10km50km" + i,// 预留每个区域id
    status: 0, // 0 正常 1 撤离 2  隐蔽 3避迁 4 禁用食物
    show: false,
    path: _path03,
    fillcolor: "#17fffc",
    polygon: "", // 多边形
  });
}

正式画多边形

      sectorArea.value.forEach((item: { path: any; fillcolor: any;id:string }) => {
        let _polygon = new AMap.Polygon({
          path: item.path,
          strokeColor: "green",
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillOpacity: 0.4,
          fillColor: item.fillcolor,
          zIndex: 150,
          bubble: true,
          extData:{
            id:item.id// 区域标记
          }
        });
        _polygon.on("mouseover", () => {
          _polygon.setOptions({
            //修改多边形属性的方法
            fillColor: "#F47378",
          });
        });
        _polygon.on("mouseout", () => {
          _polygon.setOptions({
            //修改多边形属性的方法
            fillColor: item.fillcolor,
          });
        });
        polygons.value.push(_polygon);
      });

将画的多边形添加进地图中

map.add(polygons.value);

最终效果就是这样
在这里插入图片描述

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

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

相关文章

rv1126-rv1109-读取mipi摄像头ID

1.有那个一个需求,需要读取mipi摄像头ID 起初,我以为很简单,实际非常复杂; 2.移植原有的逻辑,就是操作I2C函数读取ID寄存器,但是一直失败; 3.然后发现是电源没有打开;然后电源又是在DTS里面配置的 4.配置电源后发现要配置时钟 5.配置时钟后发现还要配置摄像头的上…

Vue框架学习笔记-7

Vue-cli项目中的mixin Vue-cli 项目中的 mixin 是一种强大的功能&#xff0c;允许你在多个组件之间共享可复用的方法和/或选项。Mixin 本质上是一个对象&#xff0c;它可以包含组件选项中的任意选项&#xff0c;如数据、方法、生命周期钩子等。当组件使用 mixin 时&#xff0c…

浙商证券社招入职人才测评:语言数字逻辑性格北森测评笔试题库高分答案、通关技巧

浙商证券作为一家综合性证券公司&#xff0c;其社会招聘的待遇情况包括但不限于以下几个方面&#xff1a;首先&#xff0c;公司提供具有竞争力的薪酬体系&#xff0c;其中应届生的平均薪资待遇大约在12K-20K之间&#xff0c;并且可能发放20个月的薪资&#xff0c;总包大约在25万…

好书推荐!这本Transformer书红的发紫,浅显易懂掌握大模型NLP技术!(附文档)

在大数据和人工智能时代&#xff0c;机器学习和深度学习已经成为各行各业解决问题的有效方法&#xff0c;自然语言处理&#xff0c;是深度学习的重要应用领域之一。 而自然语言处理这个研究领域在过去20年中发生了翻天覆地的变化&#xff0c;从传统的自然语言处理方法到深度学…

EcoDev Studio 与 gitlab【拉去项目,切换分支,再修改提交】

1 安装git工具 https://blog.csdn.net/mukes/article/details/115693833 2 创建空项目 3 推送gitlab 1、进入本地该项目目录下&#xff0c;右键Git Bash Here打开git命令窗口 2、初始化本地仓库&#xff1a; git init将本地项目的所有文件添加到暂存区&#xff1a; git a…

Django | 从中间件的角度理解跨站请求伪造(Cross-Site Request Forgey)[CSRF攻击]

文章目录 切入点案例测试views.py测试代码templates模板下的html文件配置路由运行服务 出现CSRF报错解决CRSF报错再次运行服务 查看结果 切入点 某些恶意网站上包含链接、表单按钮或者]avaScript,它们会利用登录过的用户在浏览器中的认证信息试图在你的网站上完成某些操作 Gj…

好用的无线可视耳勺推荐:四大超有性价比产品集锦!

在生活中&#xff0c;耳部清洁是我们常常会关注却又容易忽视细节的一项日常护理。传统的挖耳勺比如棉签等等&#xff0c;有着不可视的局限性和操作失误的潜在风险。随着科技发展&#xff0c;无线可视耳勺逐步走进我们的视野&#xff0c;它结合了挖耳功能和内置摄像头&#xff0…

循环结构(四)——循环嵌套

&#x1f680;欢迎互三&#x1f449;&#xff1a;程序猿方梓燚 &#x1f48e;&#x1f48e; &#x1f680;所属专栏&#xff1a;C教程&#x1f48e; &#x1f680;关注博主&#xff0c;后期持续更新系列文章 &#x1f680;如果有错误感谢请大家批评指出&#xff0c;及时修改 &a…

快速符合ISO26262产品认证——动力域L2监控方案精华分享

一、VCU应用层监控方案的ISO26262背景 “软件定义汽车”趋势下&#xff0c;更多汽车软件问题与消费者生命安全密切相关。而汽车行业ISO 26262《道路车辆功能安全》是一个国际安全标准&#xff0c;对安装在量产道路车辆上的电气、电子系统的功能安全进行了约束和规定&#xff0c…

C语言----约瑟夫环

约瑟夫环 实例说明&#xff1a; 本实例使用循环链表实现约瑟夫环。给定一组编号分别是4、7、5、9、3、2、6、1、8。报数初始值由用户输入&#xff0c;这里输入4&#xff0c;如图12.18所示&#xff0c;按照约瑟夫环原理打印输出队列。 实现过程&#xff1a; (1)在 VC6.0中创建…

整合springboot、mybatis-plus、做的电影的增删改查以及使用七牛云做图片的上传

一、建表 1.在数据库testdb库中新建一个movie表 2.表中的字段&#xff1a; mo_idmo_namemo_actormo_salespic_name 二、编写代码 1.第一步添加坐标 <properties><java.version>8</java.version></properties><dependencies><!--springspr…

一文带你快速了解——HAProxy负载均衡

一、HAProxy简介 1.1、什么是Haproxy HAProxy是法国开发者 威利塔罗(Willy Tarreau)在2000年使用C语言开发的一个开源软件是一款具备高并发(万级以上)、高性能的TCP和HTTP负载均衡器支持基于cookie的持久性&#xff0c;自动故障切换&#xff0c;支持正则表达式及web状态统计。…

用「画家流水线」的方式理解Transformer中间层

【导读】 Transformer架构层层堆叠&#xff0c;包含十几亿甚至几十亿个参数&#xff0c;这些层到底是如何工作的&#xff1f;当一个新奇的比喻——「画家流水线」&#xff0c;被用于类比并理解Transformer架构的中间层&#xff0c;情况突然变得明朗起来&#xff0c;并引出了一些…

基于 SpringCloud 分布式架构网上商城

目录 1绪论 4 1.1项目研究的背景 4 1.2开发意义 4 1.3课题研究现状 4 1.4项目研究内容与结构 5 2开发技术介绍 6 2.1Java技术 6 2.2 SpringCloud简介 6 2.3MySQL 介绍 7 2.4MySQL环境配置 7 2.5B/S架构 8 3系统分析 9 3.1可行性分析 9 3.1.1技术可行性 9 3.1.2经济可行性 9 3.…

C语言 ——— 结构体类型的声明、自引用、定义以及初始化

目录 结构体的声明 结构体的自引用 结构体的定义以及初始化 结构体的声明 结构体的概念&#xff1a; 结构体是一些值的集合&#xff0c;这些值称为成员变量&#xff0c;结构的每个成员可以是不同类型的变量 结构体的声明&#xff1a; 结构体声明的关键字&#xff1a;st…

【安卓】Service的基本用法

文章目录 Service简介启动和停止ServiceActivity和Service进行通信 Service简介 新建一个ServiceTest项目&#xff0c;然后右击com.example.servicetest→New→Service→Service。 每个Service中最常用到onCreate()、onStartCommand()和onDestroy()这3个方法其中onCreate()方法…

Tomcat 启动时出现 java.util.zip.ZipException: error in opening zip file

Tomcat启动 java.util.zip.ZipException: error in opening zip file 错误解决 今天做一个Tomcat的Demo时出现了一个小问题&#xff0c;也在网上查询了很多资料&#xff0c;遇到这个问题的人很少&#xff0c;基本上没有遇到过这种情况&#xff0c;在此记录一下。 报错信息 异…

5 C 语言常量的定义和分类、#define 和 const 定义常量的区别

目录 1 什么是常量 2 常量的分类 3 常量的定义 3.1 使用 #define 定义常量 3.1.1 介绍 3.1.2 定义格式 3.1.3 案例演示 3.1.4 执行时机 3.2 const 关键字 3.2.1 介绍 3.2.2 const 定义常量的格式 3.2.3 案例演示 3.2.4 执行时机 3.2.5 注意事项 4 #define 和 co…

Spring事务管理和事务传播机制详解

目录 一.简单理解事务 二.Spring中事务的实现 编程式事务 声明式事务 三.Transactional 详解 ▐ 异常回滚属性 rollbackFor ▐ 事务隔离级别 Isolation ▐ 事务的传播机制 propagation 一.简单理解事务 事务是⼀组操作的集合&#xff0c;是⼀个不可分割的操作。 事务会…

CORS解决前端跨域案例学习

跨域的概念不再解释&#xff0c;直接演示下出现跨域的情况&#xff1a; 前端代码&#xff08;index.html&#xff09;: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" conten…