ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update quickstart and tutorials for v5

Browse Source
This commit is contained in:
ahocevar
2018-06-22 17:27:50 +02:00
parent 5b105c5601
commit eef39d3d1d
9 changed files with 205 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/tutorials/concepts.hbs
+30 -15
View File
@@ -6,48 +6,58 @@ layout: doc.hbs
# Basic Concepts
## Map
The core component of OpenLayers is the map (`ol.Map`). It is rendered to a `target` container (e.g. a `div` 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. `setTarget()`.
The core component of OpenLayers is the map (`Map`). It is rendered to a `target` container (e.g. a `div` 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. `setTarget()`.
```xml
<div id="map" style="width: 100%, height: 400px"></div>
<script>
var map = new ol.Map({target: 'map'});
import Map from 'ol/Map';
var map = new Map({target: 'map'});
</script>
```
## View
`ol.Map` is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of an `ol.View` instance.
`Map` is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a `View` instance.
```js
map.setView(new ol.View({
import View from 'ol/View';
map.setView(new View({
center: [0, 0],
zoom: 2
}));
```
An `ol.View` also has a `projection`. The projection determines the coordinate system of the `center` 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.
A `View` also has a `projection`. The projection determines the coordinate system of the `center` 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.
The `zoom` option is a convenient way to specify the map resolution. The available zoom levels are determined by `maxZoom` (default: 28), `zoomFactor` (default: 2) and `maxResolution` (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 `maxResolution` units per pixel, subsequent zoom levels are calculated by dividing the previous zoom level's resolution by `zoomFactor`, until zoom level `maxZoom` is reached.
## Source
To get remote data for a layer, OpenLayers uses `ol.source.Source` 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.
To get remote data for a layer, OpenLayers uses `source/Source` 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.
```js
var osmSource = new ol.source.OSM();
import OSM from 'ol/source/OSM';
var osmSource = OSM();
```
## Layer
A layer is a visual representation of data from a `source`. OpenLayers has three basic types of layers: `ol.layer.Tile`, `ol.layer.Image` and `ol.layer.Vector`.
A layer is a visual representation of data from a `source`. OpenLayers has four basic types of layers: `layer/Tile`, `layer/Image`, `layer/Vector` and `layer/VectorTile`.
`ol.layer.Tile` is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions.
`layer/Tile` is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions.
`ol.layer.Image` is for server rendered images that are available for arbitrary extents and resolutions.
`layer/Image` is for server rendered images that are available for arbitrary extents and resolutions.
`ol.layer.Vector` is for vector data that is rendered client-side.
`layer/Vector` is for vector data that is rendered client-side.
`layer/VectorTile` is for tiled vector data that is rendered client-side.
```js
var osmLayer = new ol.layer.Tile({source: osmSource});
import TileLayer from 'ol/layer/Tile';
var osmLayer = new TileLayer({source: osmSource});
map.addLayer(osmLayer);
```
@@ -59,11 +69,16 @@ The above snippets can be conflated to a self contained map configuration with v
```xml
<div id="map" style="width: 100%, height: 400px"></div>
<script>
new ol.Map({
import Map from 'ol/Map';
import View from 'ol/View';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/source/Tile';
new Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
new TileLayer({source: new ol.source.OSM()})
],
view: new ol.View({
view: new View({
center: [0, 0],
zoom: 2
}),