当前位置: 首页 > news >正文

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

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

官网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,}),});

interactions属性用来设置地图上的交互,DblClickDragZoom就是第二次按下鼠标拖拽缩放的类。 

 鼠标双击放大事件是openlayers自带的,如果要取消,需要这样写:

  // 禁用双击放大interactions: defaultInteractions({doubleClickZoom: false, }),

完整代码:


<template><div class="box"><h1>Double click, Drag and Zoom</h1><div id="map"></div></div>
</template><script>
import Map from "ol/Map.js";
import OSM from "ol/source/OSM.js";
import View from "ol/View.js";
import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import {DblClickDragZoom,defaults as defaultInteractions,
} from "ol/interaction.js";
export default {data() {return {map: null,};},methods: {initMap() {const map = new Map({//添加第二次点击拖拽缩放地图interactions: defaultInteractions().extend([new DblClickDragZoom()]),// 禁用双击放大// interactions: defaultInteractions({//   doubleClickZoom: false, // }),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,}),});},},mounted() {this.initMap();},
};
</script>
<style scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}
</style>

http://www.lryc.cn/news/356471.html

相关文章:

  • 前端基础入门三大核心之网络安全篇:TLS/SSL的魔法之旅
  • Flutter 中的 SnackBarAction 小部件:全面指南
  • Point-Nerf 理论笔记和理解
  • 深度学习中的梯度消失和梯度爆炸问题
  • Flink 通过 paimon 关联维表,内存降为原来的1/4
  • Python知识详解【1】~{正则表达式}
  • 装饰模式:鸡腿堡
  • 视图【mysql数据库】
  • opencv的findContours()函数
  • 多电压档hold扫尾
  • ABAP Json解析案例
  • QT学习(20):QStyle和自定义样式
  • 香橙派 AIpro 昇腾 Ascend C++ 分类模型适配
  • 2024吉林省电赛(达盛杯)
  • 【算法题】520 钻石争霸赛 2024 全解析
  • Yii 结合MPDF 给PDF文件添加多行水印
  • 你什么时候感觉学明白Java了?
  • 马斯克xAI融资60亿美元,宣布打造世界第一超算中心,10万张H100GPU
  • 贪心算法[1]
  • 卢文岩博士受邀参与中国科学院大学校友论坛 解码DPU核心价值
  • 2024年上半年软件设计师试题及答案(回忆版)
  • QGIS使用python代码导出给定坐标图片
  • 看花眼,眼花缭乱的主食冻干到底应该怎么选?靠谱的主食冻干分享
  • 开源VS闭源:谁更能推动AI技术的普及与发展?
  • 前端面试题日常练-day28 【面试题】
  • 好消息!DolphinScheduler官网集成LLM模型问答AI kapa.ai
  • 【软考】下篇 第19章 大数据架构设计理论与实践
  • 创新指南|降低 TikTok CPA 的 9 项专家策略
  • jmeter服务器性能监控分析工具ServerAgent教程
  • 工作纪实50-Idea下载项目乱码