Javascript Openlayers-尝试在地图上创建覆盖功能

我正在努力在地图上创建覆盖图。我想结合如下示例：

但是我不能使用

import

语句，因为我得到一个错误：

未捕获语法错误：无法在模块外部使用导入语句

这里有一个解释：

在这里：

我试着这样做：

      <script type="module" src="./layers/overlay.js" type="text/javascript"></script>

   var fromLonLat = ol.proj.fromLonLat

   var pos = fromLonLat([-0.21005,52.08093]);


   var overlay = new ol.Overlay({
   element: container,
   autoPan: true,
   autoPanAnimation: {
   duration: 250,
   },
  });

   var popup = new overlay({
   element: document.getElementById('popup'),
  });
   map.addOverlay(popup);

  // Vienna marker
  var marker = new overlay({
  position: pos,
  positioning: 'center-center',
  element: document.getElementById('marker'),
  stopEvent: false,
  });
  map.addOverlay(marker);

 // Vienna label
 var vienna = new overlay({
 position: pos,
 element: document.getElementById('vienna'),
 });
 map.addOverlay(vienna);

 map.on('click', function (evt) {
 var element = popup.getElement();
 var coordinate = evt.coordinate;
 var hdms = toStringHDMS(toLonLat(coordinate));

  $(element).popover('dispose');
  popup.setPosition(coordinate);
  $(element).popover({
  container: element,
  placement: 'top',
  animation: false,
  html: true,
  content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
  });
  $(element).popover('show');
   });

现在我得到了这样一个错误：

      <script type="module" src="./layers/overlay.js" type="text/javascript"></script>

   var fromLonLat = ol.proj.fromLonLat

   var pos = fromLonLat([-0.21005,52.08093]);


   var overlay = new ol.Overlay({
   element: container,
   autoPan: true,
   autoPanAnimation: {
   duration: 250,
   },
  });

   var popup = new overlay({
   element: document.getElementById('popup'),
  });
   map.addOverlay(popup);

  // Vienna marker
  var marker = new overlay({
  position: pos,
  positioning: 'center-center',
  element: document.getElementById('marker'),
  stopEvent: false,
  });
  map.addOverlay(marker);

 // Vienna label
 var vienna = new overlay({
 position: pos,
 element: document.getElementById('vienna'),
 });
 map.addOverlay(vienna);

 map.on('click', function (evt) {
 var element = popup.getElement();
 var coordinate = evt.coordinate;
 var hdms = toStringHDMS(toLonLat(coordinate));

  $(element).popover('dispose');
  popup.setPosition(coordinate);
  $(element).popover({
  container: element,
  placement: 'top',
  animation: false,
  html: true,
  content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
  });
  $(element).popover('show');
   });

未捕获类型错误：覆盖不是构造函数 在overlay.js:15

与这里的问题类似：

关于这一点，我发现：

包括OpenLayers的所有相关扩展。不幸的是，在附加了相关脚本之后，问题仍然存在

我的另一个方法是用

新的ol.overlay

替换

新的overlay

。在这种情况下，控制台什么也没说，但我根本看不到覆盖层

代码可能是specicif，因为它来自QGIS2web插件。包含map的主要脚本以及index.html文件，您可以在下面的fiddle链接中找到：

许多消息来源向我介绍了最新的ol软件包

但由于我在HTML代码中取代了链接，它仍然无法工作

我也不熟悉在openlayers中创建捆绑包

这里有一条类似的线索：

---

是否可以为Openlayers map离线启动覆盖选项？

导入的好选择可以在这里找到：

这完全改变了情况，因为现在最终代码可以如下所示：

HTML

还有JS

    var fromLonLat = ol.proj.fromLonLat

    var pos = fromLonLat([-0.19610,52.07769]);

    var popup = new ol.Overlay({
    element: document.getElementById('popup'),
    });
    map.addOverlay(popup);

    var marker = new ol.Overlay({
    position: pos,
    positioning: 'center-center',
    element: document.getElementById('marker'),
    stopEvent: false,
    });
    map.addOverlay(marker);

    var vienna = new ol.Overlay({
    position: pos,
    element: document.getElementById('vienna'),
    });
    map.addOverlay(vienna);

    map.on('click', function (evt) {
    var element = popup.getElement();
    var coordinate = evt.coordinate;
    var hdms = toStringHDMS(toLonLat(coordinate));

    $(element).popover('dispose');
    popup.setPosition(coordinate);
    $(element).popover({
    container: element,
    placement: 'top',
    animation: false,
    html: true,
    content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
    });
    $(element).popover('show');
    });

---

显然，CSS和JS文件都必须附加到主

index.html

文件，如果我们想让它工作的话。

您需要使用与OpenLayers 4示例相同的语法，您不需要包括overlay.JS，因为它是ol.JS的一部分。您使用的示例需要引导库。您可以通过在容器中创建自己的元素并设置其样式来避免这种情况？如果我试图使您的代码正常工作，我会得到一个javascript错误：

uncaughtreferenceerror:container未定义

。请提供一个示例来说明您的问题，您的问题的一部分是行

newoverlay

，这些行应该是bel

ol.overlay

（与第一个一样）。类似地图的存储库在这里：所有这些都是由QGIS2web插件生成的，这就是代码如此具体并导致问题的原因。