openlayers 3 实时获取可视区域范围

最新推荐文章于 2025-04-16 22:20:29 发布

Lazy man

最新推荐文章于 2025-04-16 22:20:29 发布

阅读量4.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： openlayers3

本文链接：https://blog.youkuaiyun.com/lazyMan2019/article/details/103502925

本文探讨了在地图应用中如何利用'移动结束'事件来捕捉地图可视区域的变化。通过注册'移动结束'事件监听器，可以实时获取并打印当前地图的可视化范围，这对于地图应用的开发与优化至关重要。

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

//注册地图移动后触发得事件
map.on('moveend', function(event){
	//获取可视化区域得范围
    console.log(map.getView().calculateExtent(map.getSize()))
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lazy man

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

OpenLayers实战，OpenLayers获取用户定位位置并高亮显示用户所在行政区划

GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程

10-26

789

本篇文章通过国内的省、自治区和直辖市的GeoJson数据作为行政区划边界数据，然后根据用户定位位置，通过OpenLayers计算得到用户所在行政区划，并使用OpenLayers高亮显示用户所在行政区划边界。本章是综合应用场景，所以代码稍稍有些复杂，对于新入门读者可能难以上手，因此下面提供本文中使用到的技术，方便大家拆分参考，容易上手：加载GeoJson数据渲染行政区划边界参考文章OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上。

openlayers：实现实时获取可视区域范围（附完整源码）

希望我的博客，能帮上你解决学习中工作中所遇到的问题

02-12

440

openlayers：实现实时获取可视区域范围（附完整源码）

1 条评论您还未登录，请先登录后发表或查看评论

openlayers 截屏出图和框选范围出图

ANNENBERG的博客

06-28

1943

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metacharset="utf-8"/> <title>地图打印（导...

OpenLayers：extent与view extent 介绍

最新发布

m0_52912501的博客

04-16

984

本文介绍了OpenLayers中视图范围（view extent）的基本概念和使用方式，以及OpenLayers中其它类型的extent和各种extent方法的基本使用。

八、OpenLayer一些常用的方法总结

qq_39330397的博客

08-21

769

9、渲染监听，适用于监听图层绘制，以及实时改变自己定义的一些元素的位置。1、获取地图的视角范围。

Openlayers 教程 27 - 获取地图中心点、范围以及缩放等级

非科班Java出身GISer的博客

08-30

1757

Openlayers 教程 - 获取地图中心点、范围以及缩放等级。

OpenLayers3（二）获取可视区域中心

天空影

09-10

7976

需求因为项目用到了谷歌离线地图，并且其中有一个保存视图功能：保存现在可视区域中心点坐标，下一次加载的时候地图中心设置为上一次设置的坐标定位因为项目同时用到了百度离线地图，其中百度离线地图有这么一个api map.getBounds():返回地图可视区域，以地理坐标表示所以我在百度离线地图中获取中心点坐标就是map.getBounds().getCenter(); 但是因为o...

openlayers只获取显示区域范围中的featrues

Anonymous996的博客

04-20

1470

最近碰到一个需求，是关于空间查询的，获取当前视口进行查询，思考了一下，需要先拿到视图的四至范围，将这个范围绘制成矩形即可。再去拿到geometry进行wfs条件查询。注释不写了，不明白查官方 const [ x1, y1, x2, y2 ] = map.getView().calculateExtent(); const feature = new ol.Feature({ geometry: new ol.geom.Polygon.fromExtent([ x1, y1, x2,.

【Gis地图】Openlayers + SuperMap 实现范围查询和缓冲区查询

qq_44683095的博客

01-27

2948

目录功能需求加载依赖OpenlayerSuperMap实现步骤理解功能需求加载依赖 Openlayer 因为 ol 的源码 index 文件，其导出模块方式是这样的：所以项目加载 ol 模块的时候，必须指定类级别，按需加载，如此十分麻烦。我的做法是将其模块二次封装，使 ol 依赖只有一个出口，而项目使用引用此文件即可。 SuperMap SuperMap 的源码 index 文件如下，将所有的模块都封装成一个出口。使用十分方便。 import {FeatureService, SuperMap}

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

GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程

06-30

1498

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

基于openlayers实现图片地图，路径绘制，点是否在区域中判定，路径播放，回放控制

02-16

1、实现图片地图，图片地图比例尺 2、绘制点的路径 3、绘制多边形，定位不规则多边形中心点，显示名称 4、多边形编辑 5、地图全屏，地图截图 6、点是否在区域中判定 7、暂停，播放，向前，向后20s，倍速播放控制路径...

openlayers控制地图显示范围

aodao8891的博客

10-17

1528

openlayers控制地图显示范围简介:为了突出地图关注区域，有时会禁止其他范围地图显示，针对这种需求，openlayers提供了图层的extent属性查看文章转载于:https://www.cnblogs.com/dqygiser/p/10463981.html...

OpenLayers实现根据经纬度范围在地图上定位并画出区域

第七天堂

03-29

6379

昨天完成了在页面上展现WMS服务地图。之后的业务是在地图上定位数据的显示区域。用于定位的元数据在新建时会初始化一个经纬度范围，定位的原理是根据这个经纬度范围确定在地图上显示的范围，并将区域用一个矩形框起来。由于是头一次做地图定位，走了很多的冤枉路。下面把过程记录下来，和大家一起分享。尝试1：在得到经纬度（四个点，分别是东经，西经，南纬，北纬），根据上述的经纬度取区域中心点的经纬度，然后根据这个...

通过Html2Canvas对OpenLayers截图

pdw521的专栏

08-15

3337

希望对需要的朋友提供参考本人通过html2canvas对项目中使用的openlayers叠加的图层进行截图，生成图层数据。其中对地图上叠加的矢量和栅格图层的截图中矢量截图没什么问题注意添加跨域就行了。在 source属性中添加crossOrigin: 'anonymous', 即可；对栅格数据的截图要采用png格式。 cldURL =“http://XXXXXX/XXXX/X...

Openlayers6 获取地图上的Feature

weixin_42035009的博客

09-05

2361

OpenLayers6 鼠标移动获取地图上的Feature 代码如下： map.on('pointermove', function (e) { let pixel = map.getEventPixel(e.originalEvent); let hit = map.hasFeatureAtPixel(pixel, { layerFilter: function (layer) { re

openlayer4中，地图通过extent缩放至范围。

热门推荐

liuxu1875的博客

03-08

1万+

//地图缩放，通过extent范围 extent数据类型为int数组，不能为字符串，如果为字符串则先转换为int数组。 function zoomToExtent(extent) { var MapZoom = extent; var mapPadding = [20, 10, 20, 10]; // alert(isArrayFn(extent)); if (is...

openlayer地图裁切

qq_34447899的博客

07-22

2918

在使用openlayer开发地图应用时，可能会要求根据只显示某个范围内的底图或数据，这个功能写起来还是比较简单的。只需要用到一点canvas的知识就可以。

openlayer地图导出指定范围图片文件

java coder https://github.com/pmsyn/ https://gitee.com/pmsyn

07-21

1961

openlayer地图导出指定范围图片文件在gis系统中我们经常遇到将指定区域的地图导出为图片文件，在openlayer官网提供了导出样例https://openlayers.org/en/latest/examples/export-map.html，导出文件格式为base64编码。 but 大家在使用过程中肯能会遇到导出文件失败该问题经过网上查阅资料发现，是由于跨域请求导致，加载地图时未设置允许跨域。设置为允许跨域后一切正常。具体代码如下： let layer = new ol.layer

openlayers 缩放至图层范围 getExtent() 返回 [Infinity, Infinity, -Infinity, -Infinity]

pwl124的博客

02-08

1513

openlayers 缩放至图层范围 getExtent() 返回 [Infinity, Infinity, -Infinity, -Infinity]

openlayers 判断点的位置是否在地图可视区域内

06-07

可以使用OpenLayers提供的`ol.View`和`ol.extent`来判断点是否在地图可视区域内。具体实现可以参考以下代码： ```javascript // 获取地图视图对象 var view = map.getView(); // 获取地图可视范围 var extent = view.calculateExtent(map.getSize()); // 判断点是否在可视范围内 if (ol.extent.containsCoordinate(extent, point)) { // 在可视范围内 } else { // 不在可视范围内 } ``` 其中，`view.calculateExtent(map.getSize())`可以获取地图的可视范围，返回的是一个包含地图四个边界坐标的数组。`ol.extent.containsCoordinate(extent, point)`可以判断点是否在指定的范围内，如果在范围内返回`true`，否则返回`false`。上述代码中，我们首先获取地图视图对象和可视范围，然后使用`ol.extent.containsCoordinate()`方法判断点是否在可视范围内，从而判断点是否在地图可视区域内。