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

Show both Proj4js and custom transform functions in examples

Browse Source
This commit is contained in:
Andreas Hocevar
2014-07-09 17:38:16 +02:00
parent 4cf8383820
commit 8f1fdde26e
4 changed files with 177 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
examples/wms-custom-proj.html
View File

@@ -8,7 +8,7 @@
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Tiled WMS with Proj4js projection example</title>
<title>Tiled WMS with custom projection example</title>
</head>
<body>
@@ -31,21 +31,170 @@
<div class="row-fluid">
<div class="span12">
<h4 id="title">Tiled WMS with Proj4js projection example</h4>
<h4 id="title">Tiled WMS with custom projection example</h4>
<p id="shortdesc">Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.</p>
<div id="docs">
<p>See the <a href="wms-custom-proj.js" target="_blank">wms-custom-proj.js source</a> to see how this is done.</p>
</div>
<div id="tags">wms, tile, tilelayer, proj4js, projection</div>
<div id="tags">wms, tile, tilelayer, projection</div>
</div>
</div>
</div>
<!--
Transform functions script block downloaded from
http://www.swisstopo.admin.ch/internet/swisstopo/en/home/products/software/products/skripts.html
-->
<script language="Javascript">
// Convert WGS lat/long (° dec) to CH y
function WGStoCHy(lat, lng) {
// Converts degrees dec to sex
lat = DECtoSEX(lat);
lng = DECtoSEX(lng);
// Converts degrees to seconds (sex)
lat = DEGtoSEC(lat);
lng = DEGtoSEC(lng);
// Axiliary values (% Bern)
var lat_aux = (lat - 169028.66)/10000;
var lng_aux = (lng - 26782.5)/10000;
// Process Y
y = 600072.37
+ 211455.93 * lng_aux
- 10938.51 * lng_aux * lat_aux
- 0.36 * lng_aux * Math.pow(lat_aux,2)
- 44.54 * Math.pow(lng_aux,3);
return y;
}
// Convert WGS lat/long (° dec) to CH x
function WGStoCHx(lat, lng) {
// Converts degrees dec to sex
lat = DECtoSEX(lat);
lng = DECtoSEX(lng);
// Converts degrees to seconds (sex)
lat = DEGtoSEC(lat);
lng = DEGtoSEC(lng);
// Axiliary values (% Bern)
var lat_aux = (lat - 169028.66)/10000;
var lng_aux = (lng - 26782.5)/10000;
// Process X
x = 200147.07
+ 308807.95 * lat_aux
+ 3745.25 * Math.pow(lng_aux,2)
+ 76.63 * Math.pow(lat_aux,2)
- 194.56 * Math.pow(lng_aux,2) * lat_aux
+ 119.79 * Math.pow(lat_aux,3);
return x;
}
// Convert CH y/x to WGS lat
function CHtoWGSlat(y, x) {
// Converts militar to civil and to unit = 1000km
// Axiliary values (% Bern)
var y_aux = (y - 600000)/1000000;
var x_aux = (x - 200000)/1000000;
// Process lat
lat = 16.9023892
+ 3.238272 * x_aux
- 0.270978 * Math.pow(y_aux,2)
- 0.002528 * Math.pow(x_aux,2)
- 0.0447 * Math.pow(y_aux,2) * x_aux
- 0.0140 * Math.pow(x_aux,3);
// Unit 10000" to 1 " and converts seconds to degrees (dec)
lat = lat * 100/36;
return lat;
}
// Convert CH y/x to WGS long
function CHtoWGSlng(y, x) {
// Converts militar to civil and to unit = 1000km
// Axiliary values (% Bern)
var y_aux = (y - 600000)/1000000;
var x_aux = (x - 200000)/1000000;
// Process long
lng = 2.6779094
+ 4.728982 * y_aux
+ 0.791484 * y_aux * x_aux
+ 0.1306 * y_aux * Math.pow(x_aux,2)
- 0.0436 * Math.pow(y_aux,3);
// Unit 10000" to 1 " and converts seconds to degrees (dec)
lng = lng * 100/36;
return lng;
}
// Convert SEX DMS angle to DEC
function SEXtoDEC(angle) {
// Extract DMS
var deg = parseInt( angle );
var min = parseInt( (angle-deg)*100 );
var sec = (((angle-deg)*100) - min) * 100;
// Result in degrees sex (dd.mmss)
return deg + (sec/60 + min)/60;
}
// Convert DEC angle to SEX DMS
function DECtoSEX(angle) {
// Extract DMS
var deg = parseInt( angle );
var min = parseInt( (angle-deg)*60 );
var sec = (((angle-deg)*60)-min)*60;
// Result in degrees sex (dd.mmss)
return deg + min/100 + sec/10000;
}
// Convert Degrees angle to seconds
function DEGtoSEC(angle) {
// Extract DMS
var deg = parseInt( angle );
var min = parseInt( (angle-deg)*100 );
var sec = (((angle-deg)*100) - min) * 100;
// Avoid rounding problems with seconds=0
var parts = String(angle).split(".");
if (parts.length == 2 && parts[1].length == 2) {
min = Number(parts[1]);
sec = 0;
}
// Result in degrees sex (dd.mmss)
return sec + min*60 + deg*3600;
}
</script>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js" type="text/javascript"></script>
<script src="http://epsg.io/21781.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wms-custom-proj" type="text/javascript"></script>

31
examples/wms-custom-proj.js
View File

@@ -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'
});
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])
];
});
// 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);
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
})

4
examples/wms-image-custom-proj.html
View File

@@ -8,7 +8,7 @@
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Single image WMS with custom projection example</title>
<title>Single image WMS with Proj4js projection example</title>
</head>
<body>
@@ -31,7 +31,7 @@
<div class="row-fluid">
<div class="span12">
<h4 id="title">Single image WMS with custom projection example</h4>
<h4 id="title">Single image WMS with Proj4js projection example</h4>
<p id="shortdesc">Example of two single image WMS layers.</p>
<div id="docs">
<p>Pixelmap 1:1'000'000 with National Parks overlay using the projection EPSG:21781.</p>

2
examples/wms-image-custom-proj.js
View File

@@ -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
})