openlayers 路线规划 高德坐标转wgs84 wgs84转天地图

在https://blog.csdn.net/qq_36287830/article/details/136321365改善而来的 需要进行坐标转换 不转换你画的线和实际数据是无法一一对应的 会出现偏移

关键代码 模拟请求后获取到数据场景

    fetch('./a.json').then(async (res) => {//等待数据格式化为Jsonlet json = await res.json()//新建图层组 管理线图层let pathLayerGroup = new ol.layer.Group({name: "path"})//数据遍历路线json.data.path_list.forEach((item, ind) => {//新建图层 为每一根新建一个图层let lineLayer = new ol.layer.Vector({//数据源先为空source: new ol.source.Vector(),//结合前面的话 这里需要设置层级 否则看不到 给个合适的值就可以zIndex: 666,//样式style: new ol.style.Style({//填充颜色stroke:new ol.style.Stroke({color: ind == 0 ? '#459c50' : '#459c5066', // 根据渲染顺序 决定主线路 设置线条颜色width: 10 // 设置线条宽度}),}),name: "path" + ind//给个名字 后面为点击事件做准备})//先将数据用flatMap方法展开层级 然后遍历for (let path of item.path.flatMap(ite => ite.segments)) {let line = []//需要对字符串数据转为数组let coor = JSON.parse(path.coor)//xyxy数据是这样排列的 所以需要步进2取值for (var j = 0; j < coor.length; j += 2) {//数据回填为坐标值 先转为wgs84后再使用line.push(gcj02towgs84(coor[j], coor[j + 1]));}//将线添加进去lineLayer.getSource().addFeature(new ol.Feature({geometry: new ol.geom.LineString(line)}))}//将处理好的图层添加到图层组pathLayerGroup.getLayers().push(lineLayer)})//渲染图层组map.addLayer(pathLayerGroup);//监听渲染完成事件map.once('rendercomplete', function () {// 按坐标生成点const pointA = turf.point([112.551049, 37.870552]);const pointB = turf.point([116.397604, 39.907694]);// 计算中心点const midPoint = turf.midpoint(pointA, pointB);//计算缩放级别const zoomLevel = Math.round(Math.log2(turf.distance(pointA, pointB)));//动画 修改位置map.getView().animate({zoom: zoomLevel, duration: 1000});map.getView().animate({center: midPoint.geometry.coordinates, duration: 1000});});//监听点击事件map.on('click', (event) => {//遍历所有的点击map.forEachFeatureAtPixel(event.pixel, (feature, layer) => {//只可以操作点图层为中含有path的路径图层if (layer.get('name').includes('path') && feature) {//循环所有的路径图层for (const featureElement of pathLayerGroup.getLayersArray()) {//如果和点击的是同一个图层 则修改样式if (layer.get('name') == featureElement.get('name')) {layer.getStyle().getStroke().setColor('#459c50')} else {//否则还原样式featureElement.getStyle().getStroke().setColor('#459c5066')//还原后调用修改完成 重新渲染featureElement.changed()}}//调用图层的修改完成方法 重新渲染layer.changed()}});//禁止冒泡event.stopPropagation();})})

下面坐标转换文件

var gcj02towgs84 = function (lng, lat) {var a = 6378245.0;var ee = 0.00669342162296594323;if (out_of_china(lng, lat)) {return [lng, lat];} else {var dlat = transformlat(lng - 105.0, lat - 35.0);var dlng = transformlng(lng - 105.0, lat - 35.0);var radlat = lat / 180.0 * Math.PI;var magic = Math.sin(radlat);magic = 1 - ee * magic * magic;var sqrtmagic = Math.sqrt(magic);dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * Math.PI);dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * Math.PI);var mglat = lat + dlat;var mglng = lng + dlng;return [lng * 2 - mglng, lat * 2 - mglat];}
};var transformlat = function (lng, lat) {var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0;ret += (20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin(lat / 3.0 * Math.PI)) * 2.0 / 3.0;ret += (160.0 * Math.sin(lat / 12.0 * Math.PI) + 320 * Math.sin(lat * Math.PI / 30.0)) * 2.0 / 3.0;return ret;
};var transformlng = function (lng, lat) {var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0;ret += (20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin(lng / 3.0 * Math.PI)) * 2.0 / 3.0;ret += (150.0 * Math.sin(lng / 12.0 * Math.PI) + 300.0 * Math.sin(lng / 30.0 * Math.PI)) * 2.0 / 3.0;return ret;
};var out_of_china = function (lng, lat) {return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
};

