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