ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Making sketch handlers work over the dateline by using layer.getLonLatFromViewPortPx instead of map.getLonLatFromPixel. Thanks bartvde for the unit and acceptance tests. r=bartvde (closes #2787)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@12346 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2011-09-08 17:53:44 +00:00
parent 21423cefe2
commit 98be6e313b
10 changed files with 175 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
lib/OpenLayers/Control/EditingToolbar.js
View File

@@ -24,6 +24,13 @@
OpenLayers.Control.EditingToolbar = OpenLayers.Class(
OpenLayers.Control.Panel, {
/**
* APIProperty: citeCompliant
* {Boolean} If set to true, coordinates of features drawn in a map extent
* crossing the date line won't exceed the world bounds. Default is false.
*/
citeCompliant: false,
/**
* Constructor: OpenLayers.Control.EditingToolbar
* Create an editing toolbar for a given layer.
@@ -39,9 +46,18 @@ OpenLayers.Control.EditingToolbar = OpenLayers.Class(
[ new OpenLayers.Control.Navigation() ]
);
var controls = [
new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, {'displayClass': 'olControlDrawFeaturePoint'}),
new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Path, {'displayClass': 'olControlDrawFeaturePath'}),
new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Polygon, {'displayClass': 'olControlDrawFeaturePolygon'})
new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, {
displayClass: 'olControlDrawFeaturePoint',
handlerOptions: {citeCompliant: this.citeCompliant}
}),
new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Path, {
displayClass: 'olControlDrawFeaturePath',
handlerOptions: {citeCompliant: this.citeCompliant}
}),
new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Polygon, {
displayClass: 'olControlDrawFeaturePolygon',
handlerOptions: {citeCompliant: this.citeCompliant}
})
];
this.addControls(controls);
},

6
lib/OpenLayers/Handler/Path.js
View File

@@ -108,7 +108,7 @@ OpenLayers.Handler.Path = OpenLayers.Class(OpenLayers.Handler.Point, {
* feature.
*/
createFeature: function(pixel) {
var lonlat = this.map.getLonLatFromPixel(pixel);
var lonlat = this.layer.getLonLatFromViewPortPx(pixel);
var geometry = new OpenLayers.Geometry.Point(
lonlat.lon, lonlat.lat
);
@@ -165,7 +165,7 @@ OpenLayers.Handler.Path = OpenLayers.Class(OpenLayers.Handler.Point, {
*/
addPoint: function(pixel) {
this.layer.removeFeatures([this.point]);
var lonlat = this.control.map.getLonLatFromPixel(pixel);
var lonlat = this.layer.getLonLatFromViewPortPx(pixel);
this.point = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat)
);
@@ -326,7 +326,7 @@ OpenLayers.Handler.Path = OpenLayers.Class(OpenLayers.Handler.Point, {
if(!this.line) {
this.createFeature(pixel);
}
var lonlat = this.control.map.getLonLatFromPixel(pixel);
var lonlat = this.layer.getLonLatFromViewPortPx(pixel);
this.point.geometry.x = lonlat.lon;
this.point.geometry.y = lonlat.lat;
this.callback("modify", [this.point.geometry, this.getSketch(), drawing]);

14
lib/OpenLayers/Handler/Point.js
View File

@@ -42,6 +42,13 @@ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, {
*/
multi: false,
/**
* APIProperty: citeCompliant
* {Boolean} If set to true, coordinates of features drawn in a map extent
* crossing the date line won't exceed the world bounds. Default is false.
*/
citeCompliant: false,
/**
* Property: mouseDown
* {Boolean} The mouse is down
@@ -164,7 +171,8 @@ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, {
// without this, resolution properties must be specified at the
// map-level for this temporary layer to init its resolutions
// correctly
calculateInRange: OpenLayers.Function.True
calculateInRange: OpenLayers.Function.True,
wrapDateLine: this.citeCompliant
}, this.layerOptions);
this.layer = new OpenLayers.Layer.Vector(this.CLASS_NAME, options);
this.map.addLayer(this.layer);
@@ -179,7 +187,7 @@ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, {
* pixel - {<OpenLayers.Pixel>} A pixel location on the map.
*/
createFeature: function(pixel) {
var lonlat = this.map.getLonLatFromPixel(pixel);
var lonlat = this.layer.getLonLatFromViewPortPx(pixel);
var geometry = new OpenLayers.Geometry.Point(
lonlat.lon, lonlat.lat
);
@@ -306,7 +314,7 @@ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, {
if(!this.point) {
this.createFeature(pixel);
}
var lonlat = this.map.getLonLatFromPixel(pixel);
var lonlat = this.layer.getLonLatFromViewPortPx(pixel);
this.point.geometry.x = lonlat.lon;
this.point.geometry.y = lonlat.lat;
this.callback("modify", [this.point.geometry, this.point, false]);

2
lib/OpenLayers/Handler/Polygon.js
View File

@@ -75,7 +75,7 @@ OpenLayers.Handler.Polygon = OpenLayers.Class(OpenLayers.Handler.Path, {
* feature.
*/
createFeature: function(pixel) {
var lonlat = this.map.getLonLatFromPixel(pixel);
var lonlat = this.layer.getLonLatFromViewPortPx(pixel);
var geometry = new OpenLayers.Geometry.Point(
lonlat.lon, lonlat.lat
);

14
lib/OpenLayers/Handler/RegularPolygon.js
View File

@@ -83,6 +83,13 @@ OpenLayers.Handler.RegularPolygon = OpenLayers.Class(OpenLayers.Handler.Drag, {
*/
irregular: false,
/**
* APIProperty: citeCompliant
* {Boolean} If set to true, coordinates of features drawn in a map extent
* crossing the date line won't exceed the world bounds. Default is false.
*/
citeCompliant: false,
/**
* Property: angle
* {Float} The angle from the origin (mouse down) to the current mouse
@@ -174,7 +181,8 @@ OpenLayers.Handler.RegularPolygon = OpenLayers.Class(OpenLayers.Handler.Drag, {
// without this, resolution properties must be specified at the
// map-level for this temporary layer to init its resolutions
// correctly
calculateInRange: OpenLayers.Function.True
calculateInRange: OpenLayers.Function.True,
wrapDateLine: this.citeCompliant
}, this.layerOptions);
this.layer = new OpenLayers.Layer.Vector(this.CLASS_NAME, options);
this.map.addLayer(this.layer);
@@ -224,7 +232,7 @@ OpenLayers.Handler.RegularPolygon = OpenLayers.Class(OpenLayers.Handler.Drag, {
*/
down: function(evt) {
this.fixedRadius = !!(this.radius);
var maploc = this.map.getLonLatFromPixel(evt.xy);
var maploc = this.layer.getLonLatFromViewPortPx(evt.xy);
this.origin = new OpenLayers.Geometry.Point(maploc.lon, maploc.lat);
// create the new polygon
if(!this.fixedRadius || this.irregular) {
@@ -250,7 +258,7 @@ OpenLayers.Handler.RegularPolygon = OpenLayers.Class(OpenLayers.Handler.Drag, {
* evt - {Evt} The move event
*/
move: function(evt) {
var maploc = this.map.getLonLatFromPixel(evt.xy);
var maploc = this.layer.getLonLatFromViewPortPx(evt.xy);
var point = new OpenLayers.Geometry.Point(maploc.lon, maploc.lat);
if(this.irregular) {
var ry = Math.sqrt(2) * Math.abs(point.y - this.origin.y) / 2;

7
tests/Control/EditingToolbar.html
View File

@@ -3,12 +3,14 @@
<script src="../OLLoader.js"></script>
<script type="text/javascript">
function test_ctor_draw(t) {
t.plan(4);
t.plan(5);
var map = new OpenLayers.Map('map');
var vLayer = new OpenLayers.Layer.Vector();
map.addLayer(vLayer);
var editingToolbar = new OpenLayers.Control.EditingToolbar(vLayer);
var editingToolbar = new OpenLayers.Control.EditingToolbar(vLayer, {
citeCompliant: "foo"
});
map.addControl(editingToolbar);
t.ok(editingToolbar instanceof OpenLayers.Control.EditingToolbar,
@@ -19,6 +21,7 @@
"First control is active" );
t.eq(editingToolbar.controls.length, 4,
"EditingToolbar contains 4 Controls" );
t.eq(editingToolbar.controls[1].handler.citeCompliant, "foo", "citeCompliant option passed to handler correctly")
map.destroy();
}

26
tests/Handler/Path.html
View File

@@ -1376,6 +1376,32 @@
map.destroy();
}
function test_citeComplaint(t) {
t.plan(2);
var map = new OpenLayers.Map('map');
map.addLayer(new OpenLayers.Layer.OSM());
var layer = new OpenLayers.Layer.Vector();
map.addLayer(layer);
var control = new OpenLayers.Control({});
var handler = new OpenLayers.Handler.Path(control, {});
control.handler = handler;
map.addControl(control);
map.zoomToExtent(new OpenLayers.Bounds(-24225034.496992, -11368938.517442, -14206280.326992, -1350184.3474418));
handler.activate();
handler.createFeature(new OpenLayers.Pixel(100, 50));
t.ok(handler.point.geometry.x < 0, "Geometry started correctly when wrapping the dateline using citeCompliant false");
control.deactivate();
handler = new OpenLayers.Handler.Path(control, {}, {citeCompliant: true});
control.handler = handler;
control.activate();
handler.createFeature(new OpenLayers.Pixel(100, 50));
t.ok(handler.point.geometry.x > 0, "Geometry started correctly when wrapping the dateline using citeCompliant true");
map.destroy();
}
</script>
</head>
<body>

25
tests/Handler/Polygon.html
View File

@@ -1128,6 +1128,31 @@
map.destroy();
}
function test_citeComplaint(t) {
t.plan(2);
var map = new OpenLayers.Map('map');
map.addLayer(new OpenLayers.Layer.OSM());
var layer = new OpenLayers.Layer.Vector();
map.addLayer(layer);
var control = new OpenLayers.Control({});
var handler = new OpenLayers.Handler.Polygon(control, {});
control.handler = handler;
map.addControl(control);
map.zoomToExtent(new OpenLayers.Bounds(-24225034.496992, -11368938.517442, -14206280.326992, -1350184.3474418));
control.activate();
handler.createFeature(new OpenLayers.Pixel(100, 50));
t.ok(handler.point.geometry.x < 0, "Geometry started correctly when wrapping the dateline using citeCompliant false");
control.deactivate();
var handler = new OpenLayers.Handler.Polygon(control, {}, {citeCompliant: true});
control.handler = handler;
control.activate();
handler.createFeature(new OpenLayers.Pixel(100, 50));
t.ok(handler.point.geometry.x > 0, "Geometry started correctly when wrapping the dateline using citeCompliant true");
map.destroy();
}
</script>
</head>
<body>

23
tests/Handler/RegularPolygon.html
View File

@@ -149,9 +149,6 @@
function test_Handler_RegularPolygon_irregular(t) {
t.plan(4);
var map = {
getLonLatFromPixel: function(px) {
return {lon: px.x, lat: px.y};
},
getResolution: function() {
return 1;
}
@@ -164,6 +161,9 @@
t.eq(ring.components[0].y, 10, "correct bottom");
t.eq(ring.components[2].x, 10, "correct left");
t.eq(ring.components[2].y, 15, "correct top");
},
getLonLatFromViewPortPx: function(px) {
return {lon: px.x, lat: px.y};
}
};
var control = {};
@@ -190,11 +190,7 @@
t.plan(1);
// setup
var map = new OpenLayers.Map("map", {
getLonLatFromPixel: function(px) {
return {lon: px.x, lat: px.y};
}
});
var map = new OpenLayers.Map("map");
var control = {"map": map};
@@ -211,6 +207,17 @@
var isLeftClick = OpenLayers.Event.isLeftClick;
OpenLayers.Event.isLeftClick = function() { return true; };
handler.layer = {
renderer: {
clear: OpenLayers.Function.Void
},
addFeatures: OpenLayers.Function.Void,
drawFeature: OpenLayers.Function.Void,
destroyFeatures: OpenLayers.Function.Void,
getLonLatFromViewPortPx: function() {
return xy;
}
};
// test
map.events.triggerEvent("mousedown", {"xy": xy});

59
tests/manual/dateline-sketch.html Normal file
View File

@@ -0,0 +1,59 @@
<!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>OpenLayers: Sketch handlers crossing the dateline</title>
<link rel="stylesheet" href="../../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="../../examples/style.css" type="text/css">
<style type="text/css">
#map {
height: 512px;
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
<script src="../../lib/OpenLayers.js"></script>
<script type="text/javascript">
// make map available for easy debugging
var map;
function init(){
map = new OpenLayers.Map('map');
var gmap = new OpenLayers.Layer.Google(
"Google Streets",
{sphericalMercator: true}
);
var vector = new OpenLayers.Layer.Vector("Editable Vectors");
map.addLayers([gmap, vector]);
map.addControl(new OpenLayers.Control.EditingToolbar(vector));
var extent = new OpenLayers.Bounds(-24225034.496992, -11368938.517442, -14206280.326992, -1350184.3474418);
map.zoomToExtent(extent);
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers sketch handlers crossing the dateline example</h1>
<div id="tags">
international date line, dateline, sketch
</div>
<p id="shortdesc">
Start digitizing a polygon or line
on one side of the international dateline, and then cross the dateline
whilst digitizing. The feature should behave like digitizing on any
other location.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
</div>
</body>
</html>