Openlayers geom
From DreamsteepWiki
FROM PG_ROUTING WEBSITE
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 800px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="./OpenLayers-google/lib/OpenLayers.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=foobar"></script>
<script type="text/javascript">
var SinglePoint = OpenLayers.Class.create();
SinglePoint.prototype = OpenLayers.Class.inherit(OpenLayers.Handler.Point, {
createFeature: function(evt) {
this.control.layer.removeFeatures(this.control.layer.features);
OpenLayers.Handler.Point.prototype.createFeature.apply(this, arguments);
}
});
var start_style = OpenLayers.Util.applyDefaults({
externalGraphic: "start.png",
graphicWidth: 18,
graphicHeight: 26,
graphicYOffset: -26,
graphicOpacity: 1
}, OpenLayers.Feature.Vector.style['default']);
var stop_style = OpenLayers.Util.applyDefaults({
externalGraphic: "stop.png",
graphicWidth: 18,
graphicHeight: 26,
graphicYOffset: -26,
graphicOpacity: 1
}, OpenLayers.Feature.Vector.style['default']);
var result_style = OpenLayers.Util.applyDefaults({
strokeWidth: 3,
strokeColor: "#ff0000",
fillOpacity: 0
}, OpenLayers.Feature.Vector.style['default']);
// global variables
var map, parser, start, stop, downtown, result, controls;
function init() {
map = new OpenLayers.Map('map', {projection: "EPSG: 54004",
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508,
-136554022,
20037508,
136554022)
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
// create and add layers to the map
var satellite = new OpenLayers.Layer.GoogleMercator("Google Satellite",
{type: G_NORMAL_MAP});
start = new OpenLayers.Layer.Vector("Start point", {style: start_style});
stop = new OpenLayers.Layer.Vector("End point", {style: stop_style});
downtown = new OpenLayers.Layer.Vector("Downtown data area",
{style: result_style});
result = new OpenLayers.Layer.Vector("Routing results",
{style: result_style});
map.addLayers([satellite, start, stop, downtown,result]);
// create a feature from a wkt string and add it to the map
parser = new OpenLayers.Format.WKT();
var wkt = "POLYGON((-13737893 6151394, -13737893 6141906, -13728396 6141906, -13728396 6151394, -13737893 6151394))";
var geometry = parser.read(wkt);
var feature = new OpenLayers.Feature.Vector(geometry);
downtown.addFeatures([feature]);
// set default position
map.zoomToExtent(new OpenLayers.Bounds(-13737893,
6141906,
-13728396,
6151394));
// controls
controls = {
start: new OpenLayers.Control.DrawFeature(start, SinglePoint),
stop: new OpenLayers.Control.DrawFeature(stop, SinglePoint)
}
for (var key in controls) {
map.addControl(controls[key]);
}
}
function toggleControl(element) {
for (key in controls) {
if (element.value == key && element.checked) {
controls[key].activate();
} else {
controls[key].deactivate();
}
}
}
function compute() {
var startPoint = start.features[0];
var stopPoint = stop.features[0];
if (startPoint && stopPoint) {
var result = {
startpoint: startPoint.geometry.x + ' ' + startPoint.geometry.y,
finalpoint: stopPoint.geometry.x + ' ' + stopPoint.geometry.y,
method: OpenLayers.Util.getElement('method').value,
region: "victoria",
srid: "54004"
};
OpenLayers.loadURL("./ax_routing.php",
OpenLayers.Util.getParameterString(result),
null,
displayRoute);
}
}
function displayRoute(response) {
if (response && response.responseXML) {
// erase the previous results
result.removeFeatures(result.features);
// parse the features
var edges = response.responseXML.getElementsByTagName('edge');
var features = [];
for (var i = 0; i < edges.length; i++) {
var g = parser.read(edges[i].getElementsByTagName('wkt')[0].textContent);
features.push(g);
}
result.addFeatures(features);
}
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
<ul>
<li>
<input type="radio" name="control" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="control" value="start" id="startToggle"
onclick="toggleControl(this);" />
<label for="startToggle">set start point</label>
</li>
<li>
<input type="radio" name="control" value="stop" id="stopToggle"
onclick="toggleControl(this);" />
<label for="stopToggle">set stop point</label>
</li>
</ul>
<select id="method">
<option value="SPD">Shortest Path Dijkstra - undirected (BBox)</option>
<option value="SPA">Shortest Path A Star - undirected</option>
<option value="SPS">Shortest Path Shooting Star</option>
</select>
<button onclick="compute()">Calculate Route</button>
</body>
</html>
WKT TO POLYGON
// THIS WORKS!!
//var feature = new OpenLayers.Feature.Vector(
// OpenLayers.Geometry.fromWKT(
// "POLYGON((1314995 11225271,1314795 11225071, 1314935 11225251, 1314965 11225251, 1314955 11225271))"
// )
// );
//vectors.addFeatures([feature]);
///////////////////////////
//////////////////////////////
//THIS WORKS TOO!!!
//var wkt = new OpenLayers.Format.WKT() ;
//var str2 = "POLYGON((1314995 11225271,1314795 11225071, 1314935 11225251, 1314965 11225251, 1314955 11225271))";
//alert(str);
//features=wkt.read(str2);
//alert(features);
//var style1 ={fillColor: '#FFFF33', fillOpacity: .5};
//var thrvec=new OpenLayers.Layer.Vector('WKT' );
//map.addLayers([thrvec]);
//thrvec.addFeatures(features);
///////////////////////////
//THIS ALSO WORKS!!
function make_polygon( COORDS){
var wkt = new OpenLayers.Format.WKT() ;
features=wkt.read(COORDS);
var style1 ={fillColor: '#FFFF33', fillOpacity: .5};
var thrvec=new OpenLayers.Layer.Vector('WKTLAYER' );
map.addLayers([thrvec]);
thrvec.addFeatures(features);
}
var str2 = "POLYGON((1314995 11225271,1314795 11225071, 1314935 11225251, 1314965 11225251, 1314955 11225271))";
make_polygon(str2);
text from OL
OpenLayers.Geometry.fromWKT = function( wkt )
function parseWKT() {
88 var element = document.getElementById('wkt');
89 var collection = wkt.read(element.value);
90 var bounds;
91 if(collection) {
92 if(collection.constructor != Array) {
93 collection = [collection];
94 }
95 var features = [];
96 for(var i=0; i<collection.length; ++i) {
97 features.push(new OpenLayers.Feature.Vector(collection[i]));
98 if (!bounds) {
99 bounds = collection[i].getBounds();
100 }
101 bounds.extend(collection[i].getBounds());
102
103 }
104 vectors.addFeatures(features);
105 map.zoomToExtent(bounds);
106 var plural = (features.length > 1) ? 's' : '';
107 element.value = 'Feature' + plural + ' added'
108 } else {
109 element.value = 'Bad WKT';
110 }
111 }
var box_extents = [
[-10, 50, 5, 60],
[-75, 41, -71, 44],
[-122.6, 37.6, -122.3, 37.9],
[10, 10, 20, 20]
];
var map;
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
var boxes = new OpenLayers.Layer.Boxes( "Boxes" );
for (var i = 0; i < box_extents.length; i++) {
ext = box_extents[i];
bounds = new OpenLayers.Bounds(ext[0], ext[1], ext[2], ext[3]);
box = new OpenLayers.Marker.Box(bounds);
box.events.register("click", box, function (e) {
this.setBorder("yellow");
});
boxes.addMarker(box);
}
map.addLayers([ol_wms, boxes]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
<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
);
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(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)
}
};
}
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/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> <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
);
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(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)
}
};
}
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/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>
SELECT AND HIGHLIGHT
<script type="text/javascript">
var map, controls;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '1';
function init(){
map = new OpenLayers.Map('map');
var vectorz = new OpenLayers.Layer.Vector("vector", {isBaseLayer: true});
map.addLayers([vectorz]);
var report = function(e) {
OpenLayers.Console.log(e.type, e.feature.id);
};
map.addControl(new OpenLayers.Control.EditingToolbar(vectorz));
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
}
</script>
GEOMETRY EXAMPLES
var feature = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((28.828125 0.3515625, 132.1875 -13.0078125, -1.40625 -59.4140625, 28.828125 0.3515625))"
)
);
vectors.addFeatures([feature]);
TOOLBAR EDITOR
<script type="text/javascript">
var map, controls;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '1';
function init(){
map = new OpenLayers.Map('map');
var vectorz = new OpenLayers.Layer.Vector("vector", {isBaseLayer: true});
map.addLayers([vectorz]);
var report = function(e) {
OpenLayers.Console.log(e.type, e.feature.id);
};
map.addControl(new OpenLayers.Control.EditingToolbar(vectorz));
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
}
</script>
ALL OF THEM TOGETHER
<script type="text/javascript">
var map, controls;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
function init(){
map = new OpenLayers.Map('map');
var vectors = new OpenLayers.Layer.Vector("vector", {isBaseLayer: true});
map.addLayers([vectors]);
var feature = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((28.828125 0.3515625, 132.1875 -13.0078125, -1.40625 -59.4140625, 28.828125 0.3515625))"
)
);
vectors.addFeatures([feature]);
var feature2 = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((-120.828125 -50.3515625, -80.1875 -80.0078125, -40.40625 -20.4140625, -120.828125 -50.3515625))"
)
);
vectors.addFeatures([feature2]);
var report = function(e) {
OpenLayers.Console.log(e.type, e.feature.id);
};
var highlightCtrl = new OpenLayers.Control.SelectFeature(vectors, {
hover: true,
highlightOnly: true,
renderIntent: "temporary",
eventListeners: {
beforefeaturehighlighted: report,
featurehighlighted: report,
featureunhighlighted: report
}
});
var selectCtrl = new OpenLayers.Control.SelectFeature(vectors,
{clickout: true}
);
map.addControl(highlightCtrl);
map.addControl(selectCtrl);
highlightCtrl.activate();
selectCtrl.activate();
map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
}
</script>
