三十、openlayers官网示例解析Double click, Drag and Zoom——第二次点击鼠标拖拽缩放地图效果、取消地图双击放大事件

最新推荐文章于 2024-06-22 15:00:00 发布

原创

最新推荐文章于 2024-06-22 15:00:00 发布 · 975 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#openlayers #openlayers官网示例 #GIS #地图 #前端

这篇展示了如何在地图上添加第二次按下鼠标移动鼠标实现拖拽缩放地图效果。

官网demo地址：

Double click, Drag and Zoom

官网介绍文字的翻译如下：

示例比较简单，直接贴代码：

 const map = new Map({
        //添加第二次点击拖拽缩放地图
        interactions: defaultInteractions().extend([new DblClickDragZoom()]),
        layers: [
          new Tile({
            source: new XYZ({
              url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
            }),
          }),
        ],
        target: "map",
        view: new View({
          center: [0, 0],
          zoom: 2

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

卷新心菜

关注关注

5
点赞
踩
5

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

049：vue+openlayers 鼠标pointermove显示城市名片

大剑师兰特的GIS世界

08-14

2693

本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。

118.在 Vue3 中使用 OpenLayers 实现绘制矩形、drawend 取消锚点、屏蔽双击放大事件

小彭的博客

04-18

578

在 GIS 或 Web 地图项目中，我们经常需要提供用户交互绘图的功能，比如：区域框选（矩形）多边形选区（Polygon）手绘标注区域禁用默认地图行为（如双击放大）本示例实现如下：✅ 矩形绘制✅ 多边形绘制✅ 绘图完成后自动移除锚点交互✅ 屏蔽双击放大地图以上就是在 Vue3 中结合 OpenLayers 实现绘制矩形、多边形、自动取消锚点以及禁用双击放大的完整过程。🧠 后续你可以尝试拓展功能，比如：支持拖动、修改图形绘制圆形、线段、点等类型图形编辑与删除多图层管理。

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

OpenLayers 避免在双击结束绘制导致地图放大

crowningJewel的博客

11-16

1554

最近开发中需要实现在地图上绘制矢量图形的功能，发现在绘制结束时，如果同时清除添加在地图上的绘制功能，双击地图时会触发地图默认的双击放大交互功能，故在此记录下解决思路，不记录完整代码。

openlayers禁用双击缩放事件 (十一)

吴佩佩佩佩的博客

07-15

1935

在openLayers中，默认有一个DoubleClickZoom事件，双击会缩放地图。当需要双击做一些其他操作的时候，效果就会冲突。解决办法是把这个默认事件删掉。 import { Map, View, Feature, Collection } from 'ol' import { DoubleClickZoom } from 'ol/interaction' const map = new Map({ view: new View({ center: [0, 0], proje

OpenLayers禁用鼠标双击放大事件

Gary Leong

05-13

2087

方案1： var map=new ol.Map({ layers:[new ol.layer.Tile({ source:new ol.source.OSM() })], target:"map", view:new ol.View({ center:[0,0], zoom:0 }), interactions:new ol.interaction.defaults({ doubleClickZoom:false,

openlayers禁止手指缩放地图、禁止拖拽...

厚积薄发.

03-20

1444

shiftDragZoom: false, // 取消shift+wheel左键拖动交互。mouseWheelZoom: false, // 取消滚动鼠标中间的滑轮交互。doubleClickZoom: false, // 禁用双击缩放。pinchZoom: false, // 禁止手指缩放地图。dragPan: false, // 禁止拖拽。openlayers阻止默认行为。

二十二、openlayers官网示例Custom Drag-and-Drop (KMZ)解析——拖拽KMZ,、GPX、GeoJSON、IGC、 KML、 TopoJSON文件到地图上解析成矢量图层

aaa_div的博客

05-21

1670

官网demo地址：这个示例展示了如何拖拽文件到地图上并实时解析成矢量图层首先来看看什么是KMZ。

五十六、openlayers官网示例Magnify解析——在地图上实现放大镜效果

aaa_div的博客

06-22

935

这篇讲了如何在地图上添加放大镜效果。首先加载底图鼠标移动的时候，调用render方法，触发postrender事件。postrender事件中可以获取到鼠标移动的位置，实时绘制圆形和放大后的图像。先用getRenderPixel将地理坐标转换为屏幕坐标，通过勾股定理（直角三角形的两条直角边的平方和等于斜边的平方）算出半径。获取放大镜范围内所需要的图像。然后开始创建放大后的图像数据。要看懂这段代码我们需要来好好分析一下。放大的关键在于dI / 2和dJ / 2的计算。

三十二、openlayers官网示例解析Draw lines rendered with WebGL——使用WebGL动态修改多边形端点类型、连接类型、偏移量、虚线等设置

aaa_div的博客

05-29

2919

WebGL 是基于硬件加速的图形库，能够利用 GPU 来进行高效的并行计算。与传统的 2D 绘图方式（如 Canvas 2D API）相比，WebGL 可以处理更多的图形数据、更高的绘图复杂度，并且在高分辨率和高刷新率下保持流畅的性能。这对于需要渲染大量图形元素的应用尤为重要，例如地理信息系统（GIS）、数据可视化和复杂动画。在需要渲染和处理大量数据点的应用中，如地理信息系统、科学可视化和大数据分析，WebGL 的并行计算能力和高效的渲染管道使其能够在不牺牲性能的情况下处理大规模数据可视化。

二十五、openlayers官网示例CustomOverviewMap解析——实现鹰眼地图、预览窗口、小窗窗口地图、旋转控件

aaa_div的博客

05-23

1189

因为地图设置了按住shift键旋转，所以这个小窗口也需要设置一下是否跟随旋转。new OverviewMap的className参数要么不传，要传自定义类名的话需要加上它的默认值.ol-overviewmap。首先加载了一个地图。翻看文档和源码后得知，展示/折叠的按钮点击事件中是通过是否加上ol-collapsed类名来控制小窗显隐的。而起隐藏作用的css是这样写的，带上了它原本的默认类名.ol-overviewmap。这个示例展示了如何在地图上增加一个小窗窗口的地图并跟随着地图的旋转而旋转视角。

openlayers 5 禁用双击放大事件

J_S_King的博客

06-28

499

import DoubleClickZoom from 'ol/interaction/DoubleClickZoom'; let that = this const dblClickInteraction = that.map .getInteractions() .getArray() .find(interaction => { return interaction instanceof DoubleClickZoom; }); t

openlayer2屏蔽双击放大事件

wo_buzhidao的博客

08-01

2522

openlayer2屏蔽双击放大事件环境为 open layer 3.1.3.1 代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta

openlayers6 vue 解决绘制双击结束放大地图

qq_43030908的博客

09-03

796

import { DoubleClickZoom } from "ol/interaction"; /** * DoubleClickZoom 双击放大事件 * 绘制前删除绘制后添加利用时间差来避免绘制结束后双击放大地图 */ const dblClickInteraction = this.mapdraw .getInteractions() .getArray() .find(interaction => { return interaction instanceof

Openlayers 禁用鼠标双击缩放事件（ol.interaction.DoubleClickZoom）

guzicheng1990的博客

12-31

2595

说明 openlayers地图加载时，默认会有9个交互事件其中可以看到控制双击缩放事件的DoubleClickZoom我们知道在绘制线时，结束的响应事件也是双击，所以在绘制线时和双击缩放事件就会冲突了。解决方案 const dblClickInteraction = map .getInteractions() .getArray() .find(...

vue+openlayers中实现图片展示与图片的拖拽和放大缩小（一）

浩星

11-26

6740

前言： openlayers中渲染图片是有多种方法的，Icon ，Image 等等都可以实现将图片放到地图上面，但是操作图片的话，方法比较少了，这里是配合 ol-ext 来实现的。相关资料: 1、ol-ext官方地址：入口 2、ol-ext 对应的资料地址：入口 3、ol-ext 源码gitee地址：入口 4、openlayers 最新官网：入口 5、openlayers 官网api：入口 6、实际坐标转换视图坐标（getPixelFromCoordinate）：入口 ...

openlayers 实现区域选择（点击区域高亮，再次点击取消；放大层级显示街道图层，同样可以选择取消）

qq_23830005的博客

05-29

941

放大层级后会显示街道边界，保存选择街道信息到streetList中，然后筛选出相应的坐标数据，渲染到地图上。主要通过geojson数据实现边界显示，选择区域的同时加载街道边界，取消区域择清除街道边界。

OpenLayers隐藏默认放大放小按钮

AngieLife

04-20

3329

<div id="map"></div> import {Map, View} from 'ol'; import TileWMS from 'ol/source/TileWMS'; import TileLayer from 'ol/layer/Tile'; import {ScaleLine, defaults as defaultControls} from 'ol/control'; //安徽省数据源 let wmsSource = new TileWMS({ .

Openlayers Interaction基础及重点内容讲解

大剑师兰特的GIS世界

07-03

482

在Openlayers中，需要用到一些设备行为来进行交互，这里面就惨生了一个概念Interaction。它是用来控制地图的。和控件一样的作用。不过它们的区别是控件触发都是一些可见的 HTML元素触发，如按钮、链接等，而交互功能不可见的，如鼠标双击、滚轮滑动，手机设备的手指缩放等。

【一】Openlayers禁用鼠标双击事件

weixin_43462069的博客

01-09

1619

代码如下： const dblClickInteraction = map .getInteractions() .getArray() .find(interaction => { return interaction instanceof ol.interaction.DoubleClickZoom; }...

openlayers在执行鼠标事件过程中禁止地图的鼠标拖拽、双击放大功能，并在鼠标事件结束后手动恢复。

最新发布

10-14

<think>我们正在使用OpenLayers，需要在执行自定义鼠标事件（如绘制、测量）时，临时禁止地图的默认拖拽和双击放大行为，并在事件结束后恢复这些交互功能。根据引用[2]中的内容，我们知道OpenLayers的交互行为（如拖拽DragPan和双击缩放DoubleClickZoom）可以通过交互模块控制。我们可以通过移除这些交互来禁止默认行为，然后在需要时重新添加。步骤如下： 1. 获取地图当前的所有交互，并从中移除我们想要禁止的交互（如DragPan和DoubleClickZoom）。 2. 执行自定义鼠标事件（比如绘制、测量等）。 3. 在自定义事件结束后，将之前移除的交互重新添加到地图上。但是，我们需要注意： - 如何识别和存储这些交互？可以在初始化地图后，保存这些交互的引用。 - 为了避免重复创建，我们可以在初始化地图时保存默认的交互，然后在需要时移除和添加。另外，引用[2]中提到了在Vue 3中如何控制交互，其中有一个关键点：使用`defaults`函数可以获取默认的交互集合，然后我们可以从中提取出DragPan和DoubleClickZoom交互，并分别控制。具体实现：步骤1：在初始化地图时，保存默认的交互对象（特别是拖拽和双击缩放交互）的引用。步骤2：当开始执行自定义鼠标事件时，从地图中移除这些交互。步骤3：在自定义事件结束后（比如双击结束绘制，或者点击了结束按钮），将之前移除的交互重新添加到地图中。示例代码：首先，在创建地图时，我们可以获取默认的交互，并保存我们需要控制的交互： ```javascript import Map from 'ol/Map'; import View from 'ol/View'; import { defaults as defaultInteractions, DragPan, DoubleClickZoom } from 'ol/interaction'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; class CustomMap { constructor() { // 创建地图时，使用默认的交互集合 this.map = new Map({ target: 'map', layers: [new TileLayer({ source: new OSM() })], view: new View({ center: [0, 0], zoom: 2 }), interactions: defaultInteractions() // 使用默认交互 }); // 从地图的交互集合中获取拖拽和双击缩放交互 this.dragPanInteraction = this.map.getInteractions().getArray().find(interaction => interaction instanceof DragPan); this.doubleClickZoomInteraction = this.map.getInteractions().getArray().find(interaction => interaction instanceof DoubleClickZoom); } // 开始自定义事件时，移除默认交互 startCustomEvent() { if (this.dragPanInteraction) { this.map.removeInteraction(this.dragPanInteraction); } if (this.doubleClickZoomInteraction) { this.map.removeInteraction(this.doubleClickZoomInteraction); } // 然后添加自定义事件监听，例如绘制图形等 // ... 添加自定义事件处理器 } // 结束自定义事件时，恢复默认交互 endCustomEvent() { // 移除自定义事件监听 // ... // 恢复交互 if (this.dragPanInteraction) { this.map.addInteraction(this.dragPanInteraction); } if (this.doubleClickZoomInteraction) { this.map.addInteraction(this.doubleClickZoomInteraction); } } } ``` 另一种方法：在创建地图时不添加默认交互，而是自己管理所有交互。但这样比较繁琐，通常我们只需要临时移除两个交互。注意：在自定义事件过程中，可能还需要临时添加一些交互（比如绘制图形的交互），这些交互在移除默认交互后单独添加。根据引用[3]中的问题127：“如何阻止地图默认的双击放大行为？”，我们可以知道，通过移除DoubleClickZoom交互就可以阻止。同样，问题128提到如何启用拖拽，也是通过DragPan交互控制。因此，上面的方法有效。引用[1]中的示例是通过jQuery监听按钮的mousedown事件，然后在其中监听鼠标移动，并在双击时结束。我们可以参考这个事件触发流程，但采用OpenLayers的方式。在OpenLayers中，我们可以使用`map.on('click', ...)`等方式监听事件，并在事件处理函数中执行自定义逻辑。同时，在开始监听前移除默认交互，在结束时恢复。示例：实现一个简单的绘制点并结束的功能 ```javascript // 在startCustomEvent方法中 startCustomEvent() { // 移除默认交互 this.removeDefaultInteractions(); // 添加点击事件监听 this.map.on('click', this.handleClick); // 添加双击结束事件 this.map.on('dblclick', this.handleEnd); } handleClick = (event) => { // 处理点击，比如添加点 console.log('添加点', event.coordinate); } handleEnd = () => { // 结束自定义事件 this.map.un('click', this.handleClick); this.map.un('dblclick', this.handleEnd); // 恢复默认交互 this.restoreDefaultInteractions(); } ``` 注意：上面的代码是简化的，实际应用中可能需要更复杂的逻辑，比如使用Draw交互等。总结步骤： 1. 在初始化地图时保存需要控制的交互（DragPan和DoubleClickZoom）的引用。 2. 在开始自定义事件时，移除这些交互，并添加自定义事件监听。 3. 在自定义事件结束（通过双击、点击按钮等方式）时，移除自定义事件监听，并恢复默认交互。这样就能实现在执行自定义鼠标事件时禁止地图拖拽和双击放大，结束后恢复的功能。 </think>在 OpenLayers 中临时禁止地图拖拽和双击放大功能，并在事件结束后恢复，可通过以下方法实现： ### 解决方案步骤 1. **禁用默认交互功能** ```javascript // 获取地图所有交互对象 const interactions = map.getInteractions().getArray(); // 查找并移除拖拽和双击缩放交互 let dragPan, doubleClickZoom; interactions.forEach(interaction => { if (interaction instanceof DragPan) { dragPan = interaction; } else if (interaction instanceof DoubleClickZoom) { doubleClickZoom = interaction; } }); // 临时移除交互 map.removeInteraction(dragPan); map.removeInteraction(doubleClickZoom); ``` 2. **添加自定义事件监听** ```javascript // 示例：测量工具的事件监听 let startPoint, endPoint; // 鼠标按下事件 map.on('pointerdown', (event) => { startPoint = event.coordinate; console.log('开始坐标:', startPoint); }); // 鼠标移动事件 map.on('pointermove', (event) => { if (!startPoint) return; endPoint = event.coordinate; // 实时绘制测量线（伪代码） drawMeasureLine(startPoint, endPoint); }); // 双击结束事件（引用[1]的方案） map.on('dblclick', () => { finishMeasurement(); // 结束测量 restoreInteractions(); // 恢复交互 }); ``` 3. **手动恢复交互功能** ```javascript // 恢复地图默认交互 function restoreInteractions() { if (dragPan) map.addInteraction(dragPan); if (doubleClickZoom) map.addInteraction(doubleClickZoom); console.log('地图交互功能已恢复'); } ``` 4. **备用恢复方案（按钮/超时）** ```javascript // 通过按钮恢复（引用[2]的CTRL控制思路） document.getElementById('restoreBtn').addEventListener('click', restoreInteractions); // 自动超时恢复（防止用户未完成操作） const timeoutId = setTimeout(() => { restoreInteractions(); }, 30000); // 30秒超时自动恢复 ``` ### 关键说明 1. **交互控制原理** OpenLayers 通过 `interactions` 管理所有交互行为，移除 `DragPan` 和 `DoubleClickZoom` 可禁用对应功能[^2] 2. **事件冲突处理** 使用 `pointerdown` 替代 `click` 避免与拖拽冲突，通过坐标跟踪实现连续操作 3. **性能优化** ```javascript // 添加条件判断避免高频触发 let lastRender = 0; map.on('pointermove', (event) => { if (Date.now() - lastRender < 50) return; lastRender = Date.now(); // 处理逻辑... }); ``` 4. **完整流程示例** ```javascript function startMeasurement() { // 1. 禁用交互 disableMapInteractions(); // 2. 设置事件监听 map.on('pointerdown', handleMeasureStart); map.on('pointermove', handleMeasureMove); map.on('dblclick', handleMeasureEnd); } function handleMeasureEnd() { // 3. 完成测量计算 calculateDistance(); // 4. 移除事件监听 map.un('pointerdown', handleMeasureStart); map.un('pointermove', handleMeasureMove); map.un('dblclick', handleMeasureEnd); // 5. 恢复交互功能 restoreInteractions(); } ``` ### 注意事项 1. **交互状态保存** 建议将原始交互对象存储在闭包或类属性中，确保恢复时能准确引用 2. **移动端适配** 统一使用 `pointer` 事件系列（pointerdown/pointermove）兼容触摸屏设备 3. **异常处理** ```javascript // 添加安全恢复机制 window.addEventListener('beforeunload', () => { if (!dragPan || !doubleClickZoom) restoreInteractions(); }); ``` > 此方案通过精确控制交互对象实现功能开关，避免全局禁用导致的地图卡死问题。实际坐标转换需参照项目坐标系（EPSG:4326/EPSG:3857）进行调整[^1]。