Skip to content

Commit b5e3e13

Browse files
committed
Website updates
1 parent 4026bf1 commit b5e3e13

File tree

161 files changed

+949
-499
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

161 files changed

+949
-499
lines changed

dist/doc/tutorials/raster-reprojection.html

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,19 @@
7070

7171
<div class="container">
7272
<h1 id="raster-reprojection">Raster Reprojection</h1>
73-
<p>OpenLayers has an ability to display raster data from WMS, WMTS, static images and many other sources in a different coordinate system than delivered from the server.
74-
Transformation of the map projections of the image happens directly in a web browser.
73+
<p>OpenLayers can display raster data from WMS, WMTS, static images, and many other sources in a different coordinate system than delivered from the server. In cases where the source projection differs from the map view projection, source data can be reprojected on the client (in the browser).</p>
74+
<p>OpenLayers comes with built-in support for transforming coordinates (and reprojecting rasters) between a handful of projections or coordinate reference systems.</p>
75+
<p>The built-in reprojection support applies to the following projections:</p>
76+
<ul>
77+
<li>WGS 84 / Geographic (<code>EPSG:4326</code>)</li>
78+
<li>WGS 84 / Web or Spherical Mercator (<code>EPSG:3857</code>)</li>
79+
<li>WGS 84 / Universal Transverse Mercator (<code>EPSG:32601</code> through <code>EPSG:32660</code> and <code>EPSG:32701</code> through <code>EPSG:32760</code>)</li>
80+
</ul>
81+
<p>For transforms between other, non-built-in projections, the Proj4js library can be used.</p>
82+
<p>Transformation of the map projections of the image happens directly in a web browser.
7583
The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid.</p>
7684
<h1 id="usage">Usage</h1>
77-
<p>The API usage is very simple. Just specify proper projection (e.g. using <a href="https://epsg.io">EPSG</a> code) on <code>ol/View</code>:</p>
85+
<p>The API usage for built-in projection support involves specifying the projection identifier on the source and the view. String <a href="https://epsg.io">EPSG codes</a> can be used to identify the projections:</p>
7886
<pre><code class="language-js">import Map from &#39;ol/Map.js&#39;;
7987
import TileLayer from &#39;ol/layer/Tile.js&#39;;
8088
import TileWMS from &#39;ol/source/TileWMS.js&#39;;
@@ -109,7 +117,7 @@ <h3 id="examples">Examples</h3>
109117
<li><a href="/en/latest/examples/reprojection-image.html">Image reprojection</a></li>
110118
</ul>
111119
<h3 id="custom-projection">Custom projection</h3>
112-
<p>The easiest way to use a custom projection is to add the <a href="http://proj4js.org/">Proj4js</a> library to your project and then define the projection using a proj4 definition string. It can be installed with</p>
120+
<p>The easiest way to use a custom projection (one that doesn&#39;t have built-in support) is to add the <a href="http://proj4js.org/">Proj4js</a> library to your project and then define the projection using a proj4 definition string. It can be installed with</p>
113121
<pre><code>npm install proj4
114122
</code></pre>
115123
<p>Following example shows definition of a <a href="https://epsg.io/27700">British National Grid</a>:</p>

dist/en/main/apidoc/module-ol_proj.html

Lines changed: 136 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
<ul>
7474
<li data-name="projectionlike"><a href="module-ol_proj.html#~ProjectionLike">ProjectionLike</a>
7575
<li data-name="transformfunction"><a href="module-ol_proj.html#~TransformFunction">TransformFunction</a>
76+
<li data-name="transforms"><a href="module-ol_proj.html#~Transforms">Transforms</a>
7677
</ul>
7778
</div>
7879
<div class="member-list" data-type="methods">
@@ -203,7 +204,7 @@ <h4 class="name">
203204

204205
<div class="tag-source">
205206
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
206-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L382">line 382</a>
207+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L413">line 413</a>
207208
</div>
208209

209210
</div>
@@ -420,7 +421,7 @@ <h4 class="name">
420421

421422
<div class="tag-source">
422423
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
423-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L266">line 266</a>
424+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L297">line 297</a>
424425
</div>
425426

426427
</div>
@@ -550,7 +551,7 @@ <h4 class="name">
550551

551552
<div class="tag-source">
552553
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
553-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L157">line 157</a>
554+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L177">line 177</a>
554555
</div>
555556

556557
</div>
@@ -680,7 +681,7 @@ <h4 class="name">
680681

681682
<div class="tag-source">
682683
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
683-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L573">line 573</a>
684+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L677">line 677</a>
684685
</div>
685686

686687
</div>
@@ -764,7 +765,7 @@ <h4 class="name">
764765

765766
<div class="tag-source">
766767
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
767-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L447">line 447</a>
768+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L478">line 478</a>
768769
</div>
769770

770771
</div>
@@ -929,7 +930,7 @@ <h4 class="name">
929930

930931
<div class="tag-source">
931932
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
932-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L406">line 406</a>
933+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L437">line 437</a>
933934
</div>
934935

935936
</div>
@@ -1094,7 +1095,7 @@ <h4 class="name">
10941095

10951096
<div class="tag-source">
10961097
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
1097-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L178">line 178</a>
1098+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L198">line 198</a>
10981099
</div>
10991100

11001101
</div>
@@ -1234,7 +1235,7 @@ <h4 class="name">
12341235

12351236
<div class="tag-source">
12361237
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
1237-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L204">line 204</a>
1238+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L235">line 235</a>
12381239
</div>
12391240

12401241
</div>
@@ -1458,7 +1459,7 @@ <h4 class="name">
14581459

14591460
<div class="tag-source">
14601461
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
1461-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L491">line 491</a>
1462+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L586">line 586</a>
14621463
</div>
14631464

14641465
</div>
@@ -1623,7 +1624,7 @@ <h4 class="name">
16231624

16241625
<div class="tag-source">
16251626
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
1626-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L582">line 582</a>
1627+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L686">line 686</a>
16271628
</div>
16281629

16291630
</div>
@@ -1716,7 +1717,7 @@ <h4 class="name">
17161717

17171718
<div class="tag-source">
17181719
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
1719-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L565">line 565</a>
1720+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L669">line 669</a>
17201721
</div>
17211722

17221723
</div>
@@ -1847,7 +1848,7 @@ <h4 class="name">
18471848

18481849
<div class="tag-source">
18491850
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
1850-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L424">line 424</a>
1851+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L455">line 455</a>
18511852
</div>
18521853

18531854
</div>
@@ -2012,7 +2013,7 @@ <h4 class="name">
20122013

20132014
<div class="tag-source">
20142015
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
2015-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L511">line 511</a>
2016+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L608">line 608</a>
20162017
</div>
20172018

20182019
</div>
@@ -2029,7 +2030,9 @@ <h4 class="name">
20292030

20302031
<div class="description">
20312032
<p>Transforms a coordinate from source projection to destination projection.
2032-
This returns a new coordinate (and does not modify the original).</p>
2033+
This returns a new coordinate (and does not modify the original). If there
2034+
is no available transform between the two projection, the function will throw
2035+
an error.</p>
20332036
<p>See <a href="module-ol_proj.html#.transformExtent"><code>transformExtent</code></a> for extent transformation.
20342037
See the transform method of <a href="module-ol_geom_Geometry-Geometry.html"><code>Geometry</code></a> and its
20352038
subclasses for geometry transforms.</p>
@@ -2204,7 +2207,7 @@ <h4 class="name">
22042207

22052208
<div class="tag-source">
22062209
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
2207-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L528">line 528</a>
2210+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L632">line 632</a>
22082211
</div>
22092212

22102213
</div>
@@ -2419,7 +2422,7 @@ <h4 class="name">
24192422

24202423
<div class="tag-source">
24212424
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
2422-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L592">line 592</a>
2425+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L696">line 696</a>
24232426
</div>
24242427

24252428
</div>
@@ -2561,7 +2564,7 @@ <h4 class="name">
25612564

25622565
<div class="tag-source">
25632566
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js">proj.js</a>,
2564-
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L87">line 87</a>
2567+
<a href="https://github.com/openlayers/openlayers/blob/main/src/ol/proj.js#L107">line 107</a>
25652568
</div>
25662569

25672570
</div>
@@ -2751,6 +2754,122 @@ <h4 class="name">
27512754

27522755

27532756

2757+
</dd>
2758+
2759+
2760+
2761+
<dt class="">
2762+
<div class="nameContainer">
2763+
<div class="anchor" id="~Transforms">
2764+
</div>
2765+
<h4 class="name">
2766+
Transforms<span class="type-signature type object">{Object}</span>
2767+
2768+
2769+
</h4>
2770+
</div>
2771+
2772+
</dt>
2773+
<dd class="">
2774+
2775+
2776+
2777+
<dl class="details">
2778+
2779+
2780+
<h5 class="subsection-title">Properties:</h5>
2781+
2782+
<dl>
2783+
2784+
<table class="props">
2785+
<thead>
2786+
<tr>
2787+
2788+
<th>Name</th>
2789+
2790+
2791+
<th>Type</th>
2792+
2793+
<th class="last">Description</th>
2794+
</tr>
2795+
</thead>
2796+
2797+
<tbody>
2798+
2799+
2800+
<tr>
2801+
2802+
<td class="name"><code>forward</code></td>
2803+
2804+
2805+
<td class="type">
2806+
2807+
2808+
<span class="param-type">TransformFunction</span>
2809+
2810+
2811+
2812+
2813+
</td>
2814+
2815+
<td class="description last">
2816+
<p>The forward transform (from geographic).</p>
2817+
2818+
</td>
2819+
</tr>
2820+
2821+
2822+
2823+
<tr>
2824+
2825+
<td class="name"><code>inverse</code></td>
2826+
2827+
2828+
<td class="type">
2829+
2830+
2831+
<span class="param-type">TransformFunction</span>
2832+
2833+
2834+
2835+
2836+
</td>
2837+
2838+
<td class="description last">
2839+
<p>The inverse transform (to geographic).</p>
2840+
2841+
</td>
2842+
</tr>
2843+
2844+
2845+
</tbody>
2846+
</table></dl>
2847+
2848+
2849+
2850+
2851+
2852+
2853+
2854+
2855+
2856+
2857+
2858+
2859+
2860+
2861+
2862+
2863+
2864+
2865+
2866+
2867+
2868+
2869+
</dl>
2870+
2871+
2872+
27542873
</dd>
27552874

27562875
</dl>

0 commit comments

Comments
 (0)