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

 

坐标系介绍

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);

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android 远程真机调研

背景 现有的安卓测试机器较少,很难满足 SDK 的兼容性测试及线上问题(特殊机型)验证,基于真机成本较高且数量较多的前提下,可以考虑使用云测平台上的机器进行验证,因此需要针对各云测平台进行调研、比较。 …

【环境配置】Windows10终端和VSCode下能够直接打开Anaconda-Prompt

很多小伙伴在 Windows 下做深度学习开发的时候,遇到终端没有在 Linux 那么方便,那么我们现在就可以来设置一下;这样我们也可以在文件夹内部右键打开终端,也可以在 VS Code 里面新建一个虚拟环境的控制台;这里主要是针对…

VS2015项目中,MFC内存中调用DLL函数(VC6生成的示例DLL)

本例主要讲一下,用VC6如何生成DLL,用工具WinHex取得DLL全部内容,VC2015项目加载内存中的DLL函数,并调用函数的示例。 本例中的示例代码下载,点击可以下载 一、VC6.0生成示例DLL项目 1.新建项目,…

爬虫逆向实战(十四)--某培训平台登录

一、数据接口分析 主页地址:某培训平台 1、抓包 通过抓包可以发现登录是表单提交到j_spring_security_check 2、判断是否有加密参数 请求参数是否加密? 通过查看“载荷”模块可以发现有一个j_password加密参数 请求头是否加密? 无响应是…

SAP MM学习笔记23-购买发注的账户分配类型(勘定Category)

SAP中控制财务凭证过账科目的是 账号分配类型(勘定Category)栏目。 ・账号分配类型(勘定Category)有: 1,K 原价Center(成本中心。用于消耗物料采购 的过账) 2,E 得意先…

TPAMI, 2023 | 用压缩隐逆向神经网络进行高精度稀疏雷达成像

CoIR: Compressive Implicit Radar | IEEE TPAMI, 2023 | 用压缩隐逆向神经网络进行高精度稀疏雷达成像 注1:本文系“无线感知论文速递”系列之一,致力于简洁清晰完整地介绍、解读无线感知领域最新的顶会/顶刊论文(包括但不限于Nature/Science及其子刊;MobiCom, Sigcom, MobiSy…

C++之string类的使用

C之string类的使用 1.为什么要学string类2.标准库中的string类3.string类的接口的使用3.1默认成员函数3.2容量操作3.3访问操作3.4遍历操作3.5修改操作3.6字符串操作3.7非成员函数 1.为什么要学string类 我们所学的字符串是以’\0’结尾的一些字符的集合,为了操作方…

工业视觉相机镜头选型方法

一、相机选型 1、首先,根据检测需求确定选用黑白/彩色、面阵/线阵相机,接口类型一般选择GigE 2、确定检测精度要求(最小特征尺寸mm)、视野范围,一个测量精度对应几个像素数(一般取3-5) 3、计…

uni-app根据经纬度逆解析详细地址

uni-app中的getLocation()方法可以获取到用户当前的地理位置(经纬度)、速度。 但是返回参数中的address在app中才会显示,小程序中不会显示,所以我们需要进行逆解析其地址,解析出它的地址信息。 1.首先要在腾讯位置服务…

【Redis从头学-4】Redis中的String数据类型实战应用场景之验证码、浏览量、点赞量、Json格式存储

🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 📖所属专栏:Re…

Intelij IDEA 配置Tomcat解决Application Server不显示的问题

今天搭建war工程时部署项目发现,IDEA的控制台没有Application Servers,在网上查了一下,总结几个比较好的解决方法,为了方便自己和其他人以后碰到相同的问题,不再浪费时间再次寻找解决办法。 Intelij IDEA 配置Tomcat时…

如何做好科技文献资料的翻译!

我们知道,科技文献是工程技术人员的重要参考文献,翻译科技文献资料有助于促进国内外科技知识和技术的传播。那么,如何做好科技文献资料的翻译,专业科技文献翻译哪家好? 据了解,科技文献翻译是一种以应用为主…

Nginx虚拟主机(server块)部署Vue项目

需求 配置虚拟主机,实现一个Nginx运行多个服务。 实现 使用Server块。不同的端口号,表示不同的服务;同时在配置中指定,Vue安装包所在的位置。 配置 Vue项目,放在 html/test 目录下。 config中的配置如下&#xf…

接口测试,负载测试,并发测试,压力测试区别

接口测试 1.定义:接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换,传递和控制管理过程,以及系统间的相互逻辑依赖关系等。 2.目的&#xf…

Matlab中图例的位置(图例放在图的上方、下方、左方、右方、图外面)等

一、图例默认位置 默认的位置在NorthEast r 10; a 0; b 0; t0:0.1:2.1*pi; xar*cos(t); ybr*sin(t); A1plot(x,y,r,linewidth,4);%圆 hold on axis equal A2plot([0 0],[1 10],b,linewidth,4);%直线 legend([A1,A2],圆形,line)二、通过Location对legend的位置进行改变 变…

无涯教程-Perl - sysread函数

描述 该函数等效于C /操作系统函数read(),因为它绕过了诸如print,read和seek之类的函数所采用的缓冲系统,它仅应与相应的syswrite和sysseek函数一起使用。 它从FILEHANDLE中读取LENGTH个字节,并将输出放入SCALAR中。如果指定了OFFSET,则将数据从OFFSET字节写入SCALAR,从而有效…

小航助学GESP_C++一级模拟测试卷第2套(含题库答题软件账号)

需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统(含题库答题软件账号)_程序猿下山的博客-CSDN博客 需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统(含题库答题软件账号)_程序猿下山的博客-CSD…

【C++笔记】C++之类与对象(中)

【C笔记】C之类与对象(中) 1、类的构造函数1.1、构造函数的基本用法1.2、构造函数的7个特性 2、类的析构函数2.1、析构函数的基本用法2.2、析构函数的6个特性 3、类的拷贝构造函数3.1、拷贝构造的基本用法3.2、拷贝构造的“无限套娃”陷阱3.3、深拷贝与浅…

通过css设置filter 属性,使整个页面呈现灰度效果,让整个网页变灰

通过css设置filter 属性设置页面整体置灰 效果图: 通过设置 filter 属性为 grayscale(100%)&#xff0c;页面中的所有元素都会被应用灰色滤镜效果&#xff0c;使整个页面呈现灰度效果。 <style type"text/css"> html { filter: grayscale(100%); -webkit-f…

《Linux从练气到飞升》No.15 Linux 环境变量

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…