Fix event handling.. no need to detect lastXY
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user