openLayers实战(八):坐标系及其转换

news2024/10/5 16:30:12

 

坐标系介绍

EPSG: 3857 --web地图,基于球体的、web墨卡托投影(伪墨卡托投影Pseudo-Mercator)的投影坐标系,范围为纬度85度以下,由于google地图最先使用而成为事实标准。至今,大多互联网地图都使用EPSG3857,主要是因为该投影是等角投影,适合地图定向及导航,但是纬度越高,面积变形越大。

EPSG: 4326 --全球通用,基于WGS84椭球的经纬度坐标系,大地坐标系,在 EPSG: 4326 坐标系中,经度表示位置的横向偏移量,范围为 -180 到 180,单位是度;纬度表示位置的纵向偏移量,范围为 -90 到 90,单位也是度。

      // 初始化地图配置
      this.map = new Map({
        target: this.mapDom, // 地图容器
        view: new View({
          center: [121.70185, 31.298777], // 地图中心点
          zoom: 15,
          minZoom: 14,
          maxZoom: 18,
          projection: "EPSG:4326", // 椭球
          extent: this.extent, // 限定范围
        }),

地图上的点是何坐标系

以 EPSG:4326 椭球坐标系为例

1.监听地图的事件得到的点位信息

如:

this.map.on("click", function()) // 点击
this.map.on("pointermove", function()) // 鼠标指针移动

得到的都是EPSG: 4326坐标系下的信息。

2.交互式绘制 interaction 的 draw

绘制出的圆形并不会考虑当前地图的椭球坐标系。这是因为 draw 方法默认使用的是平面坐标系,而不是地球的椭球坐标系。

3.圆形、多边形的坐标系转换

import * as turf from '@turf/turf';

// 假设你已经通过 'draw' 方法绘制了一个圆形对象 'circleFeature'

// 获取绘制的圆形对象的几何信息
var geometry = circleFeature.getGeometry();

// 将几何信息转换为椭球坐标系
var coords = geometry.getCoordinates();
var circleOnEllipse = turf.toWgs84(coords);

// 创建一个新的圆形对象,使用椭球坐标系
var circleFeatureOnEllipse = new Feature({
  geometry: new GeoJSON().readGeometry(circleOnEllipse)
});

// 将新的圆形对象添加到矢量源中
vectorSource.addFeature(circleFeatureOnEllipse);

 4.单点的坐标系转换

import * as turf from '@turf/turf';

const x1 = 123; // 假设的x坐标
const y1 = 45; // 假设的y坐标
const sourceCRS = 'EPSG:3857'; // 源坐标系(墨卡托投影坐标系)
const targetCRS = 'EPSG:4326'; // 目标坐标系(经纬度坐标系,WGS84)

// 创建一个点要素
const point = turf.point([x1, y1]);

// 进行坐标转换
const transformedPoint = turf.transformRotateScaleTranslate(
  point,
  0, // 旋转角度
  1, // 缩放比例
  [0, 0], // 平移向量
  sourceCRS,
  targetCRS
);

// 提取转换后的坐标
const [longitude, latitude] = turf.getCoord(transformedPoint);

console.log('经度:', longitude);
console.log('纬度:', latitude);

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

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

相关文章

分类预测 | MATLAB实现DBN-SVM深度置信网络结合支持向量机多输入分类预测

分类预测 | MATLAB实现DBN-SVM深度置信网络结合支持向量机多输入分类预测 目录 分类预测 | MATLAB实现DBN-SVM深度置信网络结合支持向量机多输入分类预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.分类预测 | MATLAB实现DBN-SVM深度置信网络结合支持向量机多输入分…

数据结构:二叉树的递归实现(C实现)

个人主页 : 个人主页 个人专栏 : 《数据结构》 《C语言》 文章目录 前言一、树的概念二、二叉树二叉树的概念二叉树的性质 三、二叉树链式结构实现二叉树节点定义创建二叉树节点遍历二叉树先序遍历二叉树(BinaryTreePrevOrder)中序遍历二叉树(BinaryTree…

论文阅读——Imperceptible Adversarial Attack via Invertible Neural Networks

Imperceptible Adversarial Attack via Invertible Neural Networks 作者:Zihan Chen, Ziyue Wang, Junjie Huang*, Wentao Zhao, Xiao Liu, Dejian Guan 解决的问题:虽然视觉不可感知性是对抗性示例的理想特性,但传统的对抗性攻击仍然会产…

java面试基础 -- 普通类 抽象类 接口

目录 抽象类语法 抽象类特性 普通类 & 抽象类 抽象类 & 接口 什么是接口 语法 接口方法 变量 接口特性 抽象类&接口的区别 抽象类语法 在Java中,一个类如果被 abstract 修饰称为抽象类,抽象类中被 abstract 修饰的方法称为抽象…

python-03(入门基础篇3——字符串 的 基本常见语法 以及 format的用法)

python-03(入门基础篇3——字符串 的 基本常见语法 以及 format的用法) 1. 前言1.1 体验python入门1.2 官网参考 2. 字符串简单入门2.1 简单介绍2.2 拼接字符串()和 重复字符串(*)2.3 相邻字符串自动拼接2.…

凭空销毁千万,揭秘nd4.eth大佬背后的故事

文/章鱼哥 出品/陀螺财经 在加密社区,千万资产的销毁,就在弹指之间,好似一场行为艺术。 上周,nd4.eth域名的不明持有者在没有任何公开解释的前提下销毁了价值约800余万美元的加密货币和高价值蓝筹NFT,引起了看客们的关…

区块链中slot、epoch、以及在slot和epoch中的出块机制,分叉原理(自己备用)

以太坊2.0中有两个时间概念:时隙槽slot 和 时段(周期)epoch。其中一个slot为12秒,而每个 epoch 由 32 个 slots 组成,所以每个epoch共384秒,也就是 6.4 分钟。 对于每个epoch,使用RANDAO伪随机…

时序预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测

时序预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测 目录 时序预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现SA-ELM模拟退火算法优化极限学习机时间序列预测 程序设计 完整…

windows上的docker自动化部署到服务器脚本

1、mvn install后,双击这个bat,实现docker build后上传到124服务器,并且重启124服务器 **echo offsetlocal:: 定义镜像名称和版本变量 set IMAGE_NAMEweb set IMAGE_VERSION1.3.1:: 清理本地文件 echo Cleaning up... del service-%IMAGE_N…

产品管理:理解、掌握要点

产品管理是什么? 产品管理是指通过使用各种方法和技术,有效地规划、组织、控制和监督整个产品生命周期的过程。它涉及到从产品的概念阶段开始一直到产品的上市和销售阶段的各个环节。在当今竞争激烈的市场中,一个成功的产品管理过程对企业的…

Vue学习笔记--004

Vue学习 一、scoped解决样式冲突 写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。 全局样式: 默认组件中的样式会作用到全局,任何一个组件中都会受到此样式的影响 局部样式: 可以给组件加上scoped 属性,可以 让样式只作用于当前组件 …

简单的洗牌算法

目录 前言 问题 代码展现及分析 poker类 game类 Text类 前言 洗牌算法为ArrayList具体使用的典例,可以很好的让我们快速熟系ArrayList的用法。如果你对ArrayList还不太了解除,推荐先看本博主的ArrayList的详解。 ArrayList的详解_WHabcwu的博客-CSD…

nn.embedding会被反向传播更新吗?

https://developer.aliyun.com/article/1191215 这样是不可更新,但被我注释掉了。

【C++ 学习 ⑭】- 详解 stack、queue 和 priority_queue 容器适配器

目录 一、详解 C STL 容器适配器 1.1 - 什么是容器适配器? 1.2 - 容器适配器的种类 二、详解 C STL deque 容器 2.1 - deque 的原理介绍 2.2 - deque 的优缺点 三、详解 stack 容器适配器 3.1 - stack 的基本介绍 3.2 - stack 的成员函数 3.3 - stack 的模…

live555在Windows WSL2中编译、运行,搭建RTSP流服务器

文章目录 1. 背景2. 实施步骤2.1 下载live555安装包2.2 解压压缩包2.3 编译源码2.3 安装ffmpeg2.4 安装opencv-python2.5 视频文件格式转换2.6 启动推流2.6 安装VLC,验证 3. 用opencv-python接口接收视频流参考 1. 背景 想要通过RTSP往opencv的接口中推流&#xff…

富文本中的参数如何设置大小?

富文本里如果直接显示的数据可以随意调节大小,颜色等格式. 但是如果数据是动态的参数 就无法随意设置参数的格式了.当字数过多时就会出现显示不全,有没有大佬知道如何解决? wangEditor set HTML

Flink 数据集成服务在小红书的降本增效实践

摘要:本文整理自实时引擎研发工程师袁奎,在 Flink Forward Asia 2022 数据集成专场的分享。本篇内容主要分为四个部分: 小红书实时服务降本增效背景Flink 与在离线混部实践实践过程中遇到的问题及解决方案未来展望 点击查看原文视频 & 演…

【学习笔记之vue】These dependencies were not found:

These dependencies were not found:方案一 全部安装一遍 我们先浅试一个axios >> npm install axios 安装完报错就没有axios了,验证咱们的想法没有问题,实行! ok

chapter 3 Free electrons in solid - 3.2 量子自由电子理论对一些现象的解释

3.2 自由电子气的热容 Heat capacity of free electron gas 3.2.1 计算自由电子的热容 Calculation of Heat Capacity of free Electrons T>0K, total energy of free electrons: E ∫ E d N 3 5 N e E F 0 [ 1 5 12 π 2 ( k B T E F 0 ) 2 ] E \int EdN \frac{3}{5}…

Unable to find resource t64.exe in package pip._vendor.distlib报错问题解决

Unable to find resource t64.exe in package pip._vendor.distlib报错问题解决 问题报错具体内容具体解决方案解决方法一解决方法二 问题报错具体内容 想要对python的版本进行一个升级,使用如下语句 python -m pip install --upgrade pip出现如下报错 Unable to find reso…