mirror of
https://expo.survex.com/repositories/expoweb/.git/
synced 2024-12-18 22:42:26 +00:00
143 lines
9.8 KiB
HTML
143 lines
9.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||
|
|
<title>OpenLayers - Basic Concepts</title>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||
|
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||
|
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||
|
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||
|
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||
|
|
<span class="navbar-toggler-icon"></span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- menu items that get hidden below 768px width -->
|
||
|
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||
|
|
<ul class="nav navbar-nav ms-auto">
|
||
|
|
<li class="nav-item dropdown">
|
||
|
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||
|
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||
|
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||
|
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||
|
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||
|
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||
|
|
<li class="nav-item dropdown">
|
||
|
|
<a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
|
|
<i class="fa fa-sitemap me-1"></i>API
|
||
|
|
</a>
|
||
|
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
|
||
|
|
<a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v9.1.0 (latest)</a>
|
||
|
|
<a class="dropdown-item" href="/en/v8.1.0/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v8.1.0</a>
|
||
|
|
<a class="dropdown-item" href="/en/v7.5.2/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v7.5.2</a>
|
||
|
|
<a class="dropdown-item" href="/en/v6.15.1/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v6.15.1</a>
|
||
|
|
<a class="dropdown-item" href="/en/v5.3.0/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v5.3.0</a>
|
||
|
|
<a class="dropdown-item" href="/en/v4.6.5/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v4.6.5</a>
|
||
|
|
<a class="dropdown-item" href="/en/v3.20.1/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v3.20.1</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item dropdown">
|
||
|
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||
|
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||
|
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||
|
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<h1 id="basic-concepts">Basic Concepts</h1>
|
||
|
|
<h2 id="map">Map</h2>
|
||
|
|
<p>The core component of OpenLayers is the map (from the <code>ol/Map</code> module). It is rendered to a <code>target</code> container (e.g. a <code>div</code> element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. <code>setTarget()</code>.</p>
|
||
|
|
<p>The markup below could be used to create a <code><div></code> that contains your map.</p>
|
||
|
|
<pre><code class="language-xml"><div id="map" style="width: 100%; height: 400px"></div>
|
||
|
|
</code></pre>
|
||
|
|
<p>The script below constructs a map that is rendered in the <code><div></code> above, using the <code>map</code> id of the element as a selector.</p>
|
||
|
|
<pre><code class="language-js">import Map from 'ol/Map.js';
|
||
|
|
|
||
|
|
const map = new Map({target: 'map'});
|
||
|
|
</code></pre>
|
||
|
|
<h2 id="view">View</h2>
|
||
|
|
<p>The map is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a <code>ol/View</code> instance.</p>
|
||
|
|
<pre><code class="language-js">import View from 'ol/View.js';
|
||
|
|
|
||
|
|
map.setView(new View({
|
||
|
|
center: [0, 0],
|
||
|
|
zoom: 2,
|
||
|
|
}));
|
||
|
|
</code></pre>
|
||
|
|
<p>A <code>View</code> also has a <code>projection</code>. The projection determines the coordinate system of the <code>center</code> and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units.</p>
|
||
|
|
<p>The <code>zoom</code> option is a convenient way to specify the map resolution. The available zoom levels are determined by <code>maxZoom</code> (default: 28), <code>zoomFactor</code> (default: 2) and <code>maxResolution</code> (default is calculated in such a way that the projection's validity extent fits in a 256x256 pixel tile). Starting at zoom level 0 with a resolution of <code>maxResolution</code> units per pixel, subsequent zoom levels are calculated by dividing the previous zoom level's resolution by <code>zoomFactor</code>, until zoom level <code>maxZoom</code> is reached.</p>
|
||
|
|
<h2 id="source">Source</h2>
|
||
|
|
<p>To get remote data for a layer, OpenLayers uses <code>ol/source/Source</code> subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML.</p>
|
||
|
|
<pre><code class="language-js">import OSM from 'ol/source/OSM.js';
|
||
|
|
|
||
|
|
const source = OSM();
|
||
|
|
</code></pre>
|
||
|
|
<h2 id="layer">Layer</h2>
|
||
|
|
<p>A layer is a visual representation of data from a source. OpenLayers has four basic types of layers:</p>
|
||
|
|
<ul>
|
||
|
|
<li><code>ol/layer/Tile</code> - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions.</li>
|
||
|
|
<li><code>ol/layer/Image</code> - Renders sources that provide map images at arbitrary extents and resolutions.</li>
|
||
|
|
<li><code>ol/layer/Vector</code> - Renders vector data client-side.</li>
|
||
|
|
<li><code>ol/layer/VectorTile</code> - Renders data that is provided as vector tiles.</li>
|
||
|
|
</ul>
|
||
|
|
<pre><code class="language-js">import TileLayer from 'ol/layer/Tile.js';
|
||
|
|
|
||
|
|
// ...
|
||
|
|
const layer = new TileLayer({source: source});
|
||
|
|
map.addLayer(layer);
|
||
|
|
</code></pre>
|
||
|
|
<h2 id="putting-it-all-together">Putting it all together</h2>
|
||
|
|
<p>The above snippets can be combined into a single script that renders a map with a single tile layer:</p>
|
||
|
|
<pre><code class="language-js">import Map from 'ol/Map.js';
|
||
|
|
import View from 'ol/View.js';
|
||
|
|
import OSM from 'ol/source/OSM.js';
|
||
|
|
import TileLayer from 'ol/layer/Tile.js';
|
||
|
|
|
||
|
|
new Map({
|
||
|
|
layers: [
|
||
|
|
new TileLayer({source: new OSM()}),
|
||
|
|
],
|
||
|
|
view: new View({
|
||
|
|
center: [0, 0],
|
||
|
|
zoom: 2,
|
||
|
|
}),
|
||
|
|
target: 'map',
|
||
|
|
});
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<footer>
|
||
|
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||
|
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||
|
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||
|
|
<br>
|
||
|
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||
|
|
</footer>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|