c350fd6810
git-svn-id: http://svn.openlayers.org/trunk/openlayers@7095 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
181 lines
6.0 KiB
HTML
181 lines
6.0 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Geometry Intersections</title>
|
|
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
|
<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="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">
|
|
Features
|
|
<input type="button" value="refresh" onclick="serialize();" /><br />
|
|
<textarea id="features"></textarea>
|
|
Intersections
|
|
<input type="button" value="intersect all" onclick="intersect();" /><br />
|
|
<textarea id="intersections"></textarea>
|
|
</div>
|
|
</body>
|
|
</html>
|