如何使用 Javascript 文件而不是 NPM 作为库（专门用于开放层）答案

【问题标题】：How to use Javascript Files instead of NPM as a Library (Specifically for Open Layers)如何使用 Javascript 文件而不是 NPM 作为库（专门用于开放层）
【发布时间】：2020-05-18 20:17:34
【问题描述】：

一段时间以来，我一直在尝试让开放层在我的 Eclipse Web 开发环境中工作。 Open Layers 站点上的所有设置说明都涉及使用 npm。但是，它们也有一个指向包含 ol.js、ol.js.map、ol.css 和 ol.css.map 的发行版的链接。在他们的workshop 中，他们有一个如下所示的 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 而 html 文件将使用它），但我不是完全确定。这是供参考的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>

谁能帮帮我？感谢您的宝贵时间。

【问题讨论】：

您必须学习 webpack 并学习如何使用它来捆绑和构建 JavaScript 应用程序。

标签： javascript html npm openlayers

【解决方案1】：

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

quickstart guide 中显示了如何执行此操作的示例

修改您发布的代码：

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

工作代码 sn-p：

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>

【讨论】：

【解决方案2】：

从 JavaScript 中删除所有导入行。直接包含 ol.js 脚本

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

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

new ol.Map(...);

【讨论】：