Vue+OpenLayers7入门到实战：OpenLayers7地图整合到Vue项目中的两种方式

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

#vue.js #前端 #javascript #OpenLayers #OpenLayers7 #Vue整合ol7

于 2024-01-24 16:13:14 首次发布
本文详细介绍了如何将OpenLayers7.x整合到Vue2.x和Vue3.x项目中，包括直接混合引入和代码分离两种方式。通过实例代码展示这两种方法的实现过程，强调代码分离在复杂项目中的优势，推荐使用该方式提高代码的可维护性和复用性。

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

本章讲解如何把OpenLayers7.x版本的地图整合到Vue项目中，Vue2.x和Vue3.x都适用。
Vue+OpenLayers7入门到实战

一、前言

OpenLayers本身已经是支持模块化，所以引入vue项目很简单。
在vue中使用OpenLayers，最简单的是混合方式。直接在vue项目中和前端代码混在一起写，适合业务简单的项目。
另一种是与前端代码分离的方式，前端写前端的代码。GIS写GIS的代码，各写各的，互不影响。最后前端以模块化的方式使用地图功能代码，这样可以实现gis地图功能代码复用，引入其他地方也可以复用。

二、如何引入OpenLayers到Vue项目

如果对Vue不太熟悉的同学可以参考《Vue+OpenLayers7，快速搭建Vu

