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

Merge pull request #8417 from tschaub/bad-info

Browse Source 
Minor doc updates
This commit is contained in:
Tim Schaub
2018-07-21 08:34:01 -07:00
committed by GitHub
parent c046c2a1ba d8b290966b
commit b50bc1febf
5 changed files with 64 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/jsdoc/api/template/tmpl/layout.tmpl
+7
View File
@@ -4,6 +4,13 @@ var version = obj.packageInfo.version;
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-2577926-1');
</script>
<meta charset="utf-8"> <meta charset="utf-8">
<title>OpenLayers v<?js= version ?> API - <?js= title ?></title> <title>OpenLayers v<?js= version ?> API - <?js= title ?></title>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
doc/quickstart.hbs
+1 -1
View File
@@ -130,7 +130,7 @@ The `layers: [ ... ]` array is used to define the list of layers available in th
] ]
``` ```
Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles. You can consult the list of [available layer sources here](/en/{{ latest }}/apidoc/ol.source.html) Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles.
The next part of the `Map` object is the `View`. The view allows to specify the center, resolution, and rotation of the map. The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out. The next part of the `Map` object is the `View`. The view allows to specify the center, resolution, and rotation of the map. The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out.
doc/tutorials/concepts.hbs
+46 -44
View File
@@ -6,27 +6,34 @@ layout: doc.hbs
# Basic Concepts # Basic Concepts
## Map ## Map
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()`.
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 markup below could be used to create a `<div>` that contains your map.
```xml ```xml
<div id="map" style="width: 100%, height: 400px"></div> <div id="map" style="width: 100%, height: 400px"></div>
<script> ```
import Map from 'ol/Map';
var map = new Map({target: 'map'}); The script below constructs a map that is rendered in the `<div>` above, using the `map` id of the element as a selector.
</script>
```js
import Map from 'ol/Map';
var map = new Map({target: 'map'});
``` ```
## View ## View
`Map` is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a `View` instance.
The map is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a `ol/View` instance.
```js ```js
import View from 'ol/View'; import View from 'ol/View';
map.setView(new View({ map.setView(new View({
center: [0, 0], center: [0, 0],
zoom: 2 zoom: 2
})); }));
``` ```
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. 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.
@@ -35,54 +42,49 @@ The `zoom` option is a convenient way to specify the map resolution. The availab
## Source ## Source
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.
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.
```js ```js
import OSM from 'ol/source/OSM'; import OSM from 'ol/source/OSM';
var osmSource = OSM(); var osmSource = OSM();
``` ```
## Layer ## Layer
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`.
`layer/Tile` is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions. A layer is a visual representation of data from a `source`. OpenLayers has four basic types of layers:
`layer/Image` is for server rendered images that are available for arbitrary extents and resolutions. * `ol/layer/Tile` - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions.
* `ol/layer/Image` - Renders sources that provide map images at arbitrary extents and resolutions.
`layer/Vector` is for vector data that is rendered client-side. * `ol/layer/Vector` - Renders vector data client-side.
* `ol/layer/VectorTile` - Renders data that is provided as vector tiles.
`layer/VectorTile` is for tiled vector data that is rendered client-side.
```js ```js
import TileLayer from 'ol/layer/Tile'; import TileLayer from 'ol/layer/Tile';
var osmLayer = new TileLayer({source: osmSource}); var osmLayer = new TileLayer({source: osmSource});
map.addLayer(osmLayer); map.addLayer(osmLayer);
``` ```
## Putting it all together ## Putting it all together
The above snippets can be combined into a single script that renders a map with a single tile layer:
The above snippets can be conflated to a self contained map configuration with view and layers: ```js
import Map from 'ol/Map';
import View from 'ol/View';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/source/Tile';
```xml new Map({
<div id="map" style="width: 100%, height: 400px"></div> layers: [
<script> new TileLayer({source: new OSM()})
import Map from 'ol/Map'; ],
import View from 'ol/View'; view: new View({
import OSM from 'ol/source/OSM'; center: [0, 0],
import TileLayer from 'ol/source/Tile'; zoom: 2
}),
new Map({ target: 'map'
layers: [ });
new TileLayer({source: new ol.source.OSM()})
],
view: new View({
center: [0, 0],
zoom: 2
}),
target: 'map'
});
</script>
``` ```
doc/tutorials/raster-reprojection.md
+3 -3
View File
@@ -12,9 +12,9 @@ The view in any Proj4js supported coordinate reference system is possible and pr
# Usage # Usage
The API usage is very simple. Just specify proper projection (e.g. using [EPSG](https://epsg.io) code) on `ol/View`: The API usage is very simple. Just specify proper projection (e.g. using [EPSG](https://epsg.io) code) on `ol/View`:
```js ```js
import {Map, View} from `ol`; import {Map, View} from 'ol';
import TileLayer from `ol/layer/Tile`; import TileLayer from 'ol/layer/Tile';
import TileWMS from `ol/source/TileWMS`; import TileWMS from 'ol/source/TileWMS';
var map = new Map({ var map = new Map({
target: 'map', target: 'map',
examples/templates/example.html
+7
View File
@@ -1,6 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-US"> <html lang="en-US">
<head> <head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-2577926-1');
</script>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">