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

Update doc/faq.md

Browse Source 
Change code snippet to use es6 modules.
This commit is contained in:
Frederic Junod
2018-09-29 08:56:19 +02:00
parent fe0ac80ba4
commit 513e11d263
1 changed files with 86 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
doc/faq.md
View File

@@ -54,9 +54,12 @@ The projection of your map can be set through the `view`-property. Here are some
examples:
```javascript
import Map from 'ol/Map';
import View from 'ol/View';
// OpenLayers comes with support for the World Geodetic System 1984, EPSG:4326:
var map = new ol.Map({
view: new ol.View({
const map = new Map({
view: new View({
projection: 'EPSG:4326'
// other view properties like map center etc.
})
@@ -65,23 +68,29 @@ var map = new ol.Map({
```
```javascript
import Map from 'ol/Map';
import View from 'ol/View';
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4';
import {get as getProjection} from 'ol/proj';
// To use other projections, you have to register the projection in OpenLayers.
// This can easily be done with [https://proj4js.org](proj4)
//
// By default OpenLayers does not know about the EPSG:21781 (Swiss) projection.
// So we create a projection instance for EPSG:21781 and pass it to
// ol.proj.addProjection to make it available to the library for lookup by its
// register to make it available to the library for lookup by its
// code.
proj4.defs('EPSG:21781',
'+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 ' +
'+x_0=600000 +y_0=200000 +ellps=bessel ' +
'+towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs');
ol.proj.proj4.register(proj4);
var swissProjection = ol.proj.get('EPSG:21781');
register(proj4);
const swissProjection = getProjection('EPSG:21781');
// we can now use the projection:
var map = new ol.Map({
view: new ol.View({
const map = new Map({
view: new View({
projection: swissProjection
// other view properties like map center etc.
})
@@ -104,15 +113,20 @@ coordinates for the center have to be provided in that projection. Chances are
that your map looks like this:
```javascript
var washingtonLonLat = [-77.036667, 38.895];
var map = new ol.Map({
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const washingtonLonLat = [-77.036667, 38.895];
const map = new Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new ol.View({
view: new View({
center: washingtonLonLat,
zoom: 12
})
@@ -128,31 +142,38 @@ The solution is easy: Provide the coordinates projected into Web Mercator.
OpenLayers has some helpful utility methods to assist you:
```javascript
var washingtonLonLat = [-77.036667, 38.895];
var washingtonWebMercator = ol.proj.fromLonLat(washingtonLonLat);
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';
var map = new ol.Map({
const washingtonLonLat = [-77.036667, 38.895];
const washingtonWebMercator = fromLonLat(washingtonLonLat);
const map = new Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new ol.View({
view: new View({
center: washingtonWebMercator,
zoom: 8
})
});
```
The method `ol.proj.fromLonLat()` is available from version 3.5 onwards.
The method `fromLonLat()` is available from version 3.5 onwards.
If you told OpenLayers about a custom projection (see above), you can use the
following method to transform a coordinate from WGS84 to your projection:
```javascript
import {transform} from 'ol/proj';
// assuming that OpenLayers knows about EPSG:21781, see above
var swissCoord = ol.proj.transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781');
const swissCoord = transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781');
```
@@ -189,18 +210,24 @@ So the next step would be to put the decimal coordinates into an array and use
it as center:
```javascript
var schladming = [47.394167, 13.689167]; // caution partner, read on...
// since we are using OSM, we have to transform the coordinates...
var schladmingWebMercator = ol.proj.fromLonLat(schladming);
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';
var map = new ol.Map({
const schladming = [47.394167, 13.689167]; // caution partner, read on...
// since we are using OSM, we have to transform the coordinates...
const schladmingWebMercator = fromLonLat(schladming);
const map = new Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new ol.View({
view: new View({
center: schladmingWebMercator,
zoom: 9
})
@@ -219,18 +246,24 @@ e.g. try to change the map center.
Ok, then let's flip the coordinates:
```javascript
var schladming = [13.689167, 47.394167]; // longitude first, then latitude
// since we are using OSM, we have to transform the coordinates...
var schladmingWebMercator = ol.proj.fromLonLat(schladming);
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';
var map = new ol.Map({
const schladming = [13.689167, 47.394167]; // longitude first, then latitude
// since we are using OSM, we have to transform the coordinates...
const schladmingWebMercator = fromLonLat(schladming);
const map = new Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new ol.View({
view: new View({
center: schladmingWebMercator,
zoom: 9
})
@@ -244,7 +277,7 @@ first, and then the latitude. This behaviour is the same as we had in OpenLayers
2, and it actually makes sense because of the natural axis order in WGS84.
If you cannot remember the correct order, just have a look at the method name
we used: `ol.proj.fromLonLat`; even there we hint that we expect longitude
we used: `fromLonLat`; even there we hint that we expect longitude
first, and then latitude.
@@ -254,8 +287,11 @@ Suppose you want to load a KML file and display the contained features on the
map. Code like the following could be used:
```javascript
var vector = new ol.layer.Vector({
source: new ol.source.KML({
import VectorLayer from 'ol/layer/Vector';
import KMLSource from 'ol/source/KML';
const vector = new VectorLayer({
source: new KMLSource({
projection: 'EPSG:3857',
url: 'data/kml/2012-02-10.kml'
})
@@ -266,13 +302,16 @@ You may ask yourself how many features are in that KML, and try something like
the following:
```javascript
var vector = new ol.layer.Vector({
source: new ol.source.KML({
import VectorLayer from 'ol/layer/Vector';
import KMLSource from 'ol/source/KML';
const vector = new VectorLayer({
source: new KMLSource({
projection: 'EPSG:3857',
url: 'data/kml/2012-02-10.kml'
})
});
var numFeatures = vector.getSource().getFeatures().length;
const numFeatures = vector.getSource().getFeatures().length;
console.log("Count right after construction: " + numFeatures);
```
@@ -284,9 +323,9 @@ been populated with features), you should use an event listener function on the
```javascript
vector.getSource().on('change', function(evt){
var source = evt.target;
const source = evt.target;
if (source.getState() === 'ready') {
var numFeatures = source.getFeatures().length;
const numFeatures = source.getFeatures().length;
console.log("Count after change: " + numFeatures);
}
});
@@ -315,16 +354,17 @@ map.renderSync();
## Why are my features not found?
You are using `ol.Map#forEachFeatureAtPixel` or `ol.Map#hasFeatureAtPixel`, but
You are using `Map#forEachFeatureAtPixel` or `Map#hasFeatureAtPixel`, but
it sometimes does not work for large icons or labels? The *hit detection* only
checks features that are within a certain distance of the given position. For large
icons, the actual geometry of a feature might be too far away and is not considered.
In this case, set the `renderBuffer` property of `ol.layer.Vector` (the default
value is 100px):
In this case, set the `renderBuffer` property of `VectorLayer` (the default value is 100px):
```javascript
var vectorLayer = new ol.layer.Vector({
import VectorLayer from 'ol/layer/Vector';
const vectorLayer = new VectorLayer({
...
renderBuffer: 200
});