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

最新推荐文章于 2025-04-01 09:35:56 发布
原创 最新推荐文章于 2025-04-01 09:35:56 发布 · 4.6k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#openlayers3

本文探讨了在地图应用中如何利用'移动结束'事件来捕捉地图可视区域的变化。通过注册'移动结束'事件监听器，可以实时获取并打印当前地图的可视化范围，这对于地图应用的开发与优化至关重要。 
//注册地图移动后触发得事件
map.on('moveend', function(event){
	//获取可视化区域得范围
    console.log(map.getView().calculateExtent(map.getSize()))
})
Lazy man
关注
openlayers：实现实时获取可视区域范围（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-12 507
openlayers：实现实时获取可视区域范围（附完整源码）
Openlayers 教程 27 - 获取地图中心点、范围以及缩放等级
非科班Java出身GISer的博客
08-30 1936
Openlayers 教程 - 获取地图中心点、范围以及缩放等级。
OpenLayers3（二）获取可视区域中心
天空影
09-10 8020
需求 因为项目用到了谷歌离线地图，并且其中有一个保存视图功能：保存现在可视区域中心点坐标，下一次加载的时候地图中心设置为上一次设置的坐标 定位 因为项目同时用到了百度离线地图，其中百度离线地图有这么一个api map.getBounds():返回地图可视区域，以地理坐标表示 所以我在百度离线地图中获取中心点坐标就是map.getBounds().getCenter(); 但是因为o...
openlayers只获取显示区域范围中的featrues
Anonymous996的博客
04-20 1525
最近碰到一个需求，是关于空间查询的，获取当前视口进行查询，思考了一下，需要先拿到视图的四至范围，将这个范围绘制成矩形即可。再去拿到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 3011
目录功能需求加载依赖OpenlayerSuperMap实现步骤理解 功能需求 加载依赖 Openlayer 因为 ol 的源码 index 文件，其导出模块方式是这样的： 所以项目加载 ol 模块的时候，必须指定类级别，按需加载，如此十分麻烦。 我的做法是将其模块二次封装，使 ol 依赖只有一个出口，而项目使用引用此文件即可。 SuperMap SuperMap 的源码 index 文件如下，将所有的模块都封装成一个出口。 使用十分方便。 import {FeatureService, SuperMap}
Openlayers入门，Openlayers调整地图可视范围到多个点组成的多边形边界，可视范围缩放到多个点的中心点
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
06-30 1581
本片文章详细讲解如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。也即Openlayers根据多个点坐标生成一个矩形可视范围，并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内，则调整地图中心点；如果不在，则调整地图可视区域到对应矩形可视范围。
精选资源
基于openlayers实现图片地图，路径绘制，点是否在区域中判定，路径播放，回放控制
02-16
1、实现图片地图，图片地图比例尺 2、绘制点的路径 3、绘制多边形，定位不规则多边形中心点，显示名称 4、多边形编辑 5、地图全屏，地图截图 6、点是否在区域中判定 7、暂停，播放，向前，向后20s，倍速播放控制路径...
110.在 Vue 3 中使用 OpenLayers 实时显示 zoom 及四角坐标
最新发布
小彭的博客
04-01 931
本文介绍了如何在 Vue 3 中使用 OpenLayers 来获取地图的 zoom 值以及四角坐标信息，并实时更新数据。这种方式可以用于 GIS 应用开发，帮助用户更好地了解当前地图范围。如果你在开发过程中有任何问题，欢迎留言交流！希望这篇文章对你有所帮助！🚀。
openlayers 保存当前视角的三种实现方式
wangfengquan_的博客
02-09 911
最近被同事请教了如何openlayers地图视角相关的问题，需求是保存当前地图视角到后端，前端再恢复展示。挺简单的功能，翻阅了一下openlayers官方文档，总结了三种实现方式。废话不多说，先上图。
openlayers控制地图显示范围
aodao8891的博客
10-17 1553
openlayers控制地图显示范围 简介:为了突出地图关注区域，有时会禁止其他范围地图显示，针对这种需求，openlayers提供了图层的extent属性 查看文章 转载于:https://www.cnblogs.com/dqygiser/p/10463981.html...
openlayers 截屏出图和框选范围出图
ANNENBERG的博客
06-28 2012
<!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实现根据经纬度范围在地图上定位并画出区域
第七天堂
03-29 6454
昨天完成了在页面上展现WMS服务地图。之后的业务是在地图上定位数据的显示区域。用于定位的元数据在新建时会初始化一个经纬度范围，定位的原理是根据这个经纬度范围确定在地图上显示的范围，并将区域用一个矩形框起来。由于是头一次做地图定位，走了很多的冤枉路。下面把过程记录下来，和大家一起分享。 尝试1：在得到经纬度（四个点，分别是东经，西经，南纬，北纬），根据上述的经纬度取区域中心点的经纬度，然后根据这个...
通过Html2Canvas对OpenLayers截图
pdw521的专栏
08-15 3386
希望对需要的朋友提供参考 本人通过html2canvas对项目中使用的openlayers叠加的图层进行截图，生成图层数据。 其中对地图上叠加的矢量和栅格图层的截图中矢量截图没什么问题注意添加跨域就行了。 在 source属性中添加crossOrigin: 'anonymous',   即可； 对栅格数据的截图要采用png格式。 cldURL =“http://XXXXXX/XXXX/X...
Openlayers6 获取地图上的Feature
weixin_42035009的博客
09-05 2387
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 3076
在使用openlayer开发地图应用时，可能会要求根据只显示某个范围内的底图或数据，这个功能写起来还是比较简单的。只需要用到一点canvas的知识就可以。
openlayer地图导出指定范围图片文件
java coder https://github.com/pmsyn/ https://gitee.com/pmsyn
07-21 2009
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 1588
openlayers 缩放至图层范围 getExtent() 返回 [Infinity, Infinity, -Infinity, -Infinity]
openlayers 地图使用geom空间数据范围内裁剪地图vue项目
小混子得得的博客
05-09 943
三、加载的需要裁剪范围的图层（这里是应用的arcgis图层 图片形式加载）六、最后地图添加base这一图层，就可以获取以geom范围内裁剪的某一图层。打印解析出来的vectorSourceFeatures 数据格式。params.geom传进来的geom空间数据，如上格式。一、引用geom数据解析 图层加载所需。二、解析geom数据 （geom数据格式 实例。四、设置裁剪范围样式。
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()`方法判断点是否在可视范围内，从而判断点是否在地图可视区域内。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值