如何使用 Javascript 文件而不是 NPM 作为库（专门用于开放层）
[英]How to use Javascript Files instead of NPM as a Library (Specifically for Open Layers)
问题描述
I have been trying to get open layers to work in my Eclipse web development environment for a while now.
我一直在尝试让开放层在我的 Eclipse web 开发环境中工作一段时间。 All of the setup instructions on the Open Layers site deal with using npm. 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. However, they also have a link to a distro that has ol.js, ol.js.map, ol.css, and ol.css.map in it. In their workshop , they have a javascript file that looks like this:在他们的工作室中，他们有一个 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
})
});
What I am struggling with is how to modify it to use the java script files instead of the npm libraries.我正在努力的是如何修改它以使用 java 脚本文件而不是 npm 库。 I imagine this part would be the only thing that would change.我想这部分将是唯一会改变的部分。
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';
I tried to put the files in a folder and change the import code to:我试图将文件放在一个文件夹中并将导入代码更改为：
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';
That didn't work.那没有用。 Probably because I don't totally understand what's happening.可能是因为我不完全了解发生了什么。 I read that a js file can be used as a library, so I thought I could just reference the file.我读到一个 js 文件可以用作库，所以我想我可以引用该文件。
They also have an html file as part of tutorial, since I am not using npm, do I have to change that as well?他们还有一个 html 文件作为教程的一部分，因为我没有使用 npm，我是否也必须更改它？ I assume since they are instructing to put both the js file and the html file at the root of the project they can just reference the other (as the js file would import the css and html file would use that), but I'm not totally sure.我假设因为他们指示将 js 文件和 html 文件放在项目的根目录中，所以他们可以引用另一个文件（因为 js 文件将导入 css 和 ZFC35FDC70D5FC69D239883A822C 文件，但我不会使用该文件）完全确定。 This is the html for reference:这是 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>
Can anyone help me out?谁能帮我吗？ Thank you for your time.感谢您的时间。
2 个解决方案
解决方案1
2 已采纳 2020-05-14 10:23:22
If you want to use ol.js, ol.css;如果要使用ol.js，ol.css； you need to use the namespace ol.您需要使用命名空间ol. in the code.在代码中。
An example of how to do this is shown in the quickstart guide快速入门指南中显示了如何执行此操作的示例
Modifying your posted code:修改您发布的代码：
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
})
});
working code snippet:工作代码片段：
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
1 2020-05-18 12:17:34
Remove all the import lines from the JavaScript.从 JavaScript 中删除所有导入行。 Include the ol.js script directly with直接包含 ol.js 脚本
<script src="path_to_your_copy/ol.js"></script>
then preface everything in the OpenLayers javascript namespace with ol as mentioned by @geocodzip eg然后在 OpenLayers javascript 命名空间中的所有内容前加上@geocodzip 提到的 ol 例如
new ol.Map(...);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.