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

【问题标题】：Angular5, Openlayers5 make your popup(overlay) draggableAngular 5，Openlayers 5 使您的弹出（覆盖）可拖动
【发布时间】：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

标签： angular drag-and-drop overlay openlayers draggable

【解决方案1】：

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

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

【讨论】：

我们也可以在覆盖层上制作一个可点击的部分
当我开始直接拖动弹出窗口时，也会在您发送给我的示例中切换位置。知道如何将单击弹出窗口的点设置为必须开始拖动的点吗？
弹出窗口位于光标位置的锚点上。