e8960054a9
git-svn-id: http://svn.openlayers.org/trunk/openlayers@12082 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
235 lines
8.8 KiB
HTML
235 lines
8.8 KiB
HTML
<!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>Vector Formats</title>
|
|
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
|
<!--[if lte IE 6]>
|
|
<link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
|
|
<![endif]-->
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
|
<style type="text/css">
|
|
input, select, textarea {
|
|
font: 0.9em Verdana, Arial, sans-serif;
|
|
}
|
|
#leftcol {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 1em;
|
|
padding: 0;
|
|
width: 517px;
|
|
}
|
|
#map {
|
|
width: 512px;
|
|
height: 225px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
#input {
|
|
width: 512px;
|
|
}
|
|
#text {
|
|
font-size: 0.85em;
|
|
margin: 1em 0 1em 0;
|
|
width: 100%;
|
|
height: 10em;
|
|
}
|
|
#info {
|
|
position: relative;
|
|
padding: 2em 0;
|
|
margin-left: 540px;
|
|
}
|
|
#output {
|
|
font-size: 0.8em;
|
|
width: 100%;
|
|
height: 512px;
|
|
border: 0;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
padding: 0.75em 0 0.75em 0;
|
|
}
|
|
</style>
|
|
<script src="../lib/Firebug/firebug.js"></script>
|
|
<script src="../lib/OpenLayers.js"></script>
|
|
<script type="text/javascript">
|
|
var map, vectors, formats;
|
|
function updateFormats() {
|
|
var in_options = {
|
|
'internalProjection': map.baseLayer.projection,
|
|
'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("inproj").value)
|
|
};
|
|
var out_options = {
|
|
'internalProjection': map.baseLayer.projection,
|
|
'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("outproj").value)
|
|
};
|
|
var gmlOptions = {
|
|
featureType: "feature",
|
|
featureNS: "http://example.com/feature"
|
|
};
|
|
var gmlOptionsIn = OpenLayers.Util.extend(
|
|
OpenLayers.Util.extend({}, gmlOptions),
|
|
in_options
|
|
);
|
|
var gmlOptionsOut = OpenLayers.Util.extend(
|
|
OpenLayers.Util.extend({}, gmlOptions),
|
|
out_options
|
|
);
|
|
var kmlOptionsIn = OpenLayers.Util.extend(
|
|
{extractStyles: true}, in_options);
|
|
formats = {
|
|
'in': {
|
|
wkt: new OpenLayers.Format.WKT(in_options),
|
|
geojson: new OpenLayers.Format.GeoJSON(in_options),
|
|
georss: new OpenLayers.Format.GeoRSS(in_options),
|
|
gml2: new OpenLayers.Format.GML.v2(gmlOptionsIn),
|
|
gml3: new OpenLayers.Format.GML.v3(gmlOptionsIn),
|
|
kml: new OpenLayers.Format.KML(kmlOptionsIn),
|
|
atom: new OpenLayers.Format.Atom(in_options)
|
|
},
|
|
'out': {
|
|
wkt: new OpenLayers.Format.WKT(out_options),
|
|
geojson: new OpenLayers.Format.GeoJSON(out_options),
|
|
georss: new OpenLayers.Format.GeoRSS(out_options),
|
|
gml2: new OpenLayers.Format.GML.v2(gmlOptionsOut),
|
|
gml3: new OpenLayers.Format.GML.v3(gmlOptionsOut),
|
|
kml: new OpenLayers.Format.KML(out_options),
|
|
atom: new OpenLayers.Format.Atom(out_options)
|
|
}
|
|
};
|
|
}
|
|
function init(){
|
|
map = new OpenLayers.Map('map');
|
|
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
|
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
|
|
|
|
vectors = new OpenLayers.Layer.Vector("Vector Layer");
|
|
|
|
map.addLayers([wms, vectors]);
|
|
map.addControl(new OpenLayers.Control.MousePosition());
|
|
map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
|
|
|
|
var options = {
|
|
hover: true,
|
|
onSelect: serialize
|
|
};
|
|
var select = new OpenLayers.Control.SelectFeature(vectors, options);
|
|
map.addControl(select);
|
|
select.activate();
|
|
|
|
updateFormats();
|
|
|
|
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
|
|
}
|
|
|
|
function serialize(feature) {
|
|
var type = document.getElementById("formatType").value;
|
|
// second argument for pretty printing (geojson only)
|
|
var pretty = document.getElementById("prettyPrint").checked;
|
|
var str = formats['out'][type].write(feature, pretty);
|
|
// not a good idea in general, just for this demo
|
|
str = str.replace(/,/g, ', ');
|
|
document.getElementById('output').value = str;
|
|
}
|
|
|
|
function deserialize() {
|
|
var element = document.getElementById('text');
|
|
var type = document.getElementById("formatType").value;
|
|
var features = formats['in'][type].read(element.value);
|
|
var bounds;
|
|
if(features) {
|
|
if(features.constructor != Array) {
|
|
features = [features];
|
|
}
|
|
for(var i=0; i<features.length; ++i) {
|
|
if (!bounds) {
|
|
bounds = features[i].geometry.getBounds();
|
|
} else {
|
|
bounds.extend(features[i].geometry.getBounds());
|
|
}
|
|
|
|
}
|
|
vectors.addFeatures(features);
|
|
map.zoomToExtent(bounds);
|
|
var plural = (features.length > 1) ? 's' : '';
|
|
element.value = features.length + ' feature' + plural + ' added';
|
|
} else {
|
|
element.value = 'Bad input ' + type;
|
|
}
|
|
}
|
|
|
|
// preload images
|
|
(function() {
|
|
var roots = ["draw_point", "draw_line", "draw_polygon", "pan"];
|
|
var onImages = [];
|
|
var offImages = [];
|
|
for(var i=0; i<roots.length; ++i) {
|
|
onImages[i] = new Image();
|
|
onImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
|
|
offImages[i] = new Image();
|
|
offImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
|
|
}
|
|
})();
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<div id="leftcol">
|
|
<h1 id="title">Vector Formats Example</h1>
|
|
|
|
<div id="tags">
|
|
vector, geojson, atom, kml, georss, gml, wkt, advanced, spherical, mercator
|
|
</div>
|
|
<p id="shortdesc">
|
|
Shows the wide variety of vector formats that open layers supports.
|
|
</p>
|
|
|
|
<div id="map" class="smallmap"></div>
|
|
<div id="input">
|
|
<p>Use the drop-down below to select the input/output format
|
|
for vector features. New features can be added by using the drawing
|
|
tools above or by pasting their text representation below.</p>
|
|
<label for="formatType">Format</label>
|
|
<select name="formatType" id="formatType">
|
|
<option value="geojson" selected="selected">GeoJSON</option>
|
|
<option value="atom">Atom</option>
|
|
<option value="kml">KML</option>
|
|
<option value="georss">GeoRSS</option>
|
|
<option value="gml2">GML (v2)</option>
|
|
<option value="gml3">GML (v3)</option>
|
|
<option value="wkt">Well-Known Text (WKT)</option>
|
|
</select>
|
|
|
|
<label for="prettyPrint">Pretty print</label>
|
|
<input id="prettyPrint" type="checkbox"
|
|
name="prettyPrint" value="1" />
|
|
<br>
|
|
Input Projection: <select id="inproj" onchange='updateFormats()'>
|
|
<option value="EPSG:4326" selected="selected">EPSG:4326</option>
|
|
<option value="EPSG:900913">Spherical Mercator</option>
|
|
</select> <br>
|
|
Output Projection: <select id="outproj" onchange='updateFormats()'>
|
|
<option value="EPSG:4326" selected="selected">EPSG:4326</option>
|
|
<option value="EPSG:900913">Spherical Mercator</option>
|
|
</select>
|
|
<br>
|
|
<textarea id="text">paste text here...</textarea>
|
|
<br>
|
|
<input type="button" value="add feature" onclick="deserialize();" />
|
|
</div>
|
|
|
|
<div id="docs">
|
|
</div>
|
|
|
|
</div>
|
|
<div id="info">
|
|
<p>Use the tools to the left to draw new polygons, lines, and points.
|
|
After drawing some new features, hover over a feature to see the
|
|
serialized version below.</p>
|
|
<textarea id="output"></textarea>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|