OpenLayers:从服务器获取Map，View，TileLayer和OSM

我是使用OpenLayers(一个开源JavaScript库，用于在Web浏览器中将地图数据显示为滑溜溜的地图(的新手。我正在将它与Thymeleaf(Java XML/XHTML/HTML5模板引擎，可以在Web和非Web环境中工作(一起使用。

我正在尝试重现此示例，但从服务器获取资源 https://openlayers.org/en/latest/examples/reprojection-wgs84.html

我有这个页面：

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Title</title>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">
<style>
.map {
width: 100%;
height:400px;
}
</style>
</head>
<body>
<div id="layout">

<div id="main">
<div class="content">
<div class="pure-g">
<div class="pure-u-1-1 pure-u-xl-10-24 pure-u-med-1">
<!-- Content right Wrap -->
<div class="content_r_wrap">
<!-- Devices Map Module -->
<div class="windowHead">
<h2>LOCATION INFO</h2>
</div>
<div class="windowContentMap">
<div id="map" class="map"></div>
<script th:inline="javascript" th:type="module">
/*<![CDATA[*/
import Map from '/css/Map';
import View from '/css/View';
import TileLayer from '/css/layer/Tile';
import OSM from '/css/source/OSM';
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 2
})
});
/*]]>*/
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

我也想知道如何从服务器获取这些对象：

import Map from '/css/Map';
import View from '/css/View';
import TileLayer from '/css/layer/Tile';
import OSM from '/css/source/OSM';

不确定是什么意思，但如果"从服务器获取"意味着直接从编译的源(无论是在您的服务器上还是其他地方(访问导入，这是如何做到的：

const Map = window.ol.Map;
const View = window.ol.View;
const TileLayer = window.ol.layer.Tile;
const OSM = window.ol.source.OSM;
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 2
})
});

<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<style>
.map {
width: 100%;
height: 400px;
}
</style>
<div id="layout">
<div id="main">
<div class="content">
<div class="pure-g">
<div class="pure-u-1-1 pure-u-xl-10-24 pure-u-med-1">
<!-- Content right Wrap -->
<div class="content_r_wrap">
<!-- Devices Map Module -->
<div class="windowHead">
<h2>LOCATION INFO</h2>
</div>
<div class="windowContentMap">
<div id="map" class="map"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

当你打电话时

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>

您实际上从CDN(我猜，您谈到的"服务器"(获取构建的文件。因此，在该文件中，您可以访问模块Map, View, TileLayer, OSM等...所有这些都是从CDN导入脚本的结果。

如果要从本地项目(可以是"脱机"(加载这些文件，可以使用包管理器(如NPM(安装它们，或者仅下载捆绑(构建(文件(css和js(，将它们保存在可以访问的目录中，并将源更改为该目录。

我的建议(以及OpenLayer的建议(是使用npm然后定期使用它(导入ol(：

索引.js

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});

索引.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Parcel with OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>

在这种情况下，OpenLayer 的文件将安装在node_modules内部的项目中，您不再依赖于CDN的外部网络流量。

就是这样:)

您可以在此处遵循完整指南(他们在那里解释了如何捆绑和运行程序(：

使用 NPM 的 OpenLayers

相关内容

最新更新

热门标签：