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

已于 2023-07-05 09:00:03 修改
阅读量1.2k 收藏 2
点赞数 1
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： 前端 javascript vue.js OpenLayers 可视区域
于 2023-06-30 10:58:01 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/131471939
版权
OpenLayers6一本通 同时被 3 个专栏收录 该专栏为热销专栏榜 第30名
132 篇文章 13 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门
69 篇文章 93 订阅 ¥69.90 ¥99.00
订阅专栏
本文介绍了如何使用OpenLayers调整地图的可视范围至多个点构成的多边形边界，以及如何判断并适配传入矩形范围。文章详细讲解了在Vue项目中集成OpenLayers的步骤，包括依赖安装、功能实现，如根据点坐标生成矩形视图、判断并调整地图中心点或可视区域。同时提供了代码示例和测试效果演示。
摘要由CSDN通过智能技术生成

专栏目录：
OpenLayers入门教程汇总目录

前言

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

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖
yarn
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
专栏目录
订阅专栏
269：vue+openlayers 利用 MultiPoint 显示多点
大剑师兰特的GIS世界
06-20 849
本示例介绍如何在vue+openlayer中利用 MultiPoint 显示点。在OpenLayers中，MultiPoint是一种几何对象，它可以表示由多个Point组成的几何集合。
openlayers加载瓦片地图并手动标记坐标点
最新发布
04-29
OpenLayers 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源，包括瓦片地图，使得开发者可以轻松地将地理信息集成到网站中。本教程将详细介绍如何使用OpenLayers加载瓦片地图...
openlayers限制地图显示范围
weixin_筱玉的博客
07-25 2140
openlayers 限制地图视图显示范围
OpenLayers添加边界json
weixin_60823046的博客
11-04 836
openlayers添加 json边界文件
vue中使用openlayers地图限制可视范围（五）
林依.的博客
10-25 2151
vue中使用openlayers地图限制可视范围
openLayers基础地图操作
前端小记
02-14 7169
和高德地图，百度地图，腾讯地图，Arcgis一样，OpenLayers是一个用于开发WebGIS客户端的JavaScript包。
vue使用openlayers实现移动点动画
10-14
在Vue项目中，结合OpenLayers库实现移动点动画是一个常见的需求，这有助于为地图应用添加动态效果，例如模拟物体在地图上的移动轨迹。本示例主要讲解如何在Vue组件中设置和控制移动点动画。 首先，确保已经正确安装...
Openlayers实现点闪烁扩散效果
10-14
在OpenLayers中实现点的闪烁扩散效果是一种增强地图可视化的方式，可以使用户更加关注特定的地理位置。这个效果通过CSS动画和Overlay对象实现。以下是对实现这一效果的详细解释： 首先，我们要了解OpenLayers中的...
Openlayers实现扩散的动态点（水纹效果）
10-14
接下来，创建一个地图实例，设置底图为Bing Maps的瓦片源，并定义视图的中心位置和初始缩放级别： ```javascript var bingMap = new ol.layer.Tile({ source: new ol.source.XYZ({ crossOrigin: 'anonymous', ...
openlayers4实现点动态扩散
10-14
定义地图的视图，包括中心点（经度108.7，纬度34.8）和缩放级别4。使用的投影系统是"EPSG:4326"，即常见的经纬度坐标系统。 ```javascript var view = new ol.View({ center: [108.7, 34.8], zoom: 4, ...
openlayers：实现行政区划边界绘制（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 213
openlayers：实现行政区划边界绘制（附完整源码）
openLayers实战(二)：设置地图中心点、回到地图中心点、绘制点、移除点、点击获取坐标点
在下魔王ii的博客
08-08 2654
1.设置中心点，首先需要知道点的地理坐标，还需要知道如何在地图上画点。2.每次重新设置中心点的时候，还需要清除上一次设置的中心点。
openlayers通过坐标点画出一块区域
weixin_42476786的博客
11-23 3103
直接上代码： 其中的文件是json格式的本地文件，本地文件里坐标太多了，所以将里面的所需要的坐标匹配出来，然后写成json格式， 这样就通过坐标画出面了。 $.getJSON('../../scripts/shanxi-city.geo.json', function (city) { angular.forEach(city.features, function ...
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
我只是个很菜的前端
09-30 9907
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
Openlayers 教程 28 - 通过 View 限制地图显示范围、限制缩放级别、限制拖动等
linzi19900517的博客
04-27 5340
Openlayers 视野（View）常用方法介绍
openlayers 设置边界线外圈遮罩
小猪佩奇
12-16 2605
openlayers 设置边界线外圈遮罩 话不多说直接上图 代码里面有详细注解请看代码片段，如有不清楚的话私信我。 drawArea() { let _this = this; let geoJson = new GeoJSON(); //获取边界数据MultiPolygon数组 let ft=geoJson.readFeatures(area)[0].getGeometry().getGeometries() //获取绘制边界数据的数组，
Vue+OpenLayers7入门到实战：Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
01-29 270
本章介绍如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。也即Openlayers根据多个点坐标生成一个矩形可视范围，并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内，则调整地图中心点；如果不在，则调整地图可视区域到对应矩形可视范围。
180：vue+openlayers 模仿共享单车，判断点是否放在规划的电子围栏内
大剑师兰特的GIS世界
11-28 602
第163个本示例的目的是介绍演示如何在vue+openlayers中模仿共享单车，停车的时候判断是否停在规划好的电子围栏内。这里的停车相当于绘制一个点，规划的区域目前用多个电子围栏来表示。
OpenLayers 6实现底图裁剪效果,只显示指定城市或区域范围内的地图
liu2004051957的博客
11-22 2611
本源代码基于OpenLayers 6开发库实现底图的区域裁剪显示效果，比如只显示某城市或指定边界范围内的地图。
openlayers获取多个多边形的边界
09-01
要获取多个多边形的边界，可以使用OpenLayers提供的几种方法。 首先，要确保已经加载了OpenLayers库，并创建了地图。然后，创建多边形要素，并将其添加到矢量图层中。 接下来，可以通过以下几种方法来获取多个多边形的边界： 1. 使用`getBounds()`方法：通过遍历所有多边形要素，可以使用`getBounds()`方法获取每个多边形的边界框。边界框是一个表示多边形边界的矩形区域，可以通过调用`getBounds()`方法获得。使用此方法，可以获取每个多边形的边界框，并进一步处理或显示。 2. 使用`getGeometry().getExtent()`方法：对于每个多边形要素，可以使用`getGeometry().getExtent()`方法获取多边形的边界框。这个方法会返回包含多边形边界的最小矩形范围。通过遍历每个多边形要素并调用此方法，可以获取每个多边形的边界框。 3. 使用`getGeometry().getCoordinates()`方法：可以使用`getGeometry().getCoordinates()`方法来获取多边形的坐标数组。多边形的边界由这些坐标组成。通过遍历每个多边形要素并调用此方法，可以获得每个多边形的坐标数组。然后，可以进一步处理或显示这些坐标。 以上方法可以根据具体需求选择使用。通过遍历多边形要素，并调用适当的方法，可以获取多个多边形的边界信息。根据实际应用，可以进一步处理或显示这些边界信息，实现所需的功能。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值