openlayers使用中判断旋转交互并禁用

最新推荐文章于 2023-09-14 14:58:37 发布

白执落

最新推荐文章于 2023-09-14 14:58:37 发布

阅读量533

点赞数

分类专栏： problem

本文链接：https://blog.csdn.net/qq_39331257/article/details/117919893

版权

problem 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

博客讲述了在公司封装的OpenLayers地图组件库中，由于未暴露交互修改接口导致预设的交互禁用配置无效。作者通过分析发现实例化的地图对象与交互事件对象不一致，从而提出两种解决方案。第一种尝试使用`instanceof`判断并禁用交互，但因对象不同失败。第二种方案是根据交互默认顺序禁用特定索引的交互事件，最终成功解决了问题。

摘要由CSDN通过智能技术生成

普通禁用

 mapConfig: {
        map: {
            id: 'baseMap',
            view: {
                center: {
                    coord: [经度, 纬度],
                },
                zoom: 10,
                maxZoom: 15,
            },
            events: ['singleclick', 'pointermove'],
        },
        baseLayer: [
            {
                name: 'xxx',
                source: {
                    type: 'XYZ',
                    projection: 'GCJ02',
                    url: 地图链接
                }
            }
        ],
        interactions: {
       		altShiftDragRotate: false, // alt+shift拖拽旋转
        	pinchRotate: false,// 双指触屏转动实现旋转
        }

出现问题：公司重新封装了openlayers为地图组件库但是并未实现交互的修改，仅暴露singleclick点击事件等，因此上述配置不生效
解决方案一：判断交互并禁用

	import { olData } from '@/utils/公司地图组件库打包后的min.js';
	import DragRotate from 'ol/interaction/DragRotate';
	import PinchRotate from 'ol/interaction/PinchRotate';
	let map = await olData.getMap('baseMap');
	let interactionsArr = map.getInteractions().getArray();
		interactionsArr.forEach((item: any, index: number) => {
		 if (item instanceof DragRotate || item instanceof PinchRotate) {
			item.setActive(false);
		}

失败原因：实际上组件库中是重新new了一个olMap，也就是说实质上页面上地图对象和引入的交互事件所在的对象并非同一个，不在同一原型链上，所以instanceof的判断结果全部为false
解决方案二：查看官网交互相关内容官网地址发现交互默认的ol/interaction.defaults交互顺序是固定的，也就是说找到相应的交互事件所在的位置并禁止即可，也就是DragRotate，PinchRotate所对应的就是禁止index为0和3的事件

	let interactionsArr = map.getInteractions().getArray();
		interactionsArr.forEach((item: any, index: number) => {
			if (index == 0 || index == 3) {
				item.setActive(false);
			}
		});