[英]How to use Javascript Files instead of NPM as a Library (Specifically for Open Layers)
我一直在尝试让开放层在我的 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>
谁能帮我吗? 感谢您的时间。
如果要使用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>
从 JavaScript 中删除所有导入行。 直接包含 ol.js 脚本
<script src="path_to_your_copy/ol.js"></script>
然后在 OpenLayers javascript 命名空间中的所有内容前加上@geocodzip 提到的 ol 例如
new ol.Map(...);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.