javascript - 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>
推荐阅读
- keras - 最大池化层是否会减少网络中的参数数量?
- python - 如何成功地将 python-telegram-bot 安装到 Termux 中?
- python - 从列表列表中删除多个项目
- svn - SVN 提交后挂钩:查找文件夹/提交路径
- java - 避免将 Jackson xmlMapper 用作 Spring 的默认 objectMapper
- r - 对 R 中的 vegan 包使用 dbrda 函数时出错
- javascript - Highcharts 响应在第一次渲染时被忽略
- javascript - 使用淡出和淡入时检查错误
- python - 将 pyodbc.rows 列表转换为 pandas Dataframe 需要很长时间
- python - 有没有办法在收集分数之前收集所有的姓名和 ID?