Vue+OpenLayers7入门到实战：OpenLayers地图默认使用什么投影? 要如何更改OpenLayers地图的投影？

原创 已于 2024-03-09 21:30:00 修改 · 796 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #javascript #OpenLayers #地图投影 #OpenLayers7更改投影

于 2024-01-23 14:48:34 首次发布
本文介绍了OpenLayers地图默认使用Web墨卡托投影，并详细解释了地图投影的概念。同时，提供了如何在OpenLayers7中更改地图投影的方法，包括依赖项的安装和示例代码。

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

Vue+OpenLayers7入门到实战

OpenLayers地图默认使用什么投影?
在回答这个问题之前，我们需要了解什么是地图投影。

什么是地图投影？

地图投影是将球面地图上的三维地理坐标系（经纬度）转换成平面地图上的二维坐标系的过程。由于地球是一个近似的椭球体，而平面地图是一个二维表面，因此需要采用适当的投影方式来实现这种转换。

更多地图投影知识请参考博主另一篇文章：《GIS入门，什么是地图投影，地图投影有哪些类型，墨卡托投影属于哪一种类型的投影，为什么OpenLayers地图默认使用墨卡托投影》

OpenLayers 使用什么地图投影？

OpenLayers默认使用的是Web 墨卡托投影 （EPSG：3857）。

使用 OpenLayers 创建的每个地图(Map)都有一个视图（View），并且每个视图（View）都将具有投影(projection)。由于地球是一个三维的，近圆