了解本专栏 订阅专栏 解锁全文
Vue+OpenLayers7入门到实战：Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-29 460
本章介绍如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。也即Openlayers根据多个点坐标生成一个矩形可视范围，并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内，则调整地图中心点；如果不在，则调整地图可视区域到对应矩形可视范围。
Vue+OpenLayers7入门到实战：OpenLayers懒加载瓦片，点击事件后才开始加载瓦片，初始化地图时不加载瓦片
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-12 474
本章介绍如何使用OpenLayers7怎么在地图初始化时不加载瓦片，通过事件触发才开始懒加载地图瓦片图层。
7. OpenLayers 实现矢量元素编辑功能（结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-25 1601
在本教程中，我们将向您展示如何在Vue和OpenLayers中实现矢量要素的编辑功能。我们将在一个已有的Vue和OpenLayers项目中添加编辑交互。交互实例，并设置要素来源，现在只需将鼠标放置在要编辑元素的边缘即可拖拽鼠标实现编辑元素。在上述代码中，我们创建了一个新的。方法中，我们将创建一个新的。
Vue+OpenLayers7入门到实战：OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-11 549
本章介绍如何使用OpenLayers7在地图上监听点击事件，以及监听地图点击事件后进行简单弹框并获取当前点击位置的经纬度并显示wgs84坐标位置和度分秒格式经纬度信息。
vue集成openlayers
呱呱的博客
04-28 6177
下载依赖 cnpm i -S ol 创建地图文件 <div class="map"></div> 按需引入相应的API，具体查看官方文档 <script> import Map from "ol/Map"; import View from "ol/View"; // 添加图层 import TileLayer from "ol/layer/Tile"...
Vue+OpenLayers7入门到实战：OpenLayers7加载天地图
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
02-02 1013
本章介绍如何使用OpenLayers7在地图上加载天地图.天地图瓦片访问需要先到天地图申请key。天地图官网链接本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）
Vue+OpenLayers7入门到实战：html原生网页如何使用OpenLayers7地图
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 785
尽管现在大部分网页都是使用Vue或者React开发了，但是还是有不少开发者使用的是网页原生html进行开发，或者是老项目维护的需要，所以为了照顾使用html原生网页的同学们，本章简单讲解一下如何使用原始html网页情况下使用OpenLayers7。《Vue+OpenLayers7：快速搭建Vue+OpenLayers7地图脚手架项目。从零开始构建Vue项目并整合OpenLayers7.5.2》。
Vue+OpenLayers7入门到实战：OpenLayers7加载离线瓦片xyz地图，vue项目如何使用离线瓦片
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
02-21 582
本章介绍如何使用OpenLayers7在地图上如何使用离线瓦片。以vue项目为例，将已经下载好的xyz离线瓦片放在vue项目中，使用OpenLayers直接加载vue中的瓦片图片，即可进行加载地图。
Vue+OpenLayers7入门到实战：快速搭建Vue+OpenLayers7地图脚手架项目。从零开始构建Vue项目并整合OpenLayers7.5.2
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 1490
本章针对Vue初学者，对Vue不熟悉，甚至还不会Vue的入门学生读者。本章会详细讲解从NodeJS环境到npm环境的各个步骤，再到使用vue-cli脚手架快速生成项目，以及添加地图库依赖，编写简单的xyz高德地图显示页面的完整教程。如果已有Vue项目或者熟悉Vue.js的读者可以不用看本章，直接添加ol@7.5.2依赖到Vue项目中即可。熟悉VUE的读者可以跳过本章。
vue全局引入openlayers_把Vue与OpenLayers集成使用的方法
weixin_39725844的博客
02-05 2192
准备工作确认自己电脑是否通过npm正确安装了OpenLayers，没有的话可以npm i openlayers -s搞定后开始下一步。注册全局变量首先全局引入，然后通过vue的prototype方法定义全局变量。import ol from ‘openlayers‘;import ‘openlayers/css/ol.css‘;Vue.prototype.$ol = ol;这里的Vue.proto...
vue中集成openlayer+天地图实现地图打点和覆盖层加载
Christina0109的博客
10-13 1298
使用openlayer加载天地图，实现打点和覆盖层加载
Vue+OpenLayers7入门到实战：OpenLayers地图平移到指定位置，地图平移动画效果
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-29 699
本章介绍如何使用OpenLayers7在地图上如何实现平移地图到指定经纬度位置的功能。也即使用OpenLayers操作地图平移动画跳转位置效果。
Vue+OpenLayers7入门到实战：OpenLayers如何实现地图全屏和退出全屏操作，实现指定网页节点全屏和退出全屏
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-26 415
本章介绍如何使用OpenLayers7在地图上添加地图全屏控件，实现OpenLayers地图的全屏和退出全屏操作。
Vue+OpenLayers7入门到实战：鹰眼控件简单介绍，并使用OpenLayers7在地图上添加鹰眼控件
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-25 662
本章介绍OpenLayers7添加鹰眼控件到地图上的功能。在OpenLayers中，想要实现鹰眼控件，必须要新建一个数据源，且不能跟其他图层混用，相当于鹰眼是一个单独图层。
openlayers6怎么在vue中使用
最新发布
u014308676的博客
04-30 989
在 Vue 中使用 OpenLayers 6，你需要遵循几个步骤来确保 OpenLayers 库可以被正确集成到你的 Vue 项目中。确保你正确引入了这些组件，并在 Vue 组件中使用了它们。如果你的地图需要在不同尺寸的设备上保持响应式布局，你可能需要使用 Vue 的生命周期钩子或监听器来更新地图的视图或大小。OpenLayers 提供了许多事件和交互，你可以将它们添加到你的 Vue 组件中，以处理用户交互、更新地图状态等。在你的 Vue 组件中，你需要引入 OpenLayers 及其样式（如果有的话）。
OpenLayers6入门，vue项目集成并使用OpenLayers地图的两种方式
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-10 6713
虽然两种方式最终实现功能是一样的，但是当代码越来越多，业务越来越复杂，后面代码分离方式是最优选，可以实现数据和地图功能的解耦。而第一种适合业务简单时快速实现。当然博主还是推荐第二种分离方式，更加优雅。如果您有更好的办法，欢迎在评论区评论。
OpenLayers基础学习（Vue）
weixin_41027083的博客
04-20 4043
源文档：https://openlayers.org/ 中文文档：http://linwei.xyz/ol3-primer/index.html 本文的openlayers的版本是6.14.1，结合vue使用的。 安装ol npm i ol 地图的重要组成部分 地图 Map 是一个入口 视图 View 控制地图显示的中心位置，范围，层级等 图层 Layer 有很多图层，每种图层在实现上都对应于一个类，放在ol.layer下面，比如layer.Title(切片图层)。它允许多个layer重叠
vue+openLayers入门教程
热门推荐
ScoloveCode的博客
09-14 2万+
介绍: OpenLayers官网 OpenLayers插件类型 可以理解为专门处理地图的一个库 其中有两大类 map和view,map是ol中的核心组件,初始化一副地图(map),时,至少需要一个可视化区域(view),一个或多个图层(layer)和一个地图加载的挂载点(target) 1.vue中使用Openlayers 注意:地图容器需要设置宽高,否则看不到初始化的地图效果 地图介绍 一.关于投影 ​ 1.投影,地球不是正圆的球体,是一个不规则的椭圆体,所以我们要是想让它展开在桌面上,就会发现地图都会和
开源地图引擎openlayers_教你用vue+JavaScript+openlayers+iview制作天气预报图
weixin_28832121的博客
12-30 637
啥都不说先看效果还有事件统计功能，以及本地天气预报功能。这算是前端技术中的webgis相关的知识，这些实现都是用的纯前端加上中国天气网api和高德地图的地理编码的api请求数据。因为这个小demo涉及的数据传递较多，所以我选择使用vue框架，另外为了地图的展示，openlayers作为开源的webgis库，是很值得被选择，本项目涉及较多的就是openlayers添加地图，以及在地图上添加overl...
Vue+OpenLayers地图叠加服务实现教程
在示例中，通过OpenLayers将天地图作为底图加载到地图容器中。 5. 发布的服务叠加：除了天地图，开发者还可以将其他地图服务叠加到地图上。这些服务可能来自不同的地图服务器，如ArcGIS Server或其他支持地图服务...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值