[OpenLayers-Users] KML layer in UTM coordinates
Jan Schorn <
js@...>
2008-11-01 18:38:03 GMT
Dear OpenLayers community:
First of all, thanks to all of you for the development of this great tool!
And thanks for your time thinking about the problem i'm going to
describe in the following frases:
I'm struggeling with adding a GML (KML) layer to a UTM map. Thinking it
has to do with coordinate transformations, I intented to adopt the
solutions described in mails in the list the last montths, but i can't
bring the application to work - using OpenLayers version 2.7.
The Problem:
I've a map in UTM coordinates (Zone 28N, WGS84. EPGS: 32628), the
basemap is a wms layer which is beeing displayed fine.
Now i want to add a Google Earth KML point layer, but it doesn't work
(for the KML see the end of the mail).
What I did:
1. Created the defs EPSG32628.js the code is
Proj4js.defs["EPSG:32628"] = "+proj=utm +zone=28 +ellps=WGS84
+datum=WGS84 +units=m +no_defs ";
2. Included the 3 scripts: proj4js.js EPSG32628.js and EPSG90013.js to
the application via the script-tag.
Then starting to search for a solution do project the KML. I tried 2
diferent ways described in the mailinglist, but without success. Even I
don't know which way would be the smartest one.
FIRST WAY was proceeding like discussed by Saris and Eric in
http://openlayers.org/pipermail/users/2008-October/008170.html – there i
tried both solucions without success:
WAY 1a (see http://www.cenit-geosistemas.com/viewer/viewer1a.html ):
var kml = new OpenLayers.Layer.GML("KML",
"http://cenit-geosistemas.com/visor/kml.kml", {
projection: new OpenLayers.Projection("EPSG:900913"),
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
}});
WAY 1b ( see http://www.cenit-geosistemas.com/viewer/viewer1b.html ):
var kml = new OpenLayers.Layer.GML("KML",
"http://cenit-geosistemas.com/visor/kml.kml", {
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
internalProjection: new OpenLayers.Projection("ESPG:900913"),
externalProjection: new OpenLayers.Projection("ESPG:32628")
}});
=> SAME RESULTS for both cases:
IE7 and firefox displays the basemap and if the kml is activated the
application has problem when navegating in the map.
SECOND WAY was redefining the preFeatureInsert Method of
OpenLayers.Layer.Vector the way Mike described in
http://www.nabble.com/reprojection-of-vector-layer-from-wgs84-to-sphericalmercator-td14801474.html
(see http://www.cenit-geosistemas.com/viewer/viewer2.html )
preFeatureInsert = function(feature) {
var src = new OpenLayers.Projection('EPSG:900913');
var dest = new OpenLayers.Projection('EPSG:32628');
for (var i = 0; i < feature.geometry.components.length; i++) {
OpenLayers.Projection.transform(feature.geometry.components[i], src, dest);
}
};
// the definition of the kml-layer now looks like:
var kml = new OpenLayers.Layer.GML("KML",
"http://cenit-geosistemas.com/visor/kml.kml", {
preFeatureInsert:preFeatureInsert,
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
}});
Well, i even don't know if the problem has to do with the coordinate
transformation if it is caused by something else...
Thanks a lot for any advice on how to display the KML in UTM coordinates
with the EPSG:32628 wms-basemap!
Best regards,
Jan
***************************************
HERE COMES THE HTML AND THE KML:
FIRST THE HTML
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Display a KML-file in UTM coordenates in OpenLayers</title>
<link rel="stylesheet" href="mapa.css" type="text/css"></link>
<script type="text/javascript" src="OpenLayers/OpenLayers.js"></script>
<script type="text/javascript" src="proj4js/lib/proj4js.js"></script>
<script type="text/javascript"
src="proj4js/lib/defs/EPSG900913.js"></script>
<script type="text/javascript" src="proj4js/lib/defs/EPSG32628.js"></script>
<script type="text/javascript"
src="OpenLayers/lib/Firebug/firebug.js"></script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection('EPSG:32628'),
maxExtent: new OpenLayers.Bounds(319000, 3116000, 335300, 3128000),
units: 'm',
maxResolution: 'auto',
controls: []
});
var wms = new OpenLayers.Layer.WMS("Ortofoto",
"http://idecan3.grafcan.es/ServicioWMS/OrtoExpress?", {
'layers': 'ortoexpress',
'srs':'EPSG:32628'
});
//HERE I INSERTED THE DIFERENT ATTEMPTS TO DEFINE THE KML-LAYER
DESCRIBED ABOVE!
var kml = new OpenLayers.Layer.GML( -- see above --- );
map.addLayers([wms,kml]);
map.addControl(new OpenLayers.Control.PanZoom());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MouseDefaults());
var center, zoom;
center = new OpenLayers.LonLat(327150, 3122000);
zoom = map.getZoomForExtent(map.maxExtent);
map.setCenter(center, zoom);
}
</script>
</head>
<body onload="init()">
<table width="100%" height="100%">
<tr>
<td style="vertical-align:top" width="250px">
<div id="titulo">KML with LongLat coordinates in OpenLayers
(UTM)</div><br><br>
<a href="http://www.cenit-geosistemas.com/viewer/kml.kml"> View the kml
en google earth </a><br>
<p>Datos: Grafcan<br> SRS: WGS84 UTM Zone 28N</p>
</td>
<td>
<div id="map"></div>
</td>
</tr>
</table>
</body>
</html>
*****
AND THE KML
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<name>KML</name>
<Style id="sh_sunny">
<IconStyle>
<scale>1.4</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/shapes/sunny.png</href>
</Icon>
<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
</IconStyle>
</Style>
<Style id="sn_sunny">
<IconStyle>
<scale>1.1</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/shapes/sunny.png</href>
</Icon>
<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
</IconStyle>
</Style>
<StyleMap id="msn_sunny">
<Pair>
<key>normal</key>
<styleUrl>#sn_sunny</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#sh_sunny</styleUrl>
</Pair>
</StyleMap>
<Placemark>
<name>Horno</name>
<description></description>
<LookAt>
<longitude>-16.749093</longitude>
<latitude>28.196578</latitude>
<altitude>0</altitude>
<range>14987.2345530687</range>
<tilt>0</tilt>
<heading>-5.761902813094587</heading>
<altitudeMode>relativeToGround</altitudeMode>
</LookAt>
<styleUrl>#sn_horno</styleUrl>
<Point>
<coordinates>-16.749093, 28.196578,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
2008/11/1, Erik Uzureau <
RSS Feed