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

最新推荐文章于 2024-08-17 19:31:11 发布
最新推荐文章于 2024-08-17 19:31:11 发布
阅读量174 收藏
点赞数
分类专栏： OpenLayers中文教程零基础到精通 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fxshy/article/details/139387991
版权
本文介绍了如何在OpenLayers6中利用JavaScript调整地图可视范围至多个点构成的多边形边界，并实现缩放至这些点的中心点。通过初始化地图、定义点数组、转换坐标、创建多边形以及调整视图，实现在点击按钮后自动适应多边形边界并居中显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

要在OpenLayers中将地图的可视范围调整到多个点组成的多边形边界，并将可视范围缩放到这些点的中心点，可以使用ol.View对象的fit方法。该方法允许你将视图调整到一个几何图形的边界。

代码说明

  1. 初始化地图：初始化地图视图和地图对象，并加载一个瓦片图层。
  2. 定义多边形点数组：points数组包含多边形的经纬度点。
  3. 转换点数组为投影坐标：使用ol.proj.fromLonLat将经纬度转换为投影坐标。
  4. 创建多边形：使用转换后的点数组创建一个ol.geom.Polygon对象。
  5. 调整视图到多边形边界：定义fitPolygon函数，调用view.fit方法，将视图调整到多边形的边界。

