Openlayers - 尝试在 map 上创建叠加功能

Question

我正在努力在我的 map 上创建叠加层。 我想在此处合并示例：

https://openlayers.org/en/latest/examples/overlay.html

https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html

但我不能使用import语句，因为我收到一个错误：

未捕获的语法错误：无法在模块外使用 import 语句

这里有一个解释：

https://github.com/TypeStrong/ts-node#syntaxerror

和这里：

为什么示例不起作用？ （与进口的斗争）

导入 ECMAScript 6 时出现“未捕获的语法错误：无法在模块外使用 import 语句”

我试图这样做：

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

但仍然出现错误，现在它与 CORS 政策有关：

CORS 策略已阻止从源“null”访问“file:///C:/Users.../layers/overlay.js”处的脚本：跨源请求仅支持协议方案：http，数据，镀铬，镀铬扩展，镀铬不受信任，https。

不幸的是，我需要离线使用此功能。

在这个线程中我发现，有一个替代导入功能：

https://gis.stackexchange.com/questions/310482/unexpected-token-identifier-error-import-openlayers/310501#310501

我尝试将我的代码调整为它，如下所示：

   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');
   });

现在我收到这样的错误：

未捕获的 TypeError：overlay 不是 overlay.js:15 的构造函数

类似于这里的问题：

openlayers3 undefined 不是 ol.source.StaticVector 上的构造函数错误

关于这一点，我发现：

https://github.com/Viglino/ol-ext

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

我的另一种方法是用new ol.Overlay替换new overlay 。 在这种情况下，控制台什么也没说，但我根本看不到覆盖。

该代码可能是特定的，因为它来自 QGIS2web 插件。 map 以及 index.html 文件的主要脚本，您可以在下面的小提琴链接中找到：

https://jsfiddle.net/2adv41bs/

许多来源将我引向最新的 ol package

https://openlayers.org/download/

但由于我取代了我的 HTML 代码中的链接，它仍然根本不起作用

我也不熟悉在 openlayers 中创建包

https://openlayers.org/en/latest/doc/tutorials/bundle.html

一个类似的线程在这里：

https://gis.stackexchange.com/questions/380382/incorporating-overlay-for-the-openlayers-map-generated-by-qgis2web-plugin

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

Answer 1

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

https://gis.stackexchange.com/questions/310482/unexpected-token-identifier-error-import-openlayers/310501#310501

这完全改变了这种情况，因为现在最终的代码看起来像这样：

HTML

   <div id="map" class="map">
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content"></div>
        </div>
    </div>
    <div style="display: none;">
    <!-- Clickable label for Vienna -->
    <a class="overlay" id="vienna" target="_blank" 
    href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
    <div id="marker" title="Marker"></div>
   
    <!-- Popup -->
    <div id="popup" title="Welcome to OpenLayers"></div>
   </div>

接下来，我们的 CSS

   #marker {
    width: 20px;
    height: 20px;
    border: 1px solid #088;
    border-radius: 10px;
    background-color: #0FF;
    opacity: 0.5;
   }
    #vienna {
    text-decoration: none;
    color: white;
    font-size: 11pt;
    font-weight: bold;
    text-shadow: black 0.1em 0.1em 0.2em;
   }

   .popover-body {
     min-width: 276px;
   }

和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文件。