Angular 5，Openlayers 5 使您的弹出（覆盖）可拖动

Posted 2023-05-08

【中文标题】Angular 5，Openlayers 5 使您的弹出（覆盖）可拖动

【英文标题】：Angular5, Openlayers5 make your popup(overlay) draggable

【发布时间】：2019-11-07 08:19:00

【问题描述】：

我正在尝试使我的弹出窗口可拖动。我已经看到了一些旧版 openlayers 的解决方案，但这些不适用于新版本。

地图：

this.map = new OlMap(
  target: 'map',
  layers: [
    new OlTileLayer(
      name: 'maplayer',
      source: new OlXYZ(
        url: 'https://api.tiles.mapbox.com/v4/mapbox.streets/z/x/y.png?access_token=',
        title: 'maplayer'
      )
    )
  ],
  view: this.view
);

弹出窗口：

this.popup = document.getElementById('popup');

    this.incidentOverlay = new Overlay((
      element: this.popup,
      autoPan: true,
      autoPanAnimation: 
        duration: 250
      ,
      autoPanMargin: 250,
    ));

让我的叠加层可拖动的最佳方法是什么

非常感谢

【问题讨论】：

这对你有帮助吗：openlayers.org/en/latest/examples/translate-features.html?

@Askirkela 我也看到了那个例子，但是当它在 angular5 中过期时，它说 new Select() 没有构造函数在 Angular 中我使用的是 OL 模块。现在我有点卡住了

您可以在创建 Select 实例时传递选项（查看文档）。请记住，ol 包的最新类型并非都是最新的。

@Askirkela 你有我如何结合 angular5 解决这个问题的例子吗？

为什么不升级到7？ material.angular.io/cdk/drag-drop/examples

【参考方案1】：

看看ol-ext lib的ol/interaction/DragOverlay。

这里有一个例子：https://viglino.github.io/ol-ext/examples/interaction/map.interaction.dragoverlay.html

【讨论】：

我们也可以在覆盖层上制作一个可点击的部分

当我开始直接拖动弹出窗口时，也会在您发送给我的示例中切换位置。知道如何将单击弹出窗口的点设置为必须开始拖动的点吗？

弹出窗口位于光标位置的锚点上。