openLayers 坐标转换 EPSG:3857和EPSG:4326区别

article/2025/11/3 14:02:02

fromLonLat() 方法是继承自ol.proj 这个类。fromLonLat 将坐标从经度/纬度转换为其他投影。

import { fromLonLat } from "ol/proj";
在 openlayers 中创建map时候会有个view 属性,该属性下面会存在一个center属性。这个属性就是设置中心位置的坐标。如果不设置就没有中心,也毫无意义。projection 属性指定坐标系的类型。

new View({
    projection:'EPSG:3857',//坐标系类型
    center: fromLonLat([104.912777, 34.730746]), //地图中心坐标
});

更多访问:https://openlayers.org/en/latest/apidoc/module-ol_proj.html

2. 什么是EPSG:3857坐标系
在openlayers 中默认的坐标就是google的摩卡托坐标,也就是我们经常看到的 EPSG:3857 坐标系。
EPSG:3857 的数据一般是这种的。[12914838.35,4814529.9],看上去相对数值较大。

3. 什么是EPSG:4326 坐标系
4326 WGS-84:是国际标准,GPS坐标(Google Earth使用、或者GPS模块)
EPSG:4326 的数据一般是这种的。[114.05,22.37]。

所以我们常常看到和用到的坐标系数据往往不是墨卡托坐标,而是EPSG:4326坐标系下的坐标数据。因为是常见的坐标。(这里说的是用到的数据是4326,不是说坐标系类型就要用的4326坐标系)这里有点绕,往后看慢慢就明白了。

3.1 百度使用的是EPSG:4326坐标系数据

4. EPSG:4326和EPSG:3857区别
结合前面所说的内容,往下看。
3.1 首先看下用EPSG:4326坐标类型去渲染的数据

因为使用的 projection 是 "EPSG:4326" 类型,可以看到 center 中的数据格式 也是 "EPSG:4326" 的数值格式。所以没有用 fromLonLat() 方法 进行转换。

let view = new View({
    projection: "EPSG:4326", //使用这个坐标系
    center: [104.912777, 34.730746], //地图中心坐标
    zoom: 4.5 //缩放级别
});

3.2 看下用EPSG:3857坐标类型去渲染的数据

前面说了默认 是 goole的 摩卡托 EPSG:3857 坐标系,所以我们可以不写。但是我们用到的 center 数据值格式 是 EPSG:4326格式(前面也说了是常见的数据源),所以我们需要使用 fromLonLat() 方法把 EPSG:4326格式数据转换为 EPSG:3857 数据格式

let view = new View({
    // projection: "EPSG:3857", //使用这个坐标系,默认为 3857,可以不写
    center: fromLonLat([104.912777, 34.730746]), // 数据格式4326转为3857
    zoom: 4.5 //缩放级别
});

对比下上面的两种坐标系渲染出来的map,可以明显的看到 EPSG:4326 感觉map 地图被上下压缩过一样。而 EPSG:3857 坐标系就很正常。这是因为他们的投影不同造成的。

所以总结下:在实际开发中,因为map源数据大部分都是EPSG:4326的数据源格式的数据,但是使用EPSG:4326的坐标系地图会出现被压缩的投影。所以我们都是采用 EPSG:3857的坐标系类型,把数据源转换位 EPSG:3857的数据源即可。


http://chatgpt.dhexx.cn/article/5epaZa7V.shtml

相关文章

openlayers6【十】EPSG:3857和EPSG:4326区别详解

文章目录 1. 写在前面2. 什么是EPSG:3857坐标系(投影坐标)3. 什么是EPSG:4326 坐标系(地理坐标)4. EPSG:4326和EPSG:3857区别(重点) 1. 写在前面 在我之前写的文章中,其实已经涉及到了这一点&a…

EPSG竟然是个“石油组织”?

概述 作为一名GISer的你一定在各大GIS软件内见到过EPSG这个名称,或者至少在各种教程、文献内见到过这个名词。这里便为大家介绍一下EPSG到底是什么,有什么作用以及怎么使用。 什么是EPSG EPSG全称European Petroleum Survey Group,EPSG是其…

地理信息epsg:4326 和epsg:3857

我们先来看看各自的坐标系,查询网址http://epsg.io 可以看到这两种投影是属于同一坐标系,就是wgs84。需要明确一点的是投影是想用不同的方式展示地图,由于地球是个不规则的椭圆,在做不同地区的地图的时候为了显示其对应的地理特征&#xff0c…

【EPS概述】

目录 一、EPS分类二、EPS基本原理三、EPS控制策略弱磁控制滑膜观测器直接转矩控制(DTC) 一、EPS分类 C-EPS:转向管柱助力式P-EPS:小齿轮助力式R-EPS:齿条式助力式 二、EPS基本原理 各种类型EPS系统的组成和工作原理基本相同&am…

GIS-坐标系-EPSG(二次整理)

中国地图-坐标系 EPSG的英文全称是European Petroleum Survey Group,中文名称为欧洲石油调查组织。 比如对于中国来讲,以地球的几何球心为中心的地图就是EPSG:4479,以地球的椭球焦点为中心就是EPSG:4480,此外还有EPSG:4490&…

