Vue+OpenLayers7入门到实战：Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点

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

#vue.js #前端 #javascript #OpenLayers #地图可视范围调整 #自适应地图视角

于 2024-01-29 09:41:34 首次发布
本文介绍了如何在Vue项目中使用OpenLayers7调整地图可视范围到多个点组成的多边形边界，包括根据点坐标生成矩形可视范围、判断并调整地图中心点或可视区域，提供代码实现和演示测试效果。

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

前言

本章介绍如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。
也即Openlayers根据多个点坐标生成一个矩形可视范围，并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内，则调整地图中心点；如果不在，则调整地图可视区域到对应矩形可视范围。

Vue+OpenLayers7入门到实战

二、依赖和使用

"ol": "7.5.2"
  1. 使用npm安装依赖
npm
了解本专栏 订阅专栏 解锁全文
Openlayers入门，Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
06-30 1597
本片文章详细讲解如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。也即Openlayers根据多个点坐标生成一个矩形可视范围，并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内，则调整地图中心点；如果不在，则调整地图可视区域到对应矩形可视范围。
Vue+OpenLayers7入门到实战：OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-11 543
本章介绍如何使用OpenLayers7在地图上监听点击事件，以及监听地图点击事件后进行简单弹框并获取当前点击位置的经纬度并显示wgs84坐标位置和度分秒格式经纬度信息。
openlayers：实现行政区划边界绘制（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 596
openlayers：实现行政区划边界绘制（附完整源码）
vue集成openlayers
呱呱的博客
04-28 6176
下载依赖 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地图整合到Vue项目中的两种方式
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 724
OpenLayers本身已经是支持模块化，所以引入vue项目很简单。在vue中使用OpenLayers，最简单的是混合方式。直接在vue项目中和前端代码混在一起写，适合业务简单的项目。另一种是与前端代码分离的方式，前端写前端的代码。GIS写GIS的代码，各写各的，互不影响。最后前端以模块化的方式使用地图功能代码，这样可以实现gis地图功能代码复用，引入其他地方也可以复用。虽然两种方式最终实现功能是一样的，但是当代码越来越多，业务越来越复杂，后面代码分离方式是最优选，可以实现数据和地图功能的解耦。
35-Openlayers6入门，Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点
fxshy的博客
06-02 336
35-Openlayers6入门，Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点
Vue+OpenLayers7入门到实战目录，OpenLayers7中文文档，OpenLayers7中文手册，OpenLayers7中文教程，OpenLayers7文档pdf
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-04 3503
本篇作为《Vue+OpenLayers7入门到实战》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers7开发。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-31 4910
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Vue+OpenLayers7入门到实战目录，OpenLayers7中文文档，OpenLayers7手册，OpenLayers7教程
最新发布
2401_85124764的博客
06-17 629
本篇作为《Vue+OpenLayers7入门到实战》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏基本上每章都有详细的源代码和运行示例以供参考，且保证每章代码都可以正常运行，非常适合入门读者从零开始学习。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers7开发。
openlayers 地图加载geojson绘制边界,点,线,面
收集、分享
08-10 1539
openlayers 地图加载geojson绘制边界,点,线,面
openlayers3中，在地图上添加静态边界线
凡事有果必有因
09-13 9162
我们的底图经常是在网络上下载的，各区域并没有的明显分界，因此与一个市县相关的地图，我们需要将区域边界线加入到底图中显示。如下图的效果： 1.获取区域边界的经纬度，保存为地理数据传输格式GeoJSON GeoJSON就是JSON格式，只不过是针对Geometry的JSON，遵循JSON的语法和格式，其解析方式和JSON完全相同。GeoJSON是一种针对地理数据编码的数据传输格式，支持Po
openlayers 设置边界线外圈遮罩
小猪佩奇
12-16 2875
openlayers 设置边界线外圈遮罩 话不多说直接上图 代码里面有详细注解请看代码片段，如有不清楚的话私信我。 drawArea() { let _this = this; let geoJson = new GeoJSON(); //获取边界数据MultiPolygon数组 let ft=geoJson.readFeatures(area)[0].getGeometry().getGeometries() //获取绘制边界数据的数组，
vue全局引入openlayers_把Vue与OpenLayers集成使用的方法
weixin_39725844的博客
02-05 2191
准备工作确认自己电脑是否通过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 1295
使用openlayer加载天地图，实现打点和覆盖层加载
OpenLayers添加边界json
weixin_60823046的博客
11-04 982
openlayers添加 json边界文件
Vue与OpenLayers的地图范围设置和适应功能
TechNovaX的博客
09-12 328
通过创建地图容器、初始化地图对象，并利用setExtent方法设置地图的范围，我们可以轻松地实现地图的显示控制。在Vue和OpenLayers的开发中，设置地图的显示范围是一个常见的需求。本文将介绍如何使用Vue和OpenLayers实现地图范围的设置和适应功能，并提供相应的源代码示例。在created生命周期钩子中，在地图容器上创建地图对象，同时设置地图的初始中心点和缩放级别。最后，在需要改变地图范围的时候，我们可以调用这个方法来更新地图的显示范围。在Vue组件中，我们需要创建一个容器来显示地图。
vue中使用openlayers地图限制可视范围（五）
林依.的博客
10-25 2883
vue中使用openlayers地图限制可视范围
openlayers 设置路线和划分区域
pinkling的博客
04-04 7096
效果图 路线: 区域: 整体效果: 代码及思路过程 路线 是将一个个坐标点连接起来组成一个 feature 所以要首先需要一组坐标点的数据, 在有一段数据之后考虑 feature 所需要的内容, feature需要图层(layer即 ol/layer/Vector) , 而图层需要一个源 ( source 即 ol/source/Vector ) 这些都一一...
Openlayers地图定位到指定范围
weixin_43578304的博客
11-04 946
Openlayers地图定位到指定范围
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值