<!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>Geometry Intersections</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">
html, body {
margin: 0;
padding: 1em;
font: 0.9em Verdana, Arial, sans serif;
}
input, select, textarea {
font: 0.9em Verdana, Arial, sans-serif;
}
h2 {
margin-top: 0.75em;
font-size: 1.6em;
}
#leftcol {
position: absolute;
top: 0;
left: 1em;
padding: 0;
width: 455px;
}
#map {
width: 450px;
height: 225px;
border: 1px solid #ccc;
}
#input {
width: 450px;
}
#text {
font-size: 0.85em;
margin: 1em 0 1em 0;
width: 100%;
height: 10em;
}
#info {
position: relative;
padding: 2em 0;
margin-left: 470px;
}
#features {
font-size: 0.8em;
width: 100%;
height: 200px;
}
#intersections {
font-size: 0.8em;
width: 100%;
height: 200px;
}
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, geojson;
function init(){
map = new OpenLayers.Map('map');
vectors = new OpenLayers.Layer.Vector(
"Vector Layer",
{isBaseLayer: true}
);
map.addLayers([vectors]);
map.addControl(new OpenLayers.Control.MousePosition());
var panel = new OpenLayers.Control.EditingToolbar(vectors);
map.addControl(panel);
geojson = new OpenLayers.Format.GeoJSON();
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
}
function serialize() {
var str = geojson.write(vectors.features, true);
document.getElementById('features').value = str;
}
function deserialize() {
var element = document.getElementById('text');
var features = geojson.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';
}
}
function intersect() {
var features = vectors.features;
var feat1, feat2, intersects12, intersects21;
var parts = [];
// reset attributes
for(var i=0; i<features.length; ++i) {
features[i].attributes.intersectsWith = [];
}
for(var i=0; i<features.length-1; ++i) {
feat1 = features[i];
for(var j=i+1; j<features.length; ++j) {
feat2 = features[j];
intersects12 = feat1.geometry.intersects(feat2.geometry);
if(intersects12) {
feat1.attributes.intersectsWith.push("f" + j);
parts.push("f" + i + " intersects f" + j + "\n");
}
intersects21 = feat2.geometry.intersects(feat1.geometry);
if(intersects21) {
feat2.attributes.intersectsWith.push("f" + i);
parts.push("f" + j + " intersects f" + i + "\n");
}
if(intersects12 != intersects21) {
parts.push("trouble with " + i + " and " + j + "\n");
}
}
}
if(parts.length > 0) {
document.getElementById("intersections").value = parts.join("");
} else {
document.getElementById("intersections").value = "no intersections";
}
}
// 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">OpenLayers Geometry Intersection Example</h1>
<div id="tags">
intersection, geometry
</div>
<p id="shortdesc">
Use of geometry.intersects method for testing geometry intersections.
</p>
<div id="map" class="smallmap"></div>
<div id="input">
<textarea id="text"></textarea>
<input type="button" value="add feature" onclick="deserialize();" />
<span id="selected"></span>
</div>
</div>
<div id="info">
<p>Features</p>
<input type="button" value="refresh" onclick="serialize();"><br>
<textarea id="features"></textarea>
<p>Intersections</p>
<input type="button" value="intersect all" onclick="intersect();"><br>
<textarea id="intersections"></textarea>
</div>
</body>
</html>
