如何使用 Javascript 文件而不是 NPM 作為庫（專門用於開放層）

Question

我一直在嘗試讓開放層在我的 Eclipse web 開發環境中工作一段時間。 Open Layers 站點上的所有設置說明都使用 npm。 However, they also have a link to a distro that has ol.js, ol.js.map, ol.css, and ol.css.map in it. 在他們的工作室中，他們有一個 javascript 文件，如下所示：

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';

new Map({
  target: 'map-container',
  layers: [
    new TileLayer({
      source: new XYZSource({
        url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
      })
    })
  ],
  view: new View({
    center: fromLonLat([0, 0]),
    zoom: 2
  })
});

我正在努力的是如何修改它以使用 java 腳本文件而不是 npm 庫。 我想這部分將是唯一會改變的部分。

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';

我試圖將文件放在一個文件夾中並將導入代碼更改為：

import './lib/ol.css'
import {Map, View} './lib/ol.js'
import TileLayer from './lib/ol.js';
import XYZSource from './lib/ol.js';
import {fromLonLat} from './lib/ol.js';

那沒有用。 可能是因為我不完全了解發生了什么。 我讀到一個 js 文件可以用作庫，所以我想我可以引用該文件。

他們還有一個 html 文件作為教程的一部分，因為我沒有使用 npm，我是否也必須更改它？ 我假設因為他們指示將 js 文件和 html 文件放在項目的根目錄中，所以他們可以引用另一個文件（因為 js 文件將導入 css 和 ZFC35FDC70D5FC69D239883A822C 文件，但我不會使用該文件）完全確定。 這是 html 供參考：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenLayers</title>
    <style>
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>
  </body>
</html>

誰能幫我嗎？ 感謝您的時間。

Answer 1

如果要使用ol.js，ol.css； 您需要使用命名空間ol. 在代碼中。

快速入門指南中顯示了如何執行此操作的示例

修改您發布的代碼：

new ol.Map({
  target: 'map-container',
  layers: [
    new ol.layer.Tile({ // TileLayer({
      source: new ol.source.XYZ({ // XYZSource({
        url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
      }) 
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});

工作代碼片段：

 new ol.Map({ target: 'map-container', layers: [ new ol.layer.Tile({ // TileLayer({ source: new ol.source.XYZ({ // XYZSource({ url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg' }) }) ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 2 }) });

 html, body, #map-container { margin: 0; height: 100%; width: 100%; font-family: sans-serif; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css"> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script> <div id="map-container"></div>

Answer 2

從 JavaScript 中刪除所有導入行。 直接包含 ol.js 腳本

<script src="path_to_your_copy/ol.js"></script>

然后在 OpenLayers javascript 命名空間中的所有內容前加上@geocodzip 提到的 ol 例如

new ol.Map(...);

如何使用 Javascript 文件而不是 NPM 作為庫（專門用於開放層）

問題描述

2 個解決方案

解決方案1
2 已采納 2020-05-14 10:23:22

解決方案2
1 2020-05-18 12:17:34

如何使用 Javascript 文件而不是 NPM 作為庫（專門用於開放層）

問題描述

2 個解決方案

解決方案1 2 已采納 2020-05-14 10:23:22

解決方案2 1 2020-05-18 12:17:34

解決方案1
2 已采納 2020-05-14 10:23:22

解決方案2
1 2020-05-18 12:17:34