OpenLayers：从服务器获取 Map、View、TileLayer 和 OSM
[英]OpenLayers: get Map, View, TileLayer and OSM from server
问题描述
I am new using OpenLayers (an open-source JavaScript library for displaying map data in web browsers as slippy maps).
我是使用 OpenLayers 的新手（一个开源 JavaScript 库，用于在 web 浏览器中将 map 数据显示为滑动地图）。 I am using it with Thymeleaf (a Java XML/XHTML/HTML5 template engine that can work both in web and non-web environments).我将它与 Thymeleaf（一个 Java XML/XHTML/HTML5 模板引擎，可以在 web 和非 Web 环境中工作）一起使用。
I am trying to reproduce this example, but getting the resources from the server https://openlayers.org/en/latest/examples/reprojection-wgs84.html我正在尝试重现此示例，但从服务器https://openlayers.org/en/latest/examples/reprojection-wgs84.html获取资源
I have this page:我有这个页面：
<!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>
and I would like to know how to get those objects also from the server:我想知道如何从服务器获取这些对象：
import Map from '/css/Map';
import View from '/css/View';
import TileLayer from '/css/layer/Tile';
import OSM from '/css/source/OSM';
2 个解决方案
解决方案1
3 已采纳 2020-06-09 21:17:12
Not sure what mean but if "getting from the server" means accessing the imports directly from a compiled source (be it on your server or elsewhere), this is how to do it:不知道是什么意思，但如果“从服务器获取”意味着直接从编译源访问导入（无论是在您的服务器上还是在其他地方），这是如何做到的：
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>
解决方案2
2 2020-06-09 22:57:03
When you are calling当你打电话时
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
you actually get the built file from CDN (I guess, "the server" you talked about).您实际上是从CDN获取构建文件（我猜是您所说的“服务器”）。 So, in that file you can access the modules Map, View, TileLayer, OSM etc... All as a result of the import of the script from CDN .因此，在该文件中，您可以访问模块Map, View, TileLayer, OSM等...所有这些都是从CDN导入脚本的结果。
If you want to load these files from your local project, which can be "offline", you can install them using Package Manager (like NPM ) or just download the bundled (built) files ( css and js ), save them in a directory you could access to, and change your source to the directory.如果您想从本地项目加载这些文件，可以“离线”，您可以使用 Package 管理器（如NPM ）安装它们，或者只需下载捆绑（构建）文件（ css js它们保存在目录中您可以访问并将源代码更改为目录。
My recommendation (and also OpenLayer's) is using npm and then use it regularly (import ol ):我的建议（以及 OpenLayer 的）是使用npm然后定期使用它（import ol ）：
index.js index.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
})
});
index.html索引.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>
In that case, OpenLayer's files are INSTALLED in your project inside node_modules and you are no longer dependent on external network traffic to the CDN .在这种情况下，OpenLayer 的文件将安装在您的项目中的 node_modules 中，并且您不再依赖于CDN的外部网络流量。
That's it:)而已：）
You can follow the complete guide here (they explain there how to bundle and run the program):您可以按照此处的完整指南进行操作（他们在那里解释了如何捆绑和运行程序）：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.