Openlayers 教程 28 - 通过 View 限制地图显示范围、限制缩放级别、限制拖动等

已于 2024-07-26 13:45:03 修改
阅读量5.8k 收藏 13
点赞数 6
CC 4.0 BY-SA版权
分类专栏： Openlayers 实战教程 文章标签： openlayers视图 openlayers限制范围 openlayers禁止拖动 view 限制范围级别 openlayers view
于 2022-04-27 10:49:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linzi19900517/article/details/124400343
本文介绍了如何在Openlayers中使用View对象来限制地图的显示范围、缩放级别以及禁止拖动。内容涵盖Openlayers视图的常用方法，并提供了在线示例以展示具体实现。

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

Openlayers 教程 - 通过 View 限制地图显示范围、限制缩放级别、限制拖动等

在这里插入图片描述

在 Openlayers 中，View 是对地图视野的操作，有时候也被翻译为视图，主要是鼠标交互操作，如放大缩小拖动等。

本示例主要介绍：限制显示范围、限制显示级别、限制拖动。

Openlayers 视图（View）常用方法介绍

<html lang="en">
了解本专栏 订阅专栏 解锁全文
Openlayers入门教程 --- 万字长篇
大剑师兰特的GIS世界
03-13 7477
也许你还不熟悉Openlayers，也许你是一个Openlayers小白，零基础没关系，这篇文章提供最基础的 Openlayers 教程，简单易学，贯穿整个Openlayers 知识体系。读完本文，您将会对 Openlayers 有一个全新的认识。
Openlayers 教程 22 - 介绍演示地图监听事件（单击双击、地图平移、地图缩放、鼠标悬浮等）
非科班Java出身GISer的博客
04-01 6614
地图中的监听事件，也是经常用的功能，一般用于点击获取坐标点，进而查询数据，还有其他事件，比如双击事件、缩放事件等。
vue中使用openlayers地图限制可视范围（五）
林依.的博客
10-25 2708
vue中使用openlayers地图限制可视范围
openlayers禁止手指缩放地图、禁止拖拽...
厚积薄发.
03-20 1247
shiftDragZoom: false, // 取消shift+wheel左键拖动交互。mouseWheelZoom: false, // 取消滚动鼠标中间的滑轮交互。doubleClickZoom: false, // 禁用双击缩放。pinchZoom: false, // 禁止手指缩放地图。dragPan: false, // 禁止拖拽。openlayers阻止默认行为。
OpenLayers：extent与view extent 介绍
最新发布
m0_52912501的博客
04-16 991
本文介绍了OpenLayers中视图范围（view extent）的基本概念和使用方式，以及OpenLayers中其它类型的extent和各种extent方法的基本使用。
openlayer绘图时禁止移动地图的两种方式
Wilson的博客
11-16 4443
问题来源 出于防误操作的关系，我考虑到在地图绘制时禁止掉拖动地图的操作，在绘制结束才恢复回来。但直接用openlayer的Interaction的DragPan注册控件行不通，由此我实验得到以下两种方法。 方法一：利用draw里的freehand模式 核心就是多加入两个属性来限制draw的应用范围。 new ol.interaction.Draw({ condition: ol.eve
openLayer设置禁止拖拽地图
ch071714301的专栏
11-26 2100
import DragPan from 'ol/interaction/DragPan'//先在项目中引用此包 getPan() { let pan = null this.map.getInteractions().forEach(element => { if (element instanceof DragPan) { pan...
Openlayers-限制地图拖动区域
a18826265589的博客
07-05 1036
现在做webgis基本都会用到openlayers或者leaflet。那么在显示地图的时候，特别是显示小区域地图的时候，由于地图区域较小，就会存在把地图拖动到显示区域之外的现象。那么该如何限制地图拖动的区域呢。 在openlayers2中有restrictedExtent属性，直接设置下即可。 [javascript] view plain copy ...
openlayers限制地图显示范围
weixin_筱玉的博客
07-25 2420
openlayers 限制地图视图显示范围
openlayers入门教程2《View -1.地图控制》
qq_40795662的博客
01-23 1129
投影是为了把不可展的椭球面描绘到平面上，它使用几何透视方法或数学分析的方法，将地球上的点和线投影到可展的曲面(平面、园柱面或圆锥面)上，再将此可展曲面展成平面，建立该平面上的点、线和地球椭球面上的点、线的对应关系。精准定位某个坐标的地图展示内容 在实际业务开发中我们通常像实际定位某个设备存在与地图上与之相对应的位置，而不是笼统的定位信息展示，面对这种需求我们可以在出发定位设备这个功能时，同时设置View的放大等级再修改中心点为定位设备的中心点。下面我们将针对与一些在开发的过程中的实际使用进行一些代码讲解。
Openlayers 教程 17 - 创建聚合图、权重聚合图以及聚合图点击事件
非科班Java出身GISer的博客
08-09 2477
本示例基于实际项目中的应用，介绍：加载聚合图、权重聚合图、聚合图参数、聚合图点击事件等功能。
openlayers禁用鼠标滚轮放大、拖拽事件并设置为只有按住Ctrl键才可以执行放大拖拽操作
aaa_div的博客
06-25 907
或者设置只允许按住Ctrl键才可以操作。
openlayers控制地图显示范围
weixin_33834075的博客
10-17 1454
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/83108903 openlayers控制地图显示范围 简介:为了突出地图关注区域，有时会...
openlayers限制地图拖动区域
weixin_33827965的博客
10-09 882
现在做webgis基本都会用到openlayers或者leaflet。那么在显示地图的时候，特别是显示小区域地图的时候，由于地图区域较小，就会存在把地图拖动到显示区域之外的现象。那么该如何限制地图拖动的区域呢。 在openlayers2中有restrictedExtent属性，直接设置下即可。 var options = { ...
openlayers：实现图层缩放限制(附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-29 367
openlayers：实现图层缩放限制(附完整源码）
openlayers 地图限制区域实现方法
jijingzhilin的博客
11-15 2939
openlayers 地图限制区域实现方法一、利用arcmap裁剪实现二、canvas的clip方法实现 一、利用arcmap裁剪实现 之前遇到一个项目，需要只显示某个区县范围内的地图，其余部分不要显示，其实就是地图限制区域的问题，当时由于时间紧急，第一个想到的方法，就是利用arcmap的裁剪方法来实现。 具体想法：弄个某县边界图层，再绘制一个巨大范围的矢量面，用这个图层去裁剪范围面，形成一个新的图层，这个图层中间镂空的地方就是该县的边界区域，地图加载的时候一起加载进去，然后镂空图层样式设置成实心的，这样底
openlayers实现锁定地图，不可使用鼠标拖动放大缩小地图
qq_44473822的博客
03-09 1841
openlayers解决不可使用鼠标拖拽滚动查看地图
openlayers：实现受限范围(附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-28 184
openlayers：实现受限范围(附完整源码）
Openlayers地图定位到指定范围
weixin_43578304的博客
11-04 890
Openlayers地图定位到指定范围
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

非科班Java出身GISer

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

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

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

打赏作者

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

抵扣说明：

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

余额充值