最后模拟的json数据
文件有点大 绑了个资源 文章顶上看

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

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

相关文章

【C++第三课 - 类和对象中】构造函数、析构函数、拷贝构造函数

目录 类的6个默认成员函数构造函数自己写的构造函数默认生成的构造函数 析构函数概念特征 拷贝构造函数特征 运算符重载 、 >、 < 赋值重载Date类的完善构造函数的完善用复用 类的6个默认成员函数 默认成员函数&#xff1a;不写编译器也会默认生成一份 构造函数 自己…

利用Python批量替换文档中特定参数的数值

情况&#xff1a;有一份文档需要将其中252个不同值的"sza“替换为另外一组数据 &#xff1b; 其中&#xff0c;替换参数值.txt 的格式就是把要替换的数据粘贴到 txt中&#xff0c;成一列就可以了&#xff1b; PS&#xff1a;要是想改文本文档里的其他参数&#xff0c;把代…

UnityShader——09数学知识3

方阵 行与列数量相等的矩阵,n*n阶矩阵 对角矩阵 当对角线以外的矩阵内元素全为0&#xff0c;则称之为对角矩阵&#xff0c;对角矩阵的前提是必须是方阵 单位矩阵 对角线元素全为1&#xff0c;其余元素全为0&#xff0c;属于对角矩阵的一部分 矩阵和向量 把1 * n阶矩阵称…

多个地区地图可视化

1. 配置Json文件 1.1 获得每个省份的json数据 打开 阿里云数据可视化平台 主页。 在搜索框中输入所需省份。 将json文件下载到本地。 1.2 将各省份的json数据进行融合 打开 geojson.io 主页 点击 open&#xff0c;上传刚刚下载的 json 文件&#xff0c;对多个省份不断…

【CSP试题回顾】201409-1-相邻数对

CSP-201409-1-相邻数对 解题代码 #include <iostream> #include <vector> using namespace std;vector<int>arr; int num;int main() {ios_base::sync_with_stdio(false);cin.tie(0);cout.tie(0);int n;cin >> n;for (int i 0; i < n; i){int t;…

设计模式总结(三)

上一篇总结了设计模式的创建型模式&#xff0c; 接下来总结一下设计模式的几种结构型模式。 1. 适配器模式 适配器模式允许将一个类的接口转换成客户端所期望的另一个接口。适配器模式通常用于以下情况&#xff1a; 当你需要使用一个已经存在的类&#xff0c;但是它的接口与你…

不愧是华为出来的,太厉害了...

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 实习去了博彦科技&#xff08;外包&#xff09;&#xff0c;做的…

设计模式笔记——建造者模式

设计模式&#xff08;创建型&#xff09;—— 建造者模式 这是一个学生类&#xff0c;它有四个属性&#xff0c;通过构造方法创建它的对象&#xff0c;我们需要填入四个参数&#xff0c;这就导致创建对象的代码有点长&#xff08;如果他有更多属性时&#xff0c;那会更加恐怖&…

赋能中国制造,大道云行发布智能制造分布式存储解决方案

《中国制造2025》指出&#xff0c;“制造业是国民经济的主体&#xff0c;是立国之本、兴国之器、强国之基。” 智能制造引领产业提质增效 智能制造是一种利用先进的信息技术、自动化技术和智能技术来优化和升级制造业生产过程的方法。它将人工智能、大数据、物联网、机器学习等…

算法竞赛STL:map的使用方法

算法竞赛STL&#xff1a;map的使用方法 map 容器描述&#xff1a; map是一种关联容器&#xff0c;它存储的元素是键值对&#xff0c;键和值可以是任意类型。map内部的元素按照键的顺序进行排序&#xff0c;排序的规则由比较函数决定。 使用方法&#xff1a; 首先&#xff0c…

