Skip to content

Commit

Permalink
Website updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahocevar
ahocevar committed Nov 6, 2024
1 parent 4026bf1 commit b5e3e13
Show file tree
Hide file tree
Showing 161 changed files with 949 additions and 499 deletions.
16 changes: 12 additions & 4 deletions dist/doc/tutorials/raster-reprojection.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,19 @@

<div class="container">
<h1 id="raster-reprojection">Raster Reprojection</h1>
<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.
Transformation of the map projections of the image happens directly in a web browser.
<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>
<p>OpenLayers comes with built-in support for transforming coordinates (and reprojecting rasters) between a handful of projections or coordinate reference systems.</p>
<p>The built-in reprojection support applies to the following projections:</p>
<ul>
<li>WGS 84 / Geographic (<code>EPSG:4326</code>)</li>
<li>WGS 84 / Web or Spherical Mercator (<code>EPSG:3857</code>)</li>
<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>
</ul>
<p>For transforms between other, non-built-in projections, the Proj4js library can be used.</p>
<p>Transformation of the map projections of the image happens directly in a web browser.
The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid.</p>
<h1 id="usage">Usage</h1>
<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>
<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>
<pre><code class="language-js">import Map from &#39;ol/Map.js&#39;;
import TileLayer from &#39;ol/layer/Tile.js&#39;;
import TileWMS from &#39;ol/source/TileWMS.js&#39;;
Expand Down Expand Up @@ -109,7 +117,7 @@ <h3 id="examples">Examples</h3>
<li><a href="/en/latest/examples/reprojection-image.html">Image reprojection</a></li>
</ul>
<h3 id="custom-projection">Custom projection</h3>
<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>
<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>
<pre><code>npm install proj4
</code></pre>
<p>Following example shows definition of a <a href="https://epsg.io/27700">British National Grid</a>:</p>
Expand Down
153 changes: 136 additions & 17 deletions dist/en/main/apidoc/module-ol_proj.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@
<ul>
<li data-name="projectionlike"><a href="module-ol_proj.html#~ProjectionLike">ProjectionLike</a>
<li data-name="transformfunction"><a href="module-ol_proj.html#~TransformFunction">TransformFunction</a>
<li data-name="transforms"><a href="module-ol_proj.html#~Transforms">Transforms</a>
</ul>
</div>
<div class="member-list" data-type="methods">
Expand Down Expand Up @@ -203,7 +204,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -420,7 +421,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -550,7 +551,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -680,7 +681,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -764,7 +765,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -929,7 +930,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -1094,7 +1095,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -1234,7 +1235,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -1458,7 +1459,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -1623,7 +1624,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -1716,7 +1717,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -1847,7 +1848,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -2012,7 +2013,7 @@ <h4 class="name">

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

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

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

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

</div>
Expand Down Expand Up @@ -2419,7 +2422,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -2561,7 +2564,7 @@ <h4 class="name">

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

</div>
Expand Down Expand Up @@ -2751,6 +2754,122 @@ <h4 class="name">



</dd>



<dt class="">
<div class="nameContainer">
<div class="anchor" id="~Transforms">
</div>
<h4 class="name">
Transforms<span class="type-signature type object">{Object}</span>


</h4>
</div>

</dt>
<dd class="">



<dl class="details">


<h5 class="subsection-title">Properties:</h5>

<dl>

<table class="props">
<thead>
<tr>

<th>Name</th>


<th>Type</th>

<th class="last">Description</th>
</tr>
</thead>

<tbody>


<tr>

<td class="name"><code>forward</code></td>


<td class="type">


<span class="param-type">TransformFunction</span>




</td>

<td class="description last">
<p>The forward transform (from geographic).</p>

</td>
</tr>



<tr>

<td class="name"><code>inverse</code></td>


<td class="type">


<span class="param-type">TransformFunction</span>




</td>

<td class="description last">
<p>The inverse transform (to geographic).</p>

</td>
</tr>


</tbody>
</table></dl>






















</dl>



</dd>

</dl>
Expand Down
Loading

0 comments on commit b5e3e13

Please sign in to comment.