ESPG(European Petroleum Survey Group)

数据转换器(栅格) ,数据转换器(矢量)转换数据时经常会看到EPSG的坐标系标识。那么什么是EPSG呢? ESPG(European Petroleum Survey Group)坐标系是一种用于地球表面测量和地理信息处…

生成小程序二维码(草料)

网站:草料二维码 格式:路径参数(参数值后台生成) 方式:可以单个;可以批量。 eg:pages/index/indexsign7BBCCC0rnqSyrXd5ZVoY78AAAAAAAAAA 步骤: 1. 确定生成二维码跳转的路径和参数值…

微信小程序分享朋友圈生成海报

微信小程序实现分享到朋友圈 分享朋友圈现在大家的通用做法就是通过Canvas生成一张图片后进行保存,然后自行转发朋友圈。最近项目有这个需求, 于是就记录一下。(老规矩,我的博客复制粘贴就好使) 如果想要海报上的二维码扫码完直…

微信小程序动态生成小程序码(云函数)

最近的需求是需要用户扫描指定二维码进去填写表单之类的需求(暗骂提需求的人) 看了下文档,嘿开发团队还真懂我们、 果断上手,然后问题又来了,这个返回值是二进制啊,好办!! 看代码 …

在线生成小程序码,微信生成带参数小程序码

一、 微信小程序码是什么 小程序码是微信自己推出的二维码, 可以通过扫描小程序码, 直接进入到对应的小程序页面。 普通的二维码是正方形的, 而小程序码是圆形, 更加容易让用户识别出来。 二、 在线生成微信小程序码 1&#xff09…

制作自己的微信小程序要怎么做?

现在不少人都想要制作自己的微信小程序,不管是企业还是商家都在咨询相关的问题。那么制作自己的微信小程序要怎么做?流程和费用分别又是怎么样的呢?下面个大家一起来看看。 步骤一:要有自己的小程序账号 首先我们需要有自己的小…

微信小程序公众平台如何生成小程序码

在微信小程序开放平台生成: 1.电脑打开链接下拉注册微信小程序开放平台:https://mp.weixin.qq.com/cgi-bin/wx 2.注册界面我就不多讲了,看着流程注册验证手机号,邮箱号什么的 3.注册后,打开登陆界面 https://mp.weixin.qq.com/ 进…

创建微信小程序

创建微信小程序。 这篇博客包括两个内容 1.创建微信小程序 2.查看微信小程序的Appid以及生成密钥 1.创建微信小程序 (1).https://mp.weixin.qq.com/cgi-bin/wx微信小程序官网网址 进入微信小程序官网后,页面的最下面有个 “注册按钮” --&…

微信小程序生成带动态参数二维码

首先说一下我的使用场景,用户可根据id生成这一条记录的二维码,其他人扫码直接跳转到小程序,显示这条记录的具体信息。 分两步:第一在微信公众号后台配置,第二利用canvas前端实现二维码展示,并接收参数做下…

生成无限制微信小程序码

生成无限制的微信小程序码,主要是通过后端请求微信的接口,然后微信会把小程序码返回来。 本文不讲详细的方法了,只讲其中的一些关键点,官方文档也附上去了,结合这些点看官方文档会比较方便。 方法: 获取…

微信生成小程序码

微信生成小程序码扫描唤醒小程序(2) 我做的是 _**带参数无限个数小程序码**,有什么问题或者错误,请及时指出! (有些问题我还没有搞懂!但是代码能跑,小程序码能跳转!)微信官方文档地址 微信公众平台配置说明 配置微信小程序后台(至今也不能跳转到开发版),登陆微信公…

微信小程序中把页面生成图片

这个问题我上网搜了一下,答案有多种,但是真正能用的没有几何。很多答案都是雷同,有的网友也不负责任,直接拿来照抄,自己也不跑一遍看看。哎,不说了,说多了全是泪。希望我们的技术达人在分享的时…

微信小程序之海报生成

前言&#xff1a;2.9.0 起支持一套新 Canvas 2D 接口&#xff08;需指定 type 属性&#xff09;&#xff0c;同时支持同层渲染&#xff0c;原有接口不再维护 参考文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html <!-- 海报 --&…

如何自己制作小程序?

现在小程序非常流行&#xff0c;很多人都想制作一个自己的小程序来卖货。以前制作小程序通常需要请小程序开发公司&#xff0c;而且需要每年给多少钱&#xff08;通常几百到几千&#xff09;。但随着微信越来越完善&#xff0c;现在无需找小程序服务商搭建&#xff0c;无需懂代…

微信小程序链接快速生成方法

文章目录 前言一、如何生成微信小程序链接&#xff1f;二、生成微信小程序链接步骤1.获取 URL Scheme2.获取 URL Link3.获取 Short Link4.短信打开小程序5.NFC 标签打开小程序 总结 前言 微信官方更新了链接跳转微信小程序的功能&#xff0c;在点击链接后即可直接跳转到小程序…