当点击页面上的“调整视图到多边形”按钮时，地图视图将自动调整以适应指定的多边形边界，并居中显示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta c
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Openlayers入门，Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-30 1464
本片文章详细讲解如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。也即Openlayers根据多个点坐标生成一个矩形可视范围，并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内，则调整地图中心点；如果不在，则调整地图可视区域到对应矩形可视范围。
Openlayers实战：回显多点、多线段、多多边形
大剑师兰特的GIS世界
07-09 936
Openlayers地图中，回显数据是非常重要的。继上一示例回显点、线、圆形、多边形后。本示例回显多线，多点，多个多边形。用到了MultiPoint,MultiLineString,MultiPolygon。多个信息的显示可以采用循环的方式，单个显示点、线、面。但是循环方式是要多次计算的，而MultiPoint，MultiLineString，MultiPolygon 一次解决，提高效率。
129：vue+openlayers的extent 在EPSG:4326，EPSG:3857，EPSG:900913，CRS:84的范围值
大剑师兰特的GIS世界
09-07 1327
openlayers中会使用extent来设定地图的显示范围。以下是一屏map的范围。
Vue+OpenLayers7入门到实战：Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
01-29 356
本章介绍如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。也即Openlayers根据多个点坐标生成一个矩形可视范围，并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内，则调整地图中心点；如果不在，则调整地图可视区域到对应矩形可视范围。
openlayers 地图加载geojson绘制边界,点,线,面
收集、分享
08-10 1365
openlayers 地图加载geojson绘制边界,点,线,面
OpenLayers实战，OpenLayers结合TopoJson区划边界数据，下拉菜单实现城市切换，动态切换城市边界到地图视图视角范围内
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-02 374
本章是OpenLayers综合实战案例，使用OpenLayers结合下拉菜单实现城市切换，动态切换城市边界到地图视图视角范围内。本章需要使用到ElementUI的下拉框组件和OpenLayers的TopoJson格式解析地市边界数据并负责渲染，通过动态创建style样式来切换城市区划边界高亮效果。如何从vue项目中加载assets资源目录中的TopoJson格式数据。
Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-29 1401
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
openlayers3中，在地图上添加静态边界线
凡事有果必有因
09-13 9046
我们的底图经常是在网络上下载的，各区域并没有的明显分界，因此与一个市县相关的地图，我们需要将区域边界线加入到底图中显示。如下图的效果： 1.获取区域边界的经纬度，保存为地理数据传输格式GeoJSON GeoJSON就是JSON格式，只不过是针对Geometry的JSON，遵循JSON的语法和格式，其解析方式和JSON完全相同。GeoJSON是一种针对地理数据编码的数据传输格式，支持Po
openlayers 设置边界线外圈遮罩
小猪佩奇
12-16 2780
openlayers 设置边界线外圈遮罩 话不多说直接上图 代码里面有详细注解请看代码片段，如有不清楚的话私信我。 drawArea() { let _this = this; let geoJson = new GeoJSON(); //获取边界数据MultiPolygon数组 let ft=geoJson.readFeatures(area)[0].getGeometry().getGeometries() //获取绘制边界数据的数组，
OpenLayers添加边界json
weixin_60823046的博客
11-04 916
openlayers添加 json边界文件
openlayers：实现实时获取可视区域范围（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-12 417
openlayers：实现实时获取可视区域范围（附完整源码）
Openlayer获取多个“图层(不是全部)“的范围
西柚2015地信小白GISer
09-08 996
下面代码中有注释--->>> import {boundingExtent} from 'ol/extent'; //所有的图层名称 GetLayersExtend(layersName){ //所有图层的数据范围坐标点（此数据用于求其最小包裹的矩形，也就是数据范围） let coordinates=[]; layersName.forEach(layerName=>{ //layer代表ol的图层，this._lay.
openlayers6地图离线开发demo-弹窗与边界问题
oliver666666的博客
12-01 372
openlayers6离线地图开发
OpenLayers6入门，地图全图显示经纬度网格标记线
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-29 1444
使用OpenLayers实现地图全图显示经纬度网格标记线。方便查看可视区域所处的经纬度区间。
20220607 openlayer获取Polygon的中心点
qq_38983199的博客
06-07 1805
openlayer获取polygon的中心点
Openlayers 地图定位到相应位置并缩放
weixin_38170255的博客
09-10 3349
说明： 在地图操作中，有个功能，需要点击一个点，将视图定位到点击点的位置，并放大。 解决方案： 1、可以有openlayers中可以有ol.View来控制，但是在更改时，会将地图初始化时设置的maxZoom，minZoom等覆盖掉，因此需要在设置新的view前，重新设置一次初始化时的值，避免重复覆盖。 /** * @description 地图定位中心并缩...
openLayers基础地图操作
前端小记
02-14 7444
和高德地图，百度地图，腾讯地图，Arcgis一样，OpenLayers是一个用于开发WebGIS客户端的JavaScript包。
openlayers设置省市区编辑线
最新发布
m0_69112199的博客
08-17 391
欢迎补充，一起进步。
OpenLayers6实战，OpenLayers实现绘制圆形放大地图功能，在地图上画圆放大地图到鼠标框选区域
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-25 420
本章讲解如何使用OpenLayers实现绘制圆形放大地图功能，在地图上画圆放大地图到鼠标框选区域。
openlayers获取多个多边形的边界
09-01
要获取多个多边形的边界，可以使用OpenLayers提供的几种方法。 首先，要确保已经加载了OpenLayers库，并创建了地图。然后，创建多边形要素，并将其添加到矢量图层中。 接下来，可以通过以下几种方法来获取多个多边形的边界： 1. 使用`getBounds()`方法：通过遍历所有多边形要素，可以使用`getBounds()`方法获取每个多边形的边界框。边界框是一个表示多边形边界的矩形区域，可以通过调用`getBounds()`方法获得。使用此方法，可以获取每个多边形的边界框，并进一步处理或显示。 2. 使用`getGeometry().getExtent()`方法：对于每个多边形要素，可以使用`getGeometry().getExtent()`方法获取多边形的边界框。这个方法会返回包含多边形边界的最小矩形范围。通过遍历每个多边形要素并调用此方法，可以获取每个多边形的边界框。 3. 使用`getGeometry().getCoordinates()`方法：可以使用`getGeometry().getCoordinates()`方法来获取多边形的坐标数组。多边形的边界由这些坐标组成。通过遍历每个多边形要素并调用此方法，可以获得每个多边形的坐标数组。然后，可以进一步处理或显示这些坐标。 以上方法可以根据具体需求选择使用。通过遍历多边形要素，并调用适当的方法，可以获取多个多边形的边界信息。根据实际应用，可以进一步处理或显示这些边界信息，实现所需的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值