Skip to content

Commit f2a2ee9

Browse files
GustryGustry
authored
Merge pull request #26 from neo-garaix/demo-reproj-vector
ADD Demo Vector + Projections
2 parents 6124d84 + af0e164 commit f2a2ee9

File tree

8 files changed

+238
-4
lines changed

8 files changed

+238
-4
lines changed

‎ol-proj4rs-demo-app/index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,13 @@ <h4 id="title">Image Reprojection</h4>
3737
<p class="description">Example of a Sphere Mollweide map with a Graticule layer.</p>
3838
</a>
3939
</div>
40+
<div class="col-md-4 col-sm-6">
41+
<a class="example bg-light border rounded" href="vector-projections.html">
42+
<strong>Vector projections</strong><br>
43+
<small>(vector-projections.html)</small>
44+
<p class="description">This example shows a GeoJSON layer that is well converted between various projections.</p>
45+
</a>
46+
</div>
4047
</container>
4148
</body>
4249
</html>

‎ol-proj4rs-demo-app/reprojection-image.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ <h3>proj4rs</h3>
6262
<a class="navLabel" href="wms-image-custom-proj.html">Single Image WMS</a><br>
6363
<a id="navLabelActive" class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
6464
<a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
65-
<a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a>
65+
<a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a><br>
66+
<a class="navLabel" href="vector-projections.html">Vector projections</a>
6667
</nav>
6768

6869
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->

‎ol-proj4rs-demo-app/reprojection.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,8 @@ <h3>proj4rs</h3>
8989
<a class="navLabel" href="wms-image-custom-proj.html">Single Image WMS</a><br>
9090
<a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
9191
<a id="navLabelActive" class="navLabel" href="reprojection.html">Raster reprojection</a><br>
92-
<a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a>
92+
<a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a><br>
93+
<a class="navLabel" href="vector-projections.html">Vector projections</a>
9394
</nav>
9495

9596
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->

‎ol-proj4rs-demo-app/sphere-mollweide.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ <h3>proj4rs</h3>
5858
<a class="navLabel" href="wms-image-custom-proj.html">Single Image WMS</a><br>
5959
<a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
6060
<a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
61-
<a id="navLabelActive" class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a>
61+
<a id="navLabelActive" class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a><br>
62+
<a class="navLabel" href="vector-projections.html">Vector projections</a>
6263
</nav>
6364

6465
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->

