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

49
doc/tutorials/background.md Normal file
View File

@@ -0,0 +1,49 @@
---
title: Introduction
layout: doc.hbs
---
# Introduction
## Objectives
OpenLayers is a modular, high-performance, feature-packed library for displaying and interacting with maps and geospatial data.
The library comes with built-in support for a wide range of commercial and free image and vector tile sources, and the most popular open and proprietary vector data formats. With OpenLayers's map projection support, data can be in any projection.
## Public API
OpenLayers is available as [`ol` npm package](https://npmjs.com/package/ol), which provides all modules of the officially supported [API](../../apidoc).
## Renderers and Browser Support
By default, OpenLayers uses a performance optimized Canvas renderer. An experimental WebGL renderer (without text rendering support) is also avaialble.
OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io), the application bundle needs to be transpiled (e.g. using [Babel](https://babeljs.io)) and bundled with polyfills for `requestAnimationFrame`, `Element.prototype.classList` and `URL`.
The library is intended for use on both desktop/laptop and mobile devices, and supports pointer and touch interactions.
## Module and Naming Conventions
OpenLayers modules with CamelCase names provide classes as default exports, and may contain additional constants or functions as named exports:
```js
import Map from 'ol/Map';
import View from 'ol/View';
```
Class hierarchies grouped by their parent are provided in a subfolder of the package, e.g. `layer/`.
For convenience, these are also available as named exports, e.g.
```js
import {Map, View} from `ol`;
import {Tile, Vector} from `ol/layer`;
```
In addition to these re-exported classes, modules with lowercase names also provide constants or functions as named exports:
```js
import {inherits} from `ol`;
import {fromLonLat} from `ol/proj`;
```

87
doc/tutorials/browserify.md
View File

@@ -1,87 +0,0 @@
---
title: Basic project setup using NPM and Browserify
layout: doc.hbs
---
# Introduction
When going beyond modifying existing examples you might be looking for a way to setup your own code with dependency management together with external dependencies like OpenLayers.
This tutorial serves as a suggested project setup using NPM and Browserify for the most basic needs. There are several other options, and in particular you might be interested in a more modern one (ES2015) [using Webpack with OpenLayers](https://gist.github.com/tschaub/79025aef325cd2837364400a105405b8).
## Initial steps
Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project using `npm init` and answer the questions asked.
Add OpenLayers as dependency to your application with `npm install --save ol`.
At this point you can ask NPM to add required development dependencies by running
```
npm install --save-dev cssify browserify cssify http-server uglify-js watchify
npm install --save-dev babelify babel-plugin-transform-es2015-modules-commonjs
```
We will be using `cssify` to include the css definitions required by OpenLayers in our bundle. `watchify`, `http-server` and `uglify-js` are used to monitor for changes and to build into a minified bundle. `babelify` and `babel-plugin-transform-es2015-modules-commonjs` are used to make the `ol` package, which was created using ES2015 modules, work with CommonJS.
## Application code and index.html
Place your application code in `index.js`. Here is a simple starting point:
```js
require('ol/ol.css');
var ol_Map = require('ol/map').default;
var ol_layer_Tile = require('ol/layer/tile').default;
var ol_source_OSM = require('ol/source/osm').default;
var ol_View = require('ol/view').default;
var map = new ol_Map({
target: 'map',
layers: [
new ol_layer_Tile({
source: new ol_source_OSM()
})
],
view: new ol_View({
center: [0, 0],
zoom: 0
})
});
```
You will also need an `ìndex.html` file that will use your bundle. Here is a simple example:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Browserify with OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="bundle.js"></script>
</body>
</html>
```
## Creating a bundle
With simple scripts you can introduce the commands `npm run build` and `npm start` to manually build your bundle and watch for changes, respectively. Add the following to the script section in `package.json`:
```json
"scripts": {
"start": "watchify index.js -g cssify --outfile bundle.js & http-server",
"build": "browserify -g cssify index.js | uglifyjs --compress --output bundle.js"
}
```
Now to test your application open http://localhost:8080/ in your browser. `watchify` will update `bundle.js` whenever you change something. You simply need to reload the page in your browser to see the changes.
```
$ npm start
```
Note that `bundle.js` will contain your application code and all dependencies used in your application. From OpenLayers, it only contains the required components.

93
doc/tutorials/bundle.md Normal file
View File

@@ -0,0 +1,93 @@
---
title: Basic project setup using NPM and Parcel
layout: doc.hbs
---
# Introduction
Modern JavaScript works best when using and authoring modules. The recommended way of using OpenLayers is installing the [`ol`](https://npmjs.com/package/ol) package. This tutorial walks you through setting up a simple dev environment, which requires [node](https://nodejs.org) for everything to work.
In this tutorial, we will be using [Parcel](https://parceljs.org) to bundle our application. There are several other options, some of which are linked from the [README](https://npmjs.com/package/ol).
## Initial steps
Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project using `npm init` and answer the questions asked.
Add OpenLayers as dependency to your application with
npm install ol
At this point you can ask NPM to add required development dependencies by running
npm install --save-dev parcel-bundler
## Application code and index.html
Place your application code in `index.js`. Here is a simple starting point:
```js
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
```
You will also need an `ìndex.html` file that will use your bundle. Here is a simple example:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Parcel with OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>
```
## Creating a bundle
With simple scripts you can introduce the commands `npm run build` and `npm start` to manually build your bundle and watch for changes, respectively. Add the following to the script section in `package.json`:
```json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
}
```
That's it. Now to run your application, enter
npm start
in your console. To test your application, open http://localhost:1234/ in your browser. Whenever you change something, the page will reload automatically to show the result of your changes.
Note that a single JavaScript file with all your application code and all dependencies used in your application has been created. From the OpenLayers package, it only contains the required components.
To create a production bundle of your application, simply type
npm run build
and copy the `dist/` folder to your production server.

45
doc/tutorials/concepts.hbs
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
}),

4
doc/tutorials/index.hbs
View File

@@ -5,7 +5,7 @@ layout: doc.hbs
# Tutorials
* [Introduction to OpenLayers](introduction.html)
* [Building an OpenLayers Application](bundle.html)
* [Basic Concepts](concepts.html)
* [Bundle Application and OpenLayers using Browserify](browserify.html)
* [Some Background on OpenLayers](background.html)
* [Raster Reprojection](raster-reprojection.html)

39
doc/tutorials/introduction.md
View File

@@ -1,39 +0,0 @@
---
title: Introduction
layout: doc.hbs
---
# Introduction
## Objectives
With version 3, the OpenLayers web mapping library was fundamentally redesigned. The widely used version 2 dates from the early days of Javascript development, and was increasingly showing its age. So it has been rewritten from the ground up to use modern design patterns.
The initial release aims to support much of the functionality provided by version 2, with support for a wide range of commercial and free tile sources, and the most popular open-source vector data formats. As with version 2, data can be in any projection. The initial release also adds some additional functionality, such as the ability to easily rotate or animate maps.
It is also designed such that major new features, such as displaying 3D maps, or using WebGL to quickly display large vector data sets, can be added in later releases.
## Public API
Using the advanced optimizations of the Closure Compiler means that properties and methods are renamed &ndash; `longMeaningfulName` might become `xB` &ndash; and so are effectively unusable in applications using the library. To be usable, they have to be explicitly `exported`. This means the exported names, those not renamed, effectively become the public API of the library. These __exportable__ properties and methods are marked in the source, and documented in the [API docs](../../apidoc). This is the officially supported API of the library. A build containing all these exportable names is known as a __full build__. A hosted version of this is available, which can be used by any application.
## Custom Builds
Unlike in, say, Node, where a module's exports are fixed in the source, with Closure Compiler, exports can be defined at compile time. This makes it easy to create builds that are customized to the needs of a particular site or application: a __custom build__ only exports those properties and methods needed by the site or application. As the full build is large, and will probably become larger as new features are added to the API, it's recommended that sites create a custom build for production software.
## Renderers and Browser Support
The library currently includes two renderers: Canvas and WebGL. Both of them support both raster data from tile/image servers, and vector data; WebGL however does not support labels. Clearly only those browsers that [support Canvas](http://caniuse.com/canvas) can use the Canvas renderer. Equally, the WebGL renderer can only be used on those devices and [browsers](http://caniuse.com/webgl) that support WebGL.
OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io) for `requestAnimationFrame` and `Element.prototype.classList` are required, and using the KML format requires a polyfill for `URL`.
The library is intended for use on both desktop/laptop and mobile devices.
## Objects and Naming Conventions
The top-level namespace is `ol` (basically, `var ol = {};`). Subdivisions of this are:
* further namespaces, such as `ol.layer`; these have a lower-case initial
* simple objects containing static properties and methods, such as `ol.easing`; these also have a lower-case initial
* types, which have an upper-case initial. These are mainly 'classes', which here means a constructor function with prototypal inheritance, such as `ol.Map` or `ol.layer.Vector` (the Vector class within the layer namespace). There are however other, simpler, types, such as `ol.Extent`, which is an array.
Class namespaces, such as `ol.layer` have a base class type with the same name, such as `ol.layer.Layer`. These are mainly abstract classes, from which the other subclasses inherit.
Source files are similarly organised, with a directory for each class namespace. Names are however all lower-case, for example, `ol/layer/vector.js`.
OpenLayers follows the convention that the names of private properties and methods, that is, those that are not part of the API, end in an underscore. In general, instance properties are private and accessed using accessors.

45
doc/tutorials/raster-reprojection.md
View File

@@ -10,18 +10,22 @@ Transformation of the map projections of the image happens directly in a web bro
The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid.
# Usage
The API usage is very simple. Just specify proper projection (using [EPSG](https://epsg.io) code) on `ol.View`:
``` javascript
var map = new ol.Map({
The API usage is very simple. Just specify proper projection (e.g. using [EPSG](https://epsg.io) code) on `ol/View`:
```js
import {Map, View} from `ol`;
import TileLayer from `ol/layer/Tile`;
import TileWMS from `ol/source/TileWMS`;
var map = new Map({
target: 'map',
view: new ol.View({
view: new View({
projection: 'EPSG:3857', //HERE IS THE VIEW PROJECTION
center: [0, 0],
zoom: 2
}),
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
new TileLayer({
source: new TileWMS({
projection: 'EPSG:4326', //HERE IS THE DATA SOURCE PROJECTION
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {
@@ -32,7 +36,7 @@ var map = new ol.Map({
]
});
```
If a source (based on `ol.source.TileImage` or `ol.source.Image`) has a projection different from the current `ol.View`’s projection then the reprojection happens automatically under the hood.
If a source (based on `ol/source/TileImage` or `ol/source/Image`) has a projection different from the current `ol/View`’s projection then the reprojection happens automatically under the hood.
### Examples
- [Raster reprojection demo](https://openlayers.org/en/master/examples/reprojection.html)
@@ -41,26 +45,29 @@ If a source (based on `ol.source.TileImage` or `ol.source.Image`) has a projecti
- [Image reprojection](https://openlayers.org/en/master/examples/reprojection-image.html)
### Custom projection
The easiest way to use a custom projection is to add the [Proj4js](http://proj4js.org/) library to your project and then define the projection using a proj4 definition string.
The easiest way to use a custom projection is to add the [Proj4js](http://proj4js.org/) library to your project and then define the projection using a proj4 definition string. It can be installed with
npm install proj4
Following example shows definition of a [British National Grid](https://epsg.io/27700):
``` html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
```
```js
import proj4 from 'proj4';
import {get as getProjection, register} from 'ol/proj';
``` javascript
proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
'+x_0=400000 +y_0=-100000 +ellps=airy ' +
'+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
'+units=m +no_defs');
var proj27700 = ol.proj.get('EPSG:27700');
register(proj4);
var proj27700 = getProjection('EPSG:27700');
proj27700.setExtent([0, 0, 700000, 1300000]);
```
### Change of the view projection
To switch the projection used to display the map you have to set a new `ol.View` with selected projection on the `ol.Map`:
To switch the projection used to display the map you have to set a new `ol/View` with selected projection on the `ol/Map`:
``` javascript
map.setView(new ol.View({
map.setView(new View({
projection: 'EPSG:27700',
center: [400000, 650000],
zoom: 4
@@ -69,16 +76,16 @@ map.setView(new ol.View({
## TileGrid and Extents
When reprojection is needed, new tiles (in the target projection) are under the hood created from the original source tiles.
The TileGrid of the reprojected tiles is by default internally constructed using `ol.tilegrid.getForProjection(projection)`.
The TileGrid of the reprojected tiles is by default internally constructed using `ol/tilegrid~getForProjection(projection)`.
The projection should have extent defined (see above) for this to work properly.
Alternatively, a custom target TileGrid can be constructed manually and set on the source instance using `ol.source.TileImage#setTileGridForProjection(projection, tilegrid)`.
Alternatively, a custom target TileGrid can be constructed manually and set on the source instance using `ol/source/TileImage~setTileGridForProjection(projection, tilegrid)`.
This TileGrid will then be used when reprojecting to the specified projection instead of creating the default one.
In certain cases, this can be used to optimize performance (by tweaking tile sizes) or visual quality (by specifying resolutions).
# How it works
The reprojection process is based on triangles -- the target raster is divided into a limited number of triangles with vertices transformed using `ol.proj` capabilities ([proj4js](http://proj4js.org/) is usually utilized to define custom transformations).
The reprojection process is based on triangles -- the target raster is divided into a limited number of triangles with vertices transformed using `ol/proj` capabilities ([proj4js](http://proj4js.org/) is usually utilized to define custom transformations).
The reprojection of pixels inside the triangle is approximated with an affine transformation (with rendering hardware-accelerated by the canvas 2d context):
<img src="raster-reprojection-resources/how-it-works.jpg" alt="How it works" width="600" />
@@ -122,7 +129,7 @@ Setting such a limit is demonstrated in the [reprojection demo example](https://
### Resolution calculation
When determining source tiles to load, the ideal source resolution needs to be calculated.
The `ol.reproj.calculateSourceResolution(sourceProj, targetProj, targetCenter, targetResolution)` function calculates the ideal value in order to achieve pixel mapping as close as possible to 1:1 during reprojection, which is then used to select proper zoom level from the source.
The `ol/reproj~calculateSourceResolution(sourceProj, targetProj, targetCenter, targetResolution)` function calculates the ideal value in order to achieve pixel mapping as close as possible to 1:1 during reprojection, which is then used to select proper zoom level from the source.
It is, however, generally not practical to use the same source zoom level for the whole target zoom level -- different projections can have significantly different resolutions in different parts of the world (e.g. polar regions in EPSG:3857 vs EPSG:4326) and enforcing a single resolution for the whole zoom level would result in some tiles being scaled up/down, possibly requiring a huge number of source tiles to be loaded.
Therefore, the resolution mapping is calculated separately for each reprojected tile (in the middle of the tile extent).