了解本专栏 订阅专栏 解锁全文
OpenLayers6入门，OpenLayers加载google街景地图
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
08-17 675
本章讲解OpenLayers加载google街景地图，无需科学上网，也可以正常访问瓦片。
OpenLayers6入门，vue项目集成并使用OpenLayers地图的两种方式
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-10 6708
虽然两种方式最终实现功能是一样的，但是当代码越来越多，业务越来越复杂，后面代码分离方式是最优选，可以实现数据和地图功能的解耦。而第一种适合业务简单时快速实现。当然博主还是推荐第二种分离方式，更加优雅。如果您有更好的办法，欢迎在评论区评论。
Vue结合Openlayers示例
此爱如少年
10-19 9230
文章目录1、简单示例1.1创建一个mapView组件1.2 创建一个Vue实例，并注册mapView组件1.3在页面中应用2、地图配置3、npm 构建3.1 安装openlayers3.2 在mapView组建中导入相关模块 1、简单示例 先看下以引入< JavaScript >的方式的使用方法 1.1创建一个mapView组件 mapView.js export default { ...
13-openlayers设置投影
最新发布
fxshy的博客
05-15 474
13-openlayers设置投影
vue-----openlayers
一星程序饲养员
10-31 467
重点：引入src时，需要在components中定义一个createElement。
Vue+OpenLayers7入门到实战：OpenLayers7地图整合到Vue项目中的两种方式
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 724
OpenLayers本身已经是支持模块化，所以引入vue项目很简单。在vue中使用OpenLayers，最简单的是混合方式。直接在vue项目中和前端代码混在一起写，适合业务简单的项目。另一种是与前端代码分离的方式，前端写前端的代码。GIS写GIS的代码，各写各的，互不影响。最后前端以模块化的方式使用地图功能代码，这样可以实现gis地图功能代码复用，引入其他地方也可以复用。虽然两种方式最终实现功能是一样的，但是当代码越来越多，业务越来越复杂，后面代码分离方式是最优选，可以实现数据和地图功能的解耦。
Vue+OpenLayers7入门到实战：OpenLayers7加载天地图
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
02-02 1012
本章介绍如何使用OpenLayers7在地图上加载天地图.天地图瓦片访问需要先到天地图申请key。天地图官网链接本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）
Vue+OpenLayers7入门到实战：html原生网页如何使用OpenLayers7地图
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 784
尽管现在大部分网页都是使用Vue或者React开发了，但是还是有不少开发者使用的是网页原生html进行开发，或者是老项目维护的需要，所以为了照顾使用html原生网页的同学们，本章简单讲解一下如何使用原始html网页情况下使用OpenLayers7。《Vue+OpenLayers7：快速搭建Vue+OpenLayers7地图脚手架项目。从零开始构建Vue项目并整合OpenLayers7.5.2》。
Vue+OpenLayers7入门到实战：OpenLayers如何使用全屏控件，来实现地图容器的全屏和退出全屏功能
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-16 398
本章介绍如何使用OpenLayers7在地图上使用地图全屏控件，来控制地图容器的全屏和退出全屏的功能。注意：这里的全屏控件全屏指的是地图容器全屏，并非整个网页全屏。《Vue+OpenLayers7入门到实战：OpenLayers如何实现地图全屏和退出全屏操作，实现指定网页节点全屏和退出全屏》
Vue+OpenLayers6实战进阶专栏目录，Vue+OpenLayers实战案例，Vue+OpenLayers6实战教程
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
07-31 2574
本篇作为Vue整合OpenLayers实战进阶教程的目录，用于整理汇总专栏所有文章，方便查找。本专栏是讲解主流前端框架Vue整合前端最流行的JS二维地图引擎之一OpenLayers的实战教程。
vue整合openlayers.zip
05-26
作为实战中vue+openlayers+geoserver文章的资源文件
vuelayers-与OpenLayers一起使用的Vue 2组件。-Vue.js开发
05-27
具有OpenLayers概述功能的VueLayers Web地图Vue组件VueLayers是将OpenLayers概述功能强大的OpenLayers API引入VueLayers Web map Vue组件的组件库。世界。 它可以显示带有从不同来源加载的平铺，栅格或矢量图层的地图。 版本注：您正在寻找即将发布的v0.12版本的README文件。 要查看当前v0.11版本的README文件，请切换至v0.11.x分支。 VueLayers分支Vue OpenLayers NPM标签当前为0.12 v0.12。
Vue + OpenLayers 实现高德地图的 4 种加载方式
TechNovaX的博客
09-16 1727
本文介绍了在 Vue 中使用 OpenLayers 加载高德地图的四种方式，包括使用高德地图 JavaScript API、Web 服务 API、瓦片服务和静态地图 API。高德地图是一款优秀的地图服务，而 Vue 和 OpenLayers 则分别是流行的前端框架和地图库。本文将介绍如何在 Vue 中使用 OpenLayers 加载高德地图，并提供了四种不同的加载方式供开发者选择。高德地图还提供了瓦片服务，我们可以使用 OpenLayers 加载这些瓦片并显示地图。四、加载方式三：使用高德地图瓦片服务。
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2699
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
Vue+OpenLayers：动态管理图层组中的图层
ByteZenith的博客
08-13 477
Vue.js作为一种流行的JavaScript框架，搭配OpenLayers这个功能强大的开源地图库，我们可以轻松地实现图层的添加、删除、显示和隐藏等操作。本文将介绍如何使用Vue和OpenLayers来实现动态管理图层组中的图层，并提供相应的源代码供参考。通过以上的代码示例，我们可以实现在Vue项目中使用OpenLayers动态管理图层组中的图层。接下来，我们需要创建一个Vue组件，在该组件中初始化地图，并实现图层的添加、删除、显示和隐藏等操作。方法首先创建了一个地图容器，并在其中添加了一个空图层组。
Vue+OpenLayers实现图形绘制和获取要素信息
CodeWhizZ的博客
08-16 359
综上所述，本文介绍了如何结合Vue.js和OpenLayers实现图形绘制和获取要素信息的功能。通过使用OpenLayers提供的交互工具和事件监听，我们可以轻松地在地图上绘制各种类型的图形，并获取其相关信息。在OpenLayers中，每个绘制的要素都有一个唯一的id和geometry属性，可以使用这些属性来获取要素的信息。在上述代码中，我们通过监听地图的click事件，使用forEachFeatureAtPixel方法，在点击位置获取到要素，并输出其id和geometry信息。
012：vue+openlayers 加载Stamen地图（3种形式）
大剑师兰特的GIS世界
08-09 1094
本示例的目的是介绍演示如何在vue+openlayers中添加Stamen地图，并含多种的表现形式。
VUE+Openlayers入门01
weixin_41321355的博客
09-15 286
1、初始化Vue项目 此处不再赘述，不会初始化的请移步：如何搭建一个vue项目(完整步骤) 多说一句，完成vue项目的初始化后，可以在App.vue中修改代码如下（为何要这样修改，后面代码的注释中会描述）： <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </
Vue+OpenLayers学习系列（一）OpenLayers 总体介绍+切换地图底图
Ocean111best的博客
08-02 6264
一、OpenLayers 数据组织 OpenLayers 的地图数据通过图层（Layer）进行组织渲染，然后通过数据源（Source）设置具体的地图数据来源。 Layer 可看作渲染地图的层容器，具体的数据需要通过 Source 设置。 Source 和 Layer 是一对一的关系。每一个 Layer 里面需要一个 Source，然后把 Layer 添加到 Map 上，就可以显示出来了。 地图数据根据数据源（Source）可分为 Image、Tile、Vector 三大类型的数据源类，对应设置到地图
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值