‎ol-proj4rs-demo-app/style.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,7 @@ nav:hover {
204204
.navLabel {
205205
border-right: solid 3px #000000;
206206
color: black;
207+
background-color: white;
207208
width: 40px;
208209
height: 50px;
209210
transition: ease 200ms;

‎ol-proj4rs-demo-app/vector-projections.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Vector Projections</title>
6+
<link rel="icon" type="image/x-icon" href="favicon.ico">
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="codeStyle.css">
9+
</head>
10+
<body>
11+
<header>OpenLayers + Proj4rs</header>
12+
<h4 id="title">Vector Projections</h4>
13+
<div id="map" class="map"></div>
14+
<form class="reprojection-form">
15+
16+
<label for="view-projection">View projection:</label>
17+
<select id="view-projection">
18+
<option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
19+
<option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
20+
<option value="ESRI:54009">Mollweide (ESRI:54009)</option>
21+
<option value="EPSG:27700">British National Grid (EPSG:27700)</option>
22+
<option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
23+
<option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option>
24+
<option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
25+
<option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
26+
</select>
27+
28+
</form>
29+
<p class="demo-description">
30+
This example shows a GeoJSON layer that is well converted between various projections.
31+
</p>
32+
33+
<div class="code-section">
34+
<pre class="left" tabindex="0">
35+
<h3>proj4 OpenLayers</h3>
36+
<code class="language-js">
37+
<span class="token keyword">import</span> Map <span class="token keyword">from</span> <span class="token string">'ol/Map.js'</span>;<span class="token keyword">import</span> TileGrid <span class="token keyword">from</span> <span class="token string">'ol/tilegrid/TileGrid.js'</span>;
38+
<span class="token keyword">import</span> View <span class="token keyword">from</span> <span class="token string">'ol/View.js'</span>;
39+
<span class="change"><span class="token keyword">import</span> proj4 <span class="token keyword">from</span> <span class="token string">'proj4'</span>;</span>
40+
<span class="token keyword">import</span> {getCenter} <span class="token keyword">from</span> <span class="token string">'ol/extent.js'</span>;
41+
<span class="token keyword">import</span> {<span class="token keyword">get</span> <span class="token keyword">as</span> getProjection} <span class="token keyword">from</span> <span class="token string">'ol/proj.js'</span>;
42+
<span class="token keyword">import</span> {register} <span class="token keyword">from</span> <span class="token string">'ol/proj/proj4.js'</span>;
43+
<span class="token keyword">import</span> GeoJSON <span class="token keyword">from</span> <span class="token string">'ol/format/GeoJSON.js'</span>;
44+
<span class="token keyword">import</span> Graticule <span class="token keyword">from</span> <span class="token string">'ol/layer/Graticule.js'</span>;
45+
<span class="token keyword">import</span> VectorLayer <span class="token keyword">from</span> <span class="token string">'ol/layer/Vector.js'</span>;
46+
<span class="token keyword">import</span> VectorSource <span class="token keyword">from</span> <span class="token string">'ol/source/Vector.js'</span>;
47+
<span class="token keyword">import</span> {Fill, Style} <span class="token keyword">from</span> <span class="token string">'ol/style.js'</span>;
48+
...</code>
49+
</pre>
50+
<pre class="right" tabindex="0">
51+
<h3>proj4rs</h3>
52+
<code class="language-js">
53+
<span class="token keyword">import</span> Map <span class="token keyword">from</span> <span class="token string">'ol/Map.js'</span>;<span class="token keyword">import</span> TileGrid <span class="token keyword">from</span> <span class="token string">'ol/tilegrid/TileGrid.js'</span>;
54+
<span class="token keyword">import</span> View <span class="token keyword">from</span> <span class="token string">'ol/View.js'</span>;
55+
<span class="change"><span class="token keyword">import</span> {proj4} <span class="token keyword">from</span> <span class="token string">'proj4rs/proj4.js'</span>;</span>
56+
<span class="token keyword">import</span> {getCenter} <span class="token keyword">from</span> <span class="token string">'ol/extent.js'</span>;
57+
<span class="token keyword">import</span> {<span class="token keyword">get</span> <span class="token keyword">as</span> getProjection} <span class="token keyword">from</span> <span class="token string">'ol/proj.js'</span>;
58+
<span class="token keyword">import</span> {register} <span class="token keyword">from</span> <span class="token string">'ol/proj/proj4.js'</span>;
59+
<span class="token keyword">import</span> GeoJSON <span class="token keyword">from</span> <span class="token string">'ol/format/GeoJSON.js'</span>;
60+
<span class="token keyword">import</span> Graticule <span class="token keyword">from</span> <span class="token string">'ol/layer/Graticule.js'</span>;
61+
<span class="token keyword">import</span> VectorLayer <span class="token keyword">from</span> <span class="token string">'ol/layer/Vector.js'</span>;
62+
<span class="token keyword">import</span> VectorSource <span class="token keyword">from</span> <span class="token string">'ol/source/Vector.js'</span>;
63+
<span class="token keyword">import</span> {Fill, Style} <span class="token keyword">from</span> <span class="token string">'ol/style.js'</span>;
64+
...</code>
65+
</pre>
66+
</div>
67+
68+
<nav>
69+
<a class="navLabel" href="index.html">Home</a><br>
70+
<a class="navLabel" href="wms-image-custom-proj.html">Single Image WMS</a><br>
71+
<a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
72+
<a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
73+
<a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a><br>
74+
<a id="navLabelActive" class="navLabel" href="vector-projections.html">Vector projections</a>
75+
</nav>
76+
77+
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
78+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/elm-pep.js"></script>
79+
<script type="module" src="vector-projections.js"></script>
80+
</body>
81+
</html>

‎ol-proj4rs-demo-app/vector-projections.js

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import Map from 'ol/Map.js';
2+
import View from 'ol/View.js';
3+
import {proj4} from './assets/js/proj4.js';
4+
import {getCenter} from 'ol/extent.js';
5+
import {get as getProjection} from 'ol/proj.js';
6+
import {register} from 'ol/proj/proj4.js';
7+
import GeoJSON from 'ol/format/GeoJSON.js';
8+
import Graticule from 'ol/layer/Graticule.js';
9+
import VectorLayer from 'ol/layer/Vector.js';
10+
import VectorSource from 'ol/source/Vector.js';
11+
import {Fill, Style} from 'ol/style.js';
12+
13+
proj4.defs(
14+
'EPSG:27700',
15+
'+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
16+
'+x_0=400000 +y_0=-100000 +ellps=airy ' +
17+
'+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
18+
'+units=m +no_defs'
19+
);
20+
proj4.defs(
21+
'EPSG:23032',
22+
'+proj=utm +zone=32 +ellps=intl ' +
23+
'+towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs'
24+
);
25+
proj4.defs(
26+
'EPSG:5479',
27+
'+proj=lcc +lat_1=-76.66666666666667 +lat_2=' +
28+
'-79.33333333333333 +lat_0=-78 +lon_0=163 +x_0=7000000 +y_0=5000000 ' +
29+
'+ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
30+
);
31+
proj4.defs(
32+
'EPSG:3413',
33+
'+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 ' +
34+
'+x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs'
35+
);
36+
proj4.defs(
37+
'EPSG:2163',
38+
'+proj=laea +lat_0=45 +lon_0=-100 +x_0=0 +y_0=0 ' +
39+
'+a=6370997 +b=6370997 +units=m +no_defs'
40+
);
41+
proj4.defs(
42+
'ESRI:54009',
43+
'+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 ' + '+units=m +no_defs'
44+
);
45+
register(proj4);
46+
47+
const proj27700 = getProjection('EPSG:27700');
48+
proj27700.setExtent([-650000, -150000, 1350000, 1450000]);
49+
proj27700.setWorldExtent([-65, -15, 135, 145]);
50+
51+
const proj23032 = getProjection('EPSG:23032');
52+
proj23032.setExtent([-1206118.71, 4021309.92, 1295389.0, 8051813.28]);
53+
proj23032.setWorldExtent([-121, 20, 130, 75]);
54+
55+
const proj5479 = getProjection('EPSG:5479');
56+
proj5479.setExtent([6825737.53, 4189159.8, 9633741.96, 5782472.71]);
57+
proj5479.setWorldExtent([0, 0, 0, 0]);
58+
59+
const proj3413 = getProjection('EPSG:3413');
60+
proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]);
61+
proj3413.setWorldExtent([-179.99, -40, 179.99, 84]);
62+
63+
const proj2163 = getProjection('EPSG:2163');
64+
proj2163.setExtent([-8040784.5135, -2577524.921, 3668901.4484, 4785105.1096]);
65+
proj2163.setWorldExtent([-180, 10, -10, 84]);
66+
67+
const proj54009 = getProjection('ESRI:54009');
68+
proj54009.setExtent([-18019909.21177587, -9009954.605703328, 18019909.21177587, 9009954.605703328]);
69+
proj54009.setWorldExtent([-179, -89.99, 179, 89.99]);
70+
71+
const viewProjSelect = document.getElementById('view-projection');
72+
73+
const style = new Style({
74+
fill: new Fill({
75+
color: '#eeeeee',
76+
}),
77+
});
78+
79+
let vectorMap = new VectorLayer({
80+
source: new VectorSource({
81+
url: 'https://openlayers.org/data/vector/ecoregions.json',
82+
format: new GeoJSON(),
83+
}),
84+
style: function (feature) {
85+
const color = feature.get('COLOR_BIO') || '#eeeeee';
86+
style.getFill().setColor(color);
87+
return style;
88+
},
89+
})
90+
91+
const map = new Map({
92+
keyboardEventTarget: document,
93+
layers: [
94+
vectorMap,
95+
new Graticule(),
96+
],
97+
target: 'map',
98+
view: new View({
99+
projection: getProjection(viewProjSelect.value),
100+
center: getCenter(getProjection(viewProjSelect.value).getExtent() || [0, 0, 0, 0]),
101+
zoom: 0,
102+
extent: getProjection(viewProjSelect.value).getExtent() || undefined,
103+
}),
104+
});
105+
106+
function updateViewProjection() {
107+
const newProj = getProjection(viewProjSelect.value);
108+
const newProjExtent = newProj.getExtent();
109+
const newView = new View({
110+
projection: newProj,
111+
center: getCenter(newProjExtent || [0, 0, 0, 0]),
112+
zoom: 0,
113+
extent: newProjExtent || undefined,
114+
});
115+
updateMapVar(newView)
116+
}
117+
118+
function updateMapVar(view) {
119+
map.setView(view);
120+
121+
let vectorMap = new VectorLayer({
122+
source: new VectorSource({
123+
url: 'https://openlayers.org/data/vector/ecoregions.json',
124+
format: new GeoJSON(),
125+
}),
126+
style: function (feature) {
127+
const color = feature.get('COLOR_BIO') || '#eeeeee';
128+
style.getFill().setColor(color);
129+
return style;
130+
},
131+
})
132+
133+
map.setLayers([vectorMap, new Graticule()]);
134+
}
135+
136+
/**
137+
* Handle change event.
138+
*/
139+
viewProjSelect.onchange = function () {
140+
updateViewProjection();
141+
};

‎ol-proj4rs-demo-app/wms-image-custom-proj.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ <h3>proj4rs</h3>
5252
<a id="navLabelActive" class="navLabel" href="wms-image-custom-proj.html">Single Image WMS</a><br>
5353
<a class="navLabel" href="reprojection-image.html">Image reprojection</a><br>
5454
<a class="navLabel" href="reprojection.html">Raster reprojection</a><br>
55-
<a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a>
55+
<a class="navLabel" href="sphere-mollweide.html">Sphere Mollweide</a><br>
56+
<a class="navLabel" href="vector-projections.html">Vector projections</a>
5657
</nav>
5758

5859
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->

0 commit comments

Comments
 (0)