Fix event handling.. no need to detect lastXY

This commit is contained in:
Matthew Perry
2012-02-07 11:23:04 -08:00
parent 47222a9401
commit 4e84a7113d
2 changed files with 32 additions and 51 deletions

View File

@@ -4,7 +4,7 @@
<script src='./OpenLayers.js' type='text/javascript'></script>
<style>
.olTileImage { border: 1px solid #DDD !important; }
#themap { width:800px; height:400px; border:1px black solid; }
#themap { width:512px; height:380px; border:1px black solid; }
#debugdiv { float:right; }
</style>
</head>
@@ -14,25 +14,28 @@
<div id="selector">
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="move" id="moveHandler" onclick="toggleControl(this);" checked="checked" />
<input type="radio" name="type" value="move" id="moveHandler"
onclick="toggleControl(this);" checked="checked" />
<label for="moveHandler">Move</label>
</li>
<li>
<input type="radio" name="type" value="hover" id="hoverHandler" onclick="toggleControl(this);" />
<input type="radio" name="type" value="hover" id="hoverHandler"
onclick="toggleControl(this);" />
<label for="hoverHandler">Hover</label>
</li>
<li>
<input type="radio" name="type" value="click" id="clickHandler" onclick="toggleControl(this);" />
<input type="radio" name="type" value="click" id="clickHandler"
onclick="toggleControl(this);" />
<label for="clickHandler">Click</label>
</li>
<li>
<input type="radio" name="type" value="click_callback" id="clickHandlerCustom" onclick="toggleControl(this);" />
<input type="radio" name="type" value="click_callback" id="clickHandlerCustom"
onclick="toggleControl(this);" />
<label for="clickHandlerCustom">Click with custom callback</label>
</li>
</ul>
</div>
<div id="themap"></div>
<div id="debugdiv"></div>
<div id="attrsdiv"></div>
<script>
/*
@@ -42,14 +45,15 @@
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
controls: [] // No default controls; no pan zoom for demo
});
/*
* Controls
*/
var callback = function(attributes) {
var msg = "got it - " + attributes.NAME;
var msg = "<strong>In 2005, " + attributes.NAME + " had a population of " + attributes.POP2005 + " people.</strong>";
var element = OpenLayers.Util.getElement('attrsdiv');
element.innerHTML = msg;
}
@@ -88,28 +92,25 @@
control = controls[el.value];
control.activate();
}
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.LayerSwitcher());
/*
* Layers
*/
var layer = new OpenLayers.Layer.XYZ(
'TestLayer',
"http://tiles/world/${z}/${x}/${y}.png",
{'type':'png', 'sphericalMercator': true}
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}
);
map.addLayer(layer);
map.addLayer(ol_wms);
var layer2 = new OpenLayers.Layer.UTFGrid(
'GridLayer',
"http://tiles/world_utfgrid/${z}/${x}/${y}.json",
{'type':'json', 'sphericalMercator': true, 'visible': 'false'}
var grid_layer = new OpenLayers.Layer.UTFGrid(
'Invisible UTFGrid Layer',
//"http://tiles/world_utfgrid/${z}/${x}/${y}.json"
"./utfgrid/${z}/${x}/${y}.json"
);
map.addLayer(layer2);
map.addLayer(grid_layer);
map.zoomTo(2);
map.zoomTo(1);
</script>
</body>
</html>

View File

@@ -33,12 +33,6 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
element: null,
debugElement: null,
/**
* Property: lastXy
* {<OpenLayers.Pixel>}
*/
lastXy: null,
/**
* Constructor: OpenLayers.Control.UTFGrid
* Parameters:
@@ -50,7 +44,7 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
'stopMove': false,
'single': true,
'double': false,
'pixelTolerance': 0,
'pixelTolerance': 4,
'stopSingle': false,
'stopDouble': false
},
@@ -115,7 +109,6 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
if (options.div) {
this.element = OpenLayers.Util.getElement(options.div);
}
this.resetHandler();
},
@@ -123,27 +116,15 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
* Method: handleEvent
*/
handleEvent: function(evt) {
var lonLat;
if (evt == null) {
this.reset();
return;
} else {
if (this.lastXy == null ||
Math.abs(evt.xy.x - this.lastXy.x) > this.granularity ||
Math.abs(evt.xy.y - this.lastXy.y) > this.granularity)
{
this.lastXy = evt.xy;
return;
}
lonLat = this.map.getLonLatFromPixel(evt.xy);
if (!lonLat) {
// map may not have been properly initialized
return;
}
this.lastXy = evt.xy;
}
var lonLat = this.map.getLonLatFromPixel(evt.xy);
if (!lonLat) {
return;
}
var layers = this.findLayers();
if (layers.length > 0) {
@@ -164,8 +145,7 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
Math.floor((info.i) / resolution)
));
attrs = data.data[data.keys[code]];
if (attrs)
this.callback(attrs);
this.callback(attrs);
}
}
}
@@ -198,11 +178,11 @@ OpenLayers.Control.UTFGrid = OpenLayers.Class(OpenLayers.Control, {
*/
callback: function(attrs) {
if (attrs !== null && typeof(attrs) !== 'undefined') {
val = "<p>Attributes</p><ul>";
val = "<table>";
for(var index in attrs) {
val += "<li>" + index + " : " + attrs[index] + "</li>";
val += "<tr><th>" + index + "</th><td>" + attrs[index] + "</td></tr>";
}
val += "</ul>";
val += "</table>";
this.element.innerHTML = val;
return true;
} else {