From 8f1fdde26efa3d70c5a15a4c7c5ae6ea5935dc7e Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Wed, 9 Jul 2014 17:38:16 +0200 Subject: [PATCH] Show both Proj4js and custom transform functions in examples --- examples/wms-custom-proj.html | 159 +++++++++++++++++++++++++++- examples/wms-custom-proj.js | 31 ++++-- examples/wms-image-custom-proj.html | 4 +- examples/wms-image-custom-proj.js | 2 +- 4 files changed, 177 insertions(+), 19 deletions(-) diff --git a/examples/wms-custom-proj.html b/examples/wms-custom-proj.html index 6f5c66e51e..efecf3a827 100644 --- a/examples/wms-custom-proj.html +++ b/examples/wms-custom-proj.html @@ -8,7 +8,7 @@ - Tiled WMS with Proj4js projection example + Tiled WMS with custom projection example @@ -31,21 +31,170 @@
-

Tiled WMS with Proj4js projection example

+

Tiled WMS with custom projection example

Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.

See the wms-custom-proj.js source to see how this is done.

-
wms, tile, tilelayer, proj4js, projection
+
wms, tile, tilelayer, projection
+ + - - diff --git a/examples/wms-custom-proj.js b/examples/wms-custom-proj.js index 087be33acb..930df1a29b 100644 --- a/examples/wms-custom-proj.js +++ b/examples/wms-custom-proj.js @@ -5,24 +5,33 @@ goog.require('ol.control'); goog.require('ol.control.ScaleLine'); goog.require('ol.layer.Tile'); goog.require('ol.proj'); +goog.require('ol.proj.Projection'); goog.require('ol.source.TileWMS'); -// EPSG:21781 is known to Proj4js because its definition was loaded in the html. -var projection = ol.proj.addProjection({ +var projection = new ol.proj.Projection({ code: 'EPSG:21781', // The extent is used to determine zoom level 0. Recommended values for a // projection's validity extent can be found at http://epsg.io/. extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864], - // Use data from proj4js to configure the projection's units. - units: proj4.defs('EPSG:21781').units + units: 'm' }); -// Proj4js provides transform functions between its configured projections. -// The transform is needed for the ScaleLine control. Otherwise this example -// would also work without transform functions. -var transform = proj4('EPSG:21781'); -ol.proj.addCoordinateTransforms('EPSG:4326', projection, transform.forward, - transform.inverse); +ol.proj.addProjection(projection); +// WGStoCHx, WGStoCHy, CHtoWGSlng and CHtoWGSlat are defined in a script block +// in the html. +ol.proj.addCoordinateTransforms('EPSG:4326', projection, + function(coordinate) { + return [ + WGStoCHy(coordinate[1], coordinate[0]), + WGStoCHx(coordinate[1], coordinate[0]) + ]; + }, + function(coordinate) { + return [ + CHtoWGSlng(coordinate[0], coordinate[1]), + CHtoWGSlat(coordinate[0], coordinate[1]) + ]; + }); var extent = [420000, 30000, 900000, 350000]; var layers = [ @@ -72,7 +81,7 @@ var map = new ol.Map({ target: 'map', view: new ol.View({ projection: projection, - center: [660000, 190000], + center: ol.proj.transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781'), extent: extent, zoom: 2 }) diff --git a/examples/wms-image-custom-proj.html b/examples/wms-image-custom-proj.html index 73be411eac..bbdd94039e 100644 --- a/examples/wms-image-custom-proj.html +++ b/examples/wms-image-custom-proj.html @@ -8,7 +8,7 @@ - Single image WMS with custom projection example + Single image WMS with Proj4js projection example @@ -31,7 +31,7 @@
-

Single image WMS with custom projection example

+

Single image WMS with Proj4js projection example

Example of two single image WMS layers.

Pixelmap 1:1'000'000 with National Parks overlay using the projection EPSG:21781.

diff --git a/examples/wms-image-custom-proj.js b/examples/wms-image-custom-proj.js index d57bc93675..05292d72ae 100644 --- a/examples/wms-image-custom-proj.js +++ b/examples/wms-image-custom-proj.js @@ -63,7 +63,7 @@ var map = new ol.Map({ target: 'map', view: new ol.View({ projection: projection, - center: [660000, 190000], + center: ol.proj.transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781'), extent: extent, zoom: 2 })