Added an example that shows how to use the popular Proj4JS library.
This commit is contained in:
Marc Jansen
92
examples/using-proj4js.html
Normal file
92
examples/using-proj4js.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>Using Proj4JS for vector reprojection</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script type="text/javascript" src="http://trac.osgeo.org/proj4js/export/2080/trunk/lib/proj4js-compressed.js"></script>
|
||||
<script type="text/javascript" src="http://spatialreference.org/ref/epsg/31467/proj4js/"></script>
|
||||
<script type="text/javascript" src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript" src="./using-proj4js.js"></script>
|
||||
<style type="text/css">
|
||||
ul {
|
||||
width: 300px;
|
||||
float: left;
|
||||
}
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
input {
|
||||
width: 250px;
|
||||
}
|
||||
#shortdesc {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
#map {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
float: left;
|
||||
margin-right: .2em;
|
||||
}
|
||||
#attribution,
|
||||
#mouse-position-31467,
|
||||
#mouse-position-4326 {
|
||||
float: left;
|
||||
clear: left;
|
||||
font-size: smaller;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.olControlMousePosition {
|
||||
background-color: #ededed;
|
||||
background-color: rgba(200,200,200, 0.7);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="init();">
|
||||
<h1 id="title">Using Proj4JS for vector reprojection</h1>
|
||||
<div id="tags">
|
||||
projection, proj, proj4js, reprojection, reproject,
|
||||
transform, transformation
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
The features are reprojected with the JavaScript library
|
||||
<a href="http://proj4js.org/">Proj4JS</a>.
|
||||
</p>
|
||||
<div id="map">
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<input type="button" value="Add Cologne (~ 6.97, 50.95)"
|
||||
onclick="addVector(6.966667, 50.95, this);">
|
||||
</li>
|
||||
<li>
|
||||
<input type="button" value="Add Berlin (~ 13.40, 52.50)"
|
||||
onclick="addVector(13.398889, 52.500556, this);">
|
||||
</li>
|
||||
<li>
|
||||
<input type="button" value="Add Hamburg (~ 10.00, 53.57)"
|
||||
onclick="addVector(10.001389, 53.565278, this);">
|
||||
</li>
|
||||
<li>
|
||||
<input type="button" value="Add Munich (~ 11.57, 48.13)"
|
||||
onclick="addVector(11.566667, 48.133333, this);">
|
||||
</li>
|
||||
<li>
|
||||
<input type="button" value="Add country outline (polygon)"
|
||||
onclick="addOutline(this);">
|
||||
</li>
|
||||
<li>
|
||||
<div id="status">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="attribution"></div>
|
||||
<div id="mouse-position-4326"></div>
|
||||
<div id="mouse-position-31467"></div>
|
||||
</body>
|
||||
</html>
|
||||
115
examples/using-proj4js.js
Normal file
115
examples/using-proj4js.js
Normal file
@@ -0,0 +1,115 @@
|
||||
var map, vector;
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map', {
|
||||
projection: 'EPSG:31467',
|
||||
maxResolution: 3457.03125,
|
||||
units: 'm',
|
||||
numZoomLevels: 1,
|
||||
controls: [
|
||||
new OpenLayers.Control.Attribution({
|
||||
div: $('attribution')
|
||||
}),
|
||||
new OpenLayers.Control.MousePosition({
|
||||
div: $('mouse-position-31467'),
|
||||
prefix: 'Coordinates: ',
|
||||
suffix: ' (in <a href="http://spatialreference.org/ref/epsg/'
|
||||
+ '31467/">EPSG:31467</a>)'
|
||||
}),
|
||||
new OpenLayers.Control.MousePosition({
|
||||
div: $('mouse-position-4326'),
|
||||
displayProjection: new OpenLayers.Projection('EPSG:4326'),
|
||||
prefix: 'Coordinates: ',
|
||||
suffix: ' (in <a href="http://spatialreference.org/ref/epsg/'
|
||||
+ '4326/">EPSG:4326</a>)'
|
||||
})
|
||||
],
|
||||
maxExtent: new OpenLayers.Bounds(3146150, 5223600, 4031150, 6108600)
|
||||
});
|
||||
var germany_gk3 = new OpenLayers.Layer.WMS(
|
||||
'Germany (Metaspatial)',
|
||||
'http://www.metaspatial.net/cgi-bin/germany-wms',
|
||||
{
|
||||
layers: 'germany'
|
||||
},
|
||||
{
|
||||
singleTile: true,
|
||||
ratio: 1.0,
|
||||
attribution: 'Background WMS offered withoud restrictions by '
|
||||
+ '<a href="http://www.metaspatial.net/">MetaSpatial</a>'
|
||||
}
|
||||
);
|
||||
|
||||
vector = new OpenLayers.Layer.Vector();
|
||||
map.addLayers( [ germany_gk3, vector ] );
|
||||
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
|
||||
function addVector(x, y, btn){
|
||||
var status = "Transformed ",
|
||||
geometry = new OpenLayers.Geometry.Point(x, y);
|
||||
|
||||
status += '<br /><code style="font-weight: bold"> '
|
||||
+ geometry.toString() + '</code> to';
|
||||
|
||||
geometry.transform(
|
||||
new OpenLayers.Projection('EPSG:4326'),
|
||||
new OpenLayers.Projection('EPSG:31467')
|
||||
);
|
||||
|
||||
status += '<br /><code style="font-weight: bold"> '
|
||||
+ geometry.toString() + '</code>.';
|
||||
$('status').innerHTML = status;
|
||||
|
||||
var feature = new OpenLayers.Feature.Vector(geometry, {}, {
|
||||
strokeColor: '#333333',
|
||||
strokeOpacity: 1,
|
||||
strokeWidth: 2,
|
||||
fillColor: '#9966cc',
|
||||
fillOpacity: 0.9,
|
||||
pointRadius: 12,
|
||||
graphicName: 'star'
|
||||
});
|
||||
vector.addFeatures([feature]);
|
||||
btn.disabled = true;
|
||||
}
|
||||
function addOutline(btn) {
|
||||
var wkt = 'POLYGON(('
|
||||
+ ' 9.921906 54.983104, 9.939580 54.596642,'
|
||||
+ '10.950112 54.363607,10.939467 54.008693,11.956252 54.196486,'
|
||||
+ '12.518440 54.470371,13.647467 54.075511,14.119686 53.757029,'
|
||||
+ '14.353315 53.248171,14.074521 52.981263,14.437600 52.624850,'
|
||||
+ '14.685026 52.089947,14.607098 51.745188,15.016996 51.106674,'
|
||||
+ '14.570718 51.002339,14.307013 51.117268,14.056228 50.926918,'
|
||||
+ '13.338132 50.733234,12.966837 50.484076,12.240111 50.266338,'
|
||||
+ '12.415191 49.969121,12.521024 49.547415,13.031329 49.307068,'
|
||||
+ '13.595946 48.877172,13.243357 48.416115,12.884103 48.289146,'
|
||||
+ '13.025851 47.637584,12.932627 47.467646,12.620760 47.672388,'
|
||||
+ '12.141357 47.703083,11.426414 47.523766,10.544504 47.566399,'
|
||||
+ '10.402084 47.302488, 9.896068 47.580197, 9.594226 47.525058,'
|
||||
+ ' 8.522612 47.830828, 8.317301 47.613580, 7.466759 47.620582,'
|
||||
+ ' 7.593676 48.333019, 8.099279 49.017784, 6.658230 49.201958,'
|
||||
+ ' 6.186320 49.463803, 6.242751 49.902226, 6.043073 50.128052,'
|
||||
+ ' 6.156658 50.803721, 5.988658 51.851616, 6.589397 51.852029,'
|
||||
+ ' 6.842870 52.228440, 7.092053 53.144043, 6.905140 53.482162,'
|
||||
+ ' 7.100425 53.693932, 7.936239 53.748296, 8.121706 53.527792,'
|
||||
+ ' 8.800734 54.020786, 8.572118 54.395646, 8.526229 54.962744,'
|
||||
+ ' 9.282049 54.830865, 9.921906 54.983104))',
|
||||
feature = new OpenLayers.Format.WKT().read(wkt),
|
||||
geometry = feature.geometry.transform(
|
||||
new OpenLayers.Projection('EPSG:4326'),
|
||||
new OpenLayers.Projection('EPSG:31467')
|
||||
),
|
||||
style = {
|
||||
strokeColor: '#9966cc',
|
||||
strokeOpacity: 1,
|
||||
strokeWidth: 5,
|
||||
fillColor: '#ffffff',
|
||||
fill: false
|
||||
},
|
||||
transformedFeature = new OpenLayers.Feature.Vector(geometry, {}, style);
|
||||
|
||||
vector.addFeatures([transformedFeature]);
|
||||
$('status').innerHTML = 'Transformed polygon';
|
||||
btn.disabled = true;
|
||||
}
|
||||
Reference in New Issue
Block a user