Minor improvements of reprojection examples
This commit is contained in:
@@ -1,10 +1,10 @@
|
|||||||
---
|
---
|
||||||
template: example.html
|
template: example.html
|
||||||
title: Reprojection with EPSG.io database search
|
title: Reprojection with EPSG.io database search
|
||||||
shortdesc: Demonstrates client-side raster reprojection of MapQuest OSM to any projection
|
shortdesc: Demonstrates client-side raster reprojection of MapQuest OSM to arbitrary projection
|
||||||
docs: >
|
docs: >
|
||||||
This example shows client-side raster reprojection capabilities of
|
This example shows client-side raster reprojection capabilities from
|
||||||
OpenLayers 3 from MapQuest OSM (EPSG:3857) to any projection by searching
|
MapQuest OSM (EPSG:3857) to arbitrary projection by searching
|
||||||
in <a href="http://epsg.io/">EPSG.io</a> database.
|
in <a href="http://epsg.io/">EPSG.io</a> database.
|
||||||
tags: "reprojection, projection, proj4js, mapquest, epsg.io"
|
tags: "reprojection, projection, proj4js, mapquest, epsg.io"
|
||||||
resources:
|
resources:
|
||||||
|
|||||||
@@ -1,11 +1,10 @@
|
|||||||
---
|
---
|
||||||
template: example.html
|
template: example.html
|
||||||
title: Image reprojection example
|
title: Image reprojection example
|
||||||
shortdesc: Demonstrates client-side reprojection of single image.
|
shortdesc: Demonstrates client-side reprojection of single image source.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows client-side single-image reprojection capabilities of
|
This example shows client-side reprojection of single image source.
|
||||||
OpenLayers 3.
|
tags: "reprojection, projection, proj4js, mapquest, image, imagestatic"
|
||||||
tags: "reprojection, projection, proj4js, mapquest, image"
|
|
||||||
resources:
|
resources:
|
||||||
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
|
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -12,9 +12,7 @@ proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
|
|||||||
'+x_0=400000 +y_0=-100000 +ellps=airy ' +
|
'+x_0=400000 +y_0=-100000 +ellps=airy ' +
|
||||||
'+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
|
'+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
|
||||||
'+units=m +no_defs');
|
'+units=m +no_defs');
|
||||||
var extent = [0, 0, 700000, 1300000];
|
var imageExtent = [0, 0, 700000, 1300000];
|
||||||
var proj27700 = ol.proj.get('EPSG:27700');
|
|
||||||
proj27700.setExtent(extent);
|
|
||||||
|
|
||||||
var map = new ol.Map({
|
var map = new ol.Map({
|
||||||
layers: [
|
layers: [
|
||||||
@@ -26,15 +24,15 @@ var map = new ol.Map({
|
|||||||
url: 'http://upload.wikimedia.org/wikipedia/commons/thumb/1/18/' +
|
url: 'http://upload.wikimedia.org/wikipedia/commons/thumb/1/18/' +
|
||||||
'British_National_Grid.svg/2000px-British_National_Grid.svg.png',
|
'British_National_Grid.svg/2000px-British_National_Grid.svg.png',
|
||||||
projection: 'EPSG:27700',
|
projection: 'EPSG:27700',
|
||||||
imageExtent: extent
|
imageExtent: imageExtent
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
renderer: common.getRendererFromQueryString(),
|
renderer: common.getRendererFromQueryString(),
|
||||||
target: 'map',
|
target: 'map',
|
||||||
view: new ol.View({
|
view: new ol.View({
|
||||||
center: ol.proj.transform(ol.extent.getCenter(extent),
|
center: ol.proj.transform(ol.extent.getCenter(imageExtent),
|
||||||
proj27700, 'EPSG:3857'),
|
'EPSG:27700', 'EPSG:3857'),
|
||||||
zoom: 4
|
zoom: 4
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -3,9 +3,8 @@ template: example.html
|
|||||||
title: Raster reprojection example
|
title: Raster reprojection example
|
||||||
shortdesc: Demonstrates client-side raster reprojection between various projections.
|
shortdesc: Demonstrates client-side raster reprojection between various projections.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows client-side raster reprojection capabilities of
|
This example shows client-side raster reprojection between various projections.
|
||||||
OpenLayers 3 between various projections.
|
tags: "reprojection, projection, proj4js, mapquest, wms, wmts, hidpi"
|
||||||
tags: "reprojection, projection, proj4js, mapquest, wms"
|
|
||||||
resources:
|
resources:
|
||||||
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
|
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
|
||||||
---
|
---
|
||||||
@@ -17,14 +16,14 @@ resources:
|
|||||||
<div class="col-md-3">
|
<div class="col-md-3">
|
||||||
<label>Base map:</label>
|
<label>Base map:</label>
|
||||||
<select id="base-map">
|
<select id="base-map">
|
||||||
<option value="MapQuest">MapQuest OSM</option>
|
<option value="mapquest">MapQuest (EPSG:3857)</option>
|
||||||
<option value="wms4326">EPSG:4326 from WMS</option>
|
<option value="wms4326">WMS (EPSG:4326)</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<label>Overlay map:</label>
|
<label>Overlay map:</label>
|
||||||
<select id="overlay-map">
|
<select id="overlay-map">
|
||||||
<option value="OS">British National Grid (EPSG:27700)</option>
|
<option value="bng">British National Grid (EPSG:27700)</option>
|
||||||
<option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
|
<option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
|
||||||
<option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
|
<option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
|
||||||
<option value="grandcanyon">Grand Canyon HiDPI (EPSG:3857)</option>
|
<option value="grandcanyon">Grand Canyon HiDPI (EPSG:3857)</option>
|
||||||
@@ -35,7 +34,7 @@ resources:
|
|||||||
<label>View projection:</label>
|
<label>View projection:</label>
|
||||||
<select id="view-projection">
|
<select id="view-projection">
|
||||||
<option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
|
<option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
|
||||||
<option value="EPSG:4326">EPSG:4326</option>
|
<option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
|
||||||
<option value="ESRI:54009">Mollweide (ESRI:54009)</option>
|
<option value="ESRI:54009">Mollweide (ESRI:54009)</option>
|
||||||
<option value="EPSG:27700">British National Grid (EPSG:27700)</option>
|
<option value="EPSG:27700">British National Grid (EPSG:27700)</option>
|
||||||
<option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
|
<option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
|
||||||
|
|||||||
@@ -31,11 +31,6 @@ proj4.defs('EPSG:5479', '+proj=lcc +lat_1=-76.66666666666667 +lat_2=' +
|
|||||||
var proj5479 = ol.proj.get('EPSG:5479');
|
var proj5479 = ol.proj.get('EPSG:5479');
|
||||||
proj5479.setExtent([6825737.53, 4189159.80, 9633741.96, 5782472.71]);
|
proj5479.setExtent([6825737.53, 4189159.80, 9633741.96, 5782472.71]);
|
||||||
|
|
||||||
proj4.defs('EPSG:5041', '+proj=stere +lat_0=90 +lat_ts=90 +lon_0=0 +k=0.994 ' +
|
|
||||||
'+x_0=2000000 +y_0=2000000 +datum=WGS84 +units=m +no_defs');
|
|
||||||
var proj5041 = ol.proj.get('EPSG:5041');
|
|
||||||
proj5041.setExtent([1994055.62, 5405875.53, 2000969.46, 2555456.55]);
|
|
||||||
|
|
||||||
proj4.defs('EPSG:21781', '+proj=somerc +lat_0=46.95240555555556 ' +
|
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 ' +
|
'+lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel ' +
|
||||||
'+towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs');
|
'+towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs');
|
||||||
@@ -60,7 +55,7 @@ proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);
|
|||||||
|
|
||||||
var layers = [];
|
var layers = [];
|
||||||
|
|
||||||
layers['OS'] = new ol.layer.Tile({
|
layers['bng'] = new ol.layer.Tile({
|
||||||
source: new ol.source.XYZ({
|
source: new ol.source.XYZ({
|
||||||
projection: 'EPSG:27700',
|
projection: 'EPSG:27700',
|
||||||
url: 'https://googledrive.com/host/0B0bm2WdRuvICflNqUmxEdUNOV0ZRUFQ3cXNXR' +
|
url: 'https://googledrive.com/host/0B0bm2WdRuvICflNqUmxEdUNOV0ZRUFQ3cXNXR' +
|
||||||
@@ -69,7 +64,7 @@ layers['OS'] = new ol.layer.Tile({
|
|||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
layers['MapQuest'] = new ol.layer.Tile({
|
layers['mapquest'] = new ol.layer.Tile({
|
||||||
source: new ol.source.MapQuest({layer: 'osm'})
|
source: new ol.source.MapQuest({layer: 'osm'})
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -150,8 +145,8 @@ layers['states'] = new ol.layer.Tile({
|
|||||||
|
|
||||||
var map = new ol.Map({
|
var map = new ol.Map({
|
||||||
layers: [
|
layers: [
|
||||||
layers['MapQuest'],
|
layers['mapquest'],
|
||||||
layers['OS']
|
layers['bng']
|
||||||
],
|
],
|
||||||
renderer: common.getRendererFromQueryString(),
|
renderer: common.getRendererFromQueryString(),
|
||||||
target: 'map',
|
target: 'map',
|
||||||
|
|||||||
Reference in New Issue
Block a user