时间戳

首页 > 解决方案 > Openlayers 3 选择交互无法添加事件条件

angular - Openlayers 3 选择交互无法添加事件条件

问题描述

因此，当我将鼠标悬停在任何明显突出显示的功能上时，我正在尝试将选择交互添加到我的地图中。

import Select from 'ol/interaction/select';
import pointerMove from 'ol/events/condition.js'

this.selectPointerMove = new Select({
   condition: pointerMove
});
this.coreMapComponent.map.addInteraction(this.selectPointerMove);

条件字段抛出错误 -

 Type 'typeof events' is not assignable to type 'EventsConditionType'.
 Type 'typeof events' provides no match for the signature '(event: MapBrowserEvent): boolean'.

如果没有条件，它可以在鼠标单击时正常工作。

应该在使用“@types/ol”的 Angular 6 项目中提及这一点：“^4.6.2”，如果这有任何相关性的话。

标签： angulartypescriptopenlayersopenlayers-3

解决方案

当前的 Openlayers 版本 5.xx 需要一些打字更新。由于即使您使用的是 Openlayers 5.xx，安装的类型也来自 4.xx 版

这意味着您需要对代码进行一些解决方法。

由于版本 4.xx 上的所有类型都使用DefaultExports方法，因此您不能使用NamedExports，例如：

import {pointerMove} from 'ol/events/condition';

解决方案：

您可以做的一种选择是将 all 作为变量导入。有了这个，您将逃避 TS 错误：

import Select from 'ol/interaction/select';
import * as condition from 'ol/events/condition';

this.selectPointerMove = new Select({
   condition: (condition as any).pointerMove
});
this.coreMapComponent.map.addInteraction(this.selectPointerMove);

这样做的一个副作用是您将删除进行 tree-shacking 的选项，但是，没有它，您将生存下来。

希望这可以帮助！

推荐阅读