I am new using OpenLayers (an open-source JavaScript library for displaying map data in web browsers as slippy maps). I am using it with Thymeleaf (a Java XML/XHTML/HTML5 template engine that can work both in web and non-web environments).
I am trying to reproduce this example, but getting the resources from the server .html
I have this page:
<!doctype html>
<html lang="en" xmlns:th="">
<head>
<title>Title</title>
<script src=".github.io@master/en/v6.3.1/build/ol.js"></script>
<link rel="stylesheet" href=".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';
I am new using OpenLayers (an open-source JavaScript library for displaying map data in web browsers as slippy maps). I am using it with Thymeleaf (a Java XML/XHTML/HTML5 template engine that can work both in web and non-web environments).
I am trying to reproduce this example, but getting the resources from the server https://openlayers/en/latest/examples/reprojection-wgs84.html
I have this page:
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf">
<head>
<title>Title</title>
<script src="https://cdn.jsdelivr/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr/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';
-
1
What's the exact issue? If I start you code as a simple HTML it works just fine. The only thing I can imagine is that the paths to the modules you want to import are wrong. By the way
cssis a really bad name for a folder withjsin it. – x00 Commented Jun 9, 2020 at 14:34 - 1 Maybe you don't know how to add static resources to Thymeleaf? Then maybe this will help: memorynotfound./… – x00 Commented Jun 9, 2020 at 14:38
2 Answers
Reset to default 4 +150Not sure what mean but if "getting from the server" means accessing the imports directly from a piled 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/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr/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>When you are calling
<script src="https://cdn.jsdelivr/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).
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.
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.
My remendation (and also OpenLayer's) is using npm and then use it regularly (import ol):
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
<!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.
That's it :)
You can follow the plete guide here (they explain there how to bundle and run the program):
OpenLayers using NPM
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745334300a4623031.html
评论列表（0条）