Skip to content

Commit 7615cbb

Browse files
vincentsaragovincentsarago
committed
add example
1 parent 2f38aa7 commit 7615cbb

File tree

7 files changed

+853
-0
lines changed

7 files changed

+853
-0
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,3 +113,5 @@ docs/src/api/*
113113
traefik.toml
114114
routes.toml
115115
.tms/
116+
117+
node_modules/

‎examples/ol/main.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Map from 'ol/Map.js';
2+
import View from 'ol/View.js';
3+
import MVT from 'ol/format/MVT.js';
4+
import VectorTileLayer from 'ol/layer/VectorTile.js';
5+
import OGCVectorTile from 'ol/source/OGCVectorTile.js';
6+
7+
const map = new Map({
8+
target: 'map',
9+
layers: [
10+
new VectorTileLayer({
11+
source: new OGCVectorTile({
12+
url: 'http://127.0.0.1:8081/collections/public.countries/tiles/WebMercatorQuad',
13+
context: {"z": "tileMatrix", "y": "tileRow", "x": "tileCol"},
14+
format: new MVT(),
15+
}),
16+
background: '#d1d1d1',
17+
style: {
18+
'stroke-width': 0.6,
19+
'stroke-color': '#8c8b8b',
20+
'fill-color': '#f7f7e9',
21+
},
22+
}),
23+
],
24+
view: new View({
25+
center: [0, 0],
26+
zoom: 1,
27+
}),
28+
});

‎examples/ol/main_mvt.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Map from 'ol/Map.js';
2+
import View from 'ol/View.js';
3+
import MVT from 'ol/format/MVT.js';
4+
import VectorTileLayer from 'ol/layer/VectorTile.js';
5+
import VectorTileSource from 'ol/source/VectorTile.js';
6+
7+
const map = new Map({
8+
target: 'map',
9+
layers: [
10+
new VectorTileLayer({
11+
source: new VectorTileSource({
12+
url: 'http://127.0.0.1:8081/collections/public.countries/tiles/WebMercatorQuad/{z}/{x}/{y}',
13+
format: new MVT()
14+
}),
15+
background: '#d1d1d1',
16+
style: {
17+
'stroke-width': 0.6,
18+
'stroke-color': '#8c8b8b',
19+
'fill-color': '#f7f7e9',
20+
},
21+
}),
22+
],
23+
view: new View({
24+
center: [0, 0],
25+
zoom: 1,
26+
}),
27+
});

‎examples/ol/mvt.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>OGC Vector Tiles</title>
6+
<link rel="stylesheet" href="node_modules/ol/ol.css">
7+
<style>
8+
.map {
9+
width: 100%;
10+
height: 400px;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<div id="map" class="map"></div>
16+
17+
<script type="module" src="main_mvt.js"></script>
18+
</body>
19+
</html>

‎examples/ol/ogc.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>OGC Vector Tiles</title>
6+
<link rel="stylesheet" href="node_modules/ol/ol.css">
7+
<style>
8+
.map {
9+
width: 100%;
10+
height: 400px;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<div id="map" class="map"></div>
16+
17+
<script type="module" src="main.js"></script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)