【记录5】openlayers 禁止地图旋转

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量639 收藏
点赞数 1
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44390036/article/details/124949198
版权

在ol.View下放 enableRotation: false,

const map = new ol.Map({
        target: 'mapCon',
        layers: [gaodeMapLayer],
        view: new ol.View({
          projection: 'EPSG:4326',
          center: [initLng, initLat],
          zoom: 12,
          maxzoom: 20,
          //这里加入下面代码
          enableRotation: false,
        }),
Merlin丶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Openlayers绘制地图标注
10-14
主要为大家详细介绍了Openlayers绘制地图标注，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers5加载天地图影像.zip
06-23
使用openlayers5加载天地图影像，可以供参考使用，希望可以改进代码，重新使用。
openlayers禁止手指缩放地图、禁止拖拽...
qq_61950936的博客
03-20 468
shiftDragZoom: false, // 取消shift+wheel左键拖动交互。mouseWheelZoom: false, // 取消滚动鼠标中间的滑轮交互。doubleClickZoom: false, // 禁用双击缩放。pinchZoom: false, // 禁止手指缩放地图。dragPan: false, // 禁止拖拽。openlayers阻止默认行为。
openlayers使用中判断旋转交互并禁用
一一
06-15 425
普通禁用 mapConfig: { map: { id: 'baseMap', view: { center: { coord: [经度, 纬度], }, zoom: 10, maxZoom: 15, }, events: [.
openlayers拖拽、旋转、缩放、拉伸变形 (十二)
吴佩佩佩佩的博客
08-12 7170
gis应用中拖动旋转和缩放是编辑中比较常见的功能，在openlayers中拖拽可以通过ol.interaction.Translate来实现，其他功能没有，所以要用的openlayers的一个扩展ol-ext。 1. ol-ext ol-ext是openlayers的扩展，他主要包含控件，交互，弹出窗口等功能。类似于WEB前端的UI框架。他是一个成熟的扩展，可以让你省去很多时间，避免很多问题。 注意区分一下使用方式对应的包名： 在webpack中使用 npm install ol-ext 在web中使用
openlayser 禁止移动端地图旋转
总结前端开发中遇到的问题，分享前端知识
01-06 577
旋转属于交互事件，禁止旋转需要在interation里面去定义， 相关设置：OpenLayers v6.10.0 API - Module: ol/interaction import {defaults as defaultInteractions} from 'ol/interaction' this.map = new Map({ interactions: defaultInteractions({ pinchRotate: false //..
openlayers地图旋转_javascript – 有没有办法禁用OpenLayers 3中的旋转？
weixin_39600837的博客
12-22 588
是的,有一种方法来停用旋转地图的能力.您需要自定义ol.Map对象的交互.要么使用ol.interaction.defaults函数来创建一个具有交互的ol.Collection,要么创建一个仅包含所需交互的数组.然后可以将其传递给ol.Map的构造函数.var interactions = ol.interaction.defaults({altShiftDragRotate:false,pin...
openlayers限制地图显示范围
weixin_筱玉的博客
07-25 2023
openlayers 限制地图视图显示范围
Openlayer设置地图不可旋转 Uniapp
西柚2015地信小白GISer
07-11 2367
遇到问题：在Uniapp中集成Openlayer，在操作中并不想让用户去控制地图的旋转，在文档中找到设置地图不可旋转的设置，这里个人记录一下。
openlayers实现锁定地图，不可使用鼠标拖动放大缩小地图
qq_44473822的博客
03-09 1460
openlayers解决不可使用鼠标拖拽滚动查看地图
Vue+Openlayers中实现地图旋转
BADAO_LIUMANG_QIZHI的博客
11-10 2419
场景 Vue+Openlayers实现地图上绘制线： Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面实现的效果是这样的 此地图的显示时正常的，如果地图是倾斜的，想要把地图进行一个旋转。 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、修改map对象的view中的rotation属性 ...
使用openlayers加载离线地图实例
10-06
使用openlayers加载离线地图实例，可通过mui打包成app。简单，易上手
openlayers实现地图弹窗
01-18
本文实例为大家分享了openlayers实现地图弹窗的具体代码，供大家参考，具体内容如下 <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; ...
Openlayers实现地图全屏显示
10-14
主要为大家详细介绍了Openlayers实现地图全屏显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Openlayers实例详解
08-09
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
210：vue+openlayers 编辑矢量图形（放缩、平移、变形、旋转）
大剑师兰特的GIS世界
03-07 647
第210个本示例的目的是介绍演示如何在vue+openlayers中编辑图形，这里可以缩放，变形、旋转、平移等。启动编辑时候，可以编辑，停止编辑，去掉相应的操作。
OpenLayers 地图交互事件 缩放、旋转
不会功夫的茶的博客
07-20 5777
//设置不能缩放 interactions: ol.interaction.defaults({                     doubleClickZoom: false,                     mouseWheelZoom: false,                     shiftDragZoom: false,                     p...
【OpenLayers】ol3设置地图可拖动、禁止拖动
OG
07-07 5774
let pan = getPan(); pan.setActive(false);//false：当前地图不可拖动。true：可拖动 function getFun() { let pan; map.getInteractions().forEach(function(element, index, array) { if(element instanceof o...
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 116
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
openlayers地图旋转_Openlayers实现地图全屏显示
06-08
要实现Openlayers地图的全屏显示，可以使用浏览器提供的Fullscreen API来实现。具体步骤如下： 1. 创建一个按钮或者一个链接，用于触发全屏显示。 2. 绑定该按钮或链接的点击事件，在事件处理函数中调用地图对象的requestFullscreen()方法，请求浏览器进入全屏模式。 3. 监听Fullscreen API的fullscreenchange事件。当该事件被触发时，检查当前是否处于全屏模式。如果是，则设置地图的尺寸为浏览器窗口的尺寸。 下面是一个实现Openlayers地图全屏显示的示例代码： ``` // 创建地图对象 var map = new ol.Map({ target: 'map', layers: [ // 添加地图图层 new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ // 设置地图中心点和缩放级别 center: ol.proj.fromLonLat([120, 30]), zoom: 10 }) }); // 创建全屏按钮 var fullscreenBtn = document.createElement('button'); fullscreenBtn.innerText = '全屏'; // 点击按钮进入全屏模式 fullscreenBtn.addEventListener('click', function() { if (document.fullscreenElement) { document.exitFullscreen(); } else { map.getTargetElement().requestFullscreen(); } }); // 监听Fullscreen API的fullscreenchange事件 document.addEventListener('fullscreenchange', function() { if (document.fullscreenElement) { // 进入全屏模式时设置地图大小为浏览器窗口大小 map.setSize([window.innerWidth, window.innerHeight]); } else { // 退出全屏模式时恢复地图原来的大小 map.setSize([500, 500]); } }); // 将按钮添加到页面中 document.body.appendChild(fullscreenBtn); ``` 该示例代码中创建了一个地图对象，并添加了一个OpenStreetMap图层。然后创建了一个全屏按钮，点击该按钮可以进入或退出全屏模式。最后监听了Fullscreen API的fullscreenchange事件，在事件处理函数中设置了地图的大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值