【扩散模型系列2】DiT 《Scalable Diffusion Models with Transformers》论文阅读

文章目录 摘要1. 前言2. 相关工作TransformersDDPMs架构复杂度 3. 扩散Transformer3.1 准备知识扩散公式Classifier-free GuidanceLDMs 3.2. Diffusion Transformer Design SpacePatch化DiT模块设计模型大小Transformer Decoder 4. 实验设置训练扩散评估指标计算 5. 实验DiT bl…

【前端】登陆页面:记住密码、设置cookie、加密

将保存在cookie中的密码自动填入表单&#xff1a;库js-cookie // login.vue getCookie() {const username Cookies.get("username");const password Cookies.get("password");const rememberMe Cookies.get(rememberMe)this.loginForm {username: use…

Material UI 5 学习01-按钮组件

Material UI 5 学习01-按钮组件 一、安装Material UI二、 组件1、Button组件1、基础按钮2、variant属性3、禁用按钮4、可跳转的按钮5、disableElevation属性6、按钮的点击事件onClick 2、Button按钮的颜色和尺寸1、Button按钮的颜色2、按钮自定义颜色3、Button按钮的尺寸 3、图…

MacOS包管理工具homebrew使用教程

MacOS包管理工具homebrew使用教程 1.概述与安装2.基本使用3.其他常用命令 1.概述与安装 homebrew是Mac OS X上的强大的包管理工具&#xff0c;可以高效管理各种软件包 安装&#xff1a; 1、安装xcode&#xff1a; xcode-select --install2、一行命令下载&#xff1a; /bin…

DreamTalk:单张图像即可生成逼真人物说话头像动画,助力AI数字人落地

“DreamTalk: When Expressive Talking Head Generation Meets Diffusion Probabilistic Models” DreamTalk是一个基于扩散的音频驱动的富有表现力的说话头生成框架&#xff0c;可以生成不同说话风格的高质量的说话头视频。DreamTalk对各种输入表现出强大的性能&#xff0c;包…

Thingsboard本地源码部署教程

本章将介绍ThingsBoard的本地环境搭建&#xff0c;以及源码的编译安装。本机环境&#xff1a;jdk11、maven 3.6.2、node v12.18.2、idea 2023.1、redis 6.2 环境安装 开发环境要求&#xff1a; Jdk 11 版本 &#xff1b;Postgresql 9 以上&#xff1b;Maven 3.6 以上&#xf…

vue实现循环滚动列表

本文章使用 vue-seamless-scroll 为大家分享了vue实现循环滚动列表的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下&#xff1a; vue实现循环滚动列表 1.安装插件 vue-seamless-scroll vue-seamless-scroll 实例文档 npm install vue-seamless-scroll --save 2.HTM…

代码随想录算法训练营Day50 | 123.买卖股票的最佳时机 III、188.买卖股票的最佳时机 IV

123.买卖股票的最佳时机 III 思路与 121.买卖股票I 一脉相承&#xff0c;一次买卖有2种状态&#xff08;持有/不持有&#xff09;&#xff0c;那么两次买卖就有4种状态&#xff08;第一次持有/不持有、第二次持有/不持有&#xff09; 1、DP数组定义&#xff1a; dp[i][j]为当前…

【Java】Base理论的核心思想和理论三要素

目录 简介 BASE 理论的核心思想 BASE 理论三要素 1. 基本可用 2. 软状态 3. 最终一致性 总结 简介 BASE 是 Basically Available&#xff08;基本可用&#xff09; 、Soft-state&#xff08;软状态&#xff09; 和 Eventually Consistent&#xff08;最终一致性&#xf…

深度强化学习系列【2】- 贝尔曼方程和马尔可夫决策过程

引言: 一直想做点强化学习相关的内容,但是对于其原理一直不是太明了,相比于编程实现,懂得算法部分的机理与理论也是至关重要的。网上找的一些资料都在强调贝尔曼方程和马尔可夫决策过程在强化学习中的作用,但是介绍都不够充分。 另外,在知乎【1】上看到一个说法,说 强化学…