fix for #60
conversions to/from lonlat/px need to take into account the offset of the layersContainerDiv. I have introduced the following functions for converting between layer and screen pixel values: getLayerPxFromScreenPx() and getScreenPxFromLayerPx() they are pretty self-explanitory. I then renamed: getPixelFromLonLat() and getLonLatFromPixel() to: getScreenPxFromLonLat() and getLonLatFroScreenmPx() and added: getLayerPxFromLonLat() and getLonLatFromLayerPx() updates were made throughout the code, demos, and tests so everything should still run smoothly. -e- git-svn-id: http://svn.openlayers.org/trunk/openlayers@329 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<script src="lib/OpenLayers.js"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
var map, layer, popup;
|
||||
@@ -21,6 +21,15 @@
|
||||
"http://octo.metacarta.com/cgi-bin/mapserv",
|
||||
{map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'} );
|
||||
|
||||
|
||||
map.addLayer(
|
||||
new OpenLayers.Layer.WMS("NASA Mosaic",
|
||||
"http://wms.jpl.nasa.gov/wms.cgi",
|
||||
{"EXCEPTIONS" : "application/vnd.ogc.se_inimage",
|
||||
"format" : "image/jpeg",
|
||||
layers:"modis,global_mosaic"}
|
||||
));
|
||||
|
||||
map.addLayer(layer);
|
||||
|
||||
markers = new OpenLayers.Layer.Markers( "Markers" );
|
||||
@@ -31,13 +40,17 @@
|
||||
}
|
||||
|
||||
function changer() {
|
||||
|
||||
|
||||
var lon = map.getLonLatFromLayerPx(new OpenLayers.Pixel(0,0)).lon;
|
||||
var lat = map.getLonLatFromLayerPx(new OpenLayers.Pixel(0,0)).lat;
|
||||
var slon = map.getLonLatFromScreenPx(new OpenLayers.Pixel(0,0)).lon;
|
||||
var slat = map.getLonLatFromScreenPx(new OpenLayers.Pixel(0,0)).lat;
|
||||
alert("lon=" + lon + " lat=" + lat
|
||||
+ "slon=" + slon + " slat=" + slat);
|
||||
}
|
||||
|
||||
function add() {
|
||||
var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png',new OpenLayers.Size(10,17));
|
||||
marker = new OpenLayers.Marker(new OpenLayers.LonLat(180,90), icon);
|
||||
marker = new OpenLayers.Marker(new OpenLayers.LonLat(0,00), icon);
|
||||
markers.addMarker(marker);
|
||||
|
||||
}
|
||||
@@ -58,7 +71,7 @@
|
||||
<h1>OpenLayers Example</h1>
|
||||
<div id="map"></div>
|
||||
<div style="background-color:purple" onclick="add()"> click to add popup to map</div>
|
||||
<div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div>
|
||||
<div style="background-color:blue" onclick="changer()"> click to get lon/lat for pixel point(0,0)</div>
|
||||
<div style="background-color:red" onclick="destroy()"> click to destroy the popup</div>
|
||||
<div style="background-color:green" onclick="remove()"> click to remove the popup from map</div>
|
||||
</body>
|
||||
|
||||
@@ -19,7 +19,7 @@ OpenLayers.Control.MouseDefaults.prototype =
|
||||
* @param {Event} evt
|
||||
*/
|
||||
defaultDblClick: function (evt) {
|
||||
var newCenter = this.map.getLonLatFromPixel( evt.xy );
|
||||
var newCenter = this.map.getLonLatFromScreenPx( evt.xy );
|
||||
this.map.setCenter(newCenter, this.map.zoom + 1);
|
||||
},
|
||||
|
||||
@@ -68,7 +68,7 @@ OpenLayers.Control.MouseDefaults.prototype =
|
||||
var size = this.map.getSize();
|
||||
var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX,
|
||||
size.h / 2 + deltaY);
|
||||
var newCenter = this.map.getLonLatFromPixel( newXY );
|
||||
var newCenter = this.map.getLonLatFromScreenPx( newXY );
|
||||
this.map.setCenter(newCenter);
|
||||
this.mouseDragStart = evt.xy.copyOf();
|
||||
}
|
||||
@@ -80,8 +80,8 @@ OpenLayers.Control.MouseDefaults.prototype =
|
||||
*/
|
||||
defaultMouseUp: function (evt) {
|
||||
if (this.zoomBox) {
|
||||
var start = this.map.getLonLatFromPixel( this.mouseDragStart );
|
||||
var end = this.map.getLonLatFromPixel( evt.xy );
|
||||
var start = this.map.getLonLatFromScreenPx( this.mouseDragStart );
|
||||
var end = this.map.getLonLatFromScreenPx( evt.xy );
|
||||
var top = Math.max(start.lat, end.lat);
|
||||
var bottom = Math.min(start.lat, end.lat);
|
||||
var left = Math.min(start.lon, end.lon);
|
||||
|
||||
@@ -58,7 +58,7 @@ OpenLayers.Layer.Markers.prototype =
|
||||
* @param {OpenLayers.Marker} marker
|
||||
*/
|
||||
drawMarker: function(marker) {
|
||||
var px = this.map.getPixelFromLonLat(marker.lonlat);
|
||||
var px = this.map.getLayerPxFromLonLat(marker.lonlat);
|
||||
var markerImg = marker.draw(px);
|
||||
if (!marker.drawn) {
|
||||
this.div.appendChild(markerImg);
|
||||
|
||||
@@ -171,7 +171,7 @@ OpenLayers.Map.prototype = {
|
||||
*/
|
||||
addPopup: function(popup) {
|
||||
this.popups.push(popup);
|
||||
var px = this.getPixelFromLonLat(popup.lonlat)
|
||||
var px = this.getLayerPxFromLonLat(popup.lonlat)
|
||||
var popupDiv = popup.draw(px);
|
||||
if (popupDiv) {
|
||||
popupDiv.style.zIndex = this.Z_INDEX_BASE['Popup'] +
|
||||
@@ -274,22 +274,81 @@ OpenLayers.Map.prototype = {
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {OpenLayers.Pixel} point
|
||||
* @param {OpenLayers.Pixel} layerPx
|
||||
*
|
||||
* @returns px translated into screen pixel coordinates
|
||||
* @type OpenLayers.Pixel
|
||||
*/
|
||||
getScreenPxFromLayerPx:function(layerPx) {
|
||||
var screenPx = layerPx.copyOf();
|
||||
|
||||
screenPx.x += parseInt(this.layerContainerDiv.style.left);
|
||||
screenPx.y += parseInt(this.layerContainerDiv.style.top);
|
||||
|
||||
return screenPx;
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {OpenLayers.Pixel} screenPx
|
||||
*
|
||||
* @returns px translated into screen pixel coordinates
|
||||
* @type OpenLayers.Pixel
|
||||
*/
|
||||
getLayerPxFromScreenPx:function(screenPx) {
|
||||
var layerPx = screenPx.copyOf();
|
||||
|
||||
layerPx.x -= parseInt(this.layerContainerDiv.style.left);
|
||||
layerPx.y -= parseInt(this.layerContainerDiv.style.top);
|
||||
|
||||
return layerPx;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @param {OpenLayers.Pixel} px
|
||||
*
|
||||
* @return {OpenLayers.LonLat}
|
||||
*/
|
||||
getLonLatFromPixel: function (point) {
|
||||
getLonLatFromLayerPx: function (px) {
|
||||
//adjust for displacement of layerContainerDiv
|
||||
px = this.getScreenPxFromLayerPx(px);
|
||||
return this.getLonLatFromScreenPx(px);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {OpenLayers.Pixel} screenPx
|
||||
*
|
||||
* @returns An OpenLayers.LonLat which is the passed-in screen
|
||||
* OpenLayers.Pixel, translated into lon/lat given the
|
||||
* current extent and resolution
|
||||
* @type OpenLayers.LonLat
|
||||
*/
|
||||
getLonLatFromScreenPx: function (screenPx) {
|
||||
var center = this.getCenter(); //map center lon/lat
|
||||
var res = this.getResolution();
|
||||
var size = this.getSize();
|
||||
|
||||
var delta_x = point.x - (size.w / 2);
|
||||
var delta_y = point.y - (size.h / 2);
|
||||
var delta_x = screenPx.x - (size.w / 2);
|
||||
var delta_y = screenPx.y - (size.h / 2);
|
||||
|
||||
return new OpenLayers.LonLat(center.lon + delta_x * res ,
|
||||
center.lat - delta_y * res);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {OpenLayers.LonLat} lonlat
|
||||
*
|
||||
* @returns An OpenLayers.Pixel which is the passed-in OpenLayers.LonLat,
|
||||
* translated into layer pixels given the current extent
|
||||
* and resolution
|
||||
* @type OpenLayers.Pixel
|
||||
*/
|
||||
getLayerPxFromLonLat: function (lonlat) {
|
||||
//adjust for displacement of layerContainerDiv
|
||||
var px = this.getScreenPxFromLonLat(lonlat);
|
||||
return this.getLayerPxFromScreenPx(px);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {OpenLayers.LonLat} lonlat
|
||||
*
|
||||
@@ -298,7 +357,7 @@ OpenLayers.Map.prototype = {
|
||||
* and resolution
|
||||
* @type OpenLayers.Pixel
|
||||
*/
|
||||
getPixelFromLonLat: function (lonlat) {
|
||||
getScreenPxFromLonLat: function (lonlat) {
|
||||
var resolution = this.getResolution();
|
||||
var extent = this.getExtent();
|
||||
return new OpenLayers.Pixel(
|
||||
@@ -336,7 +395,7 @@ OpenLayers.Map.prototype = {
|
||||
//redraw popups
|
||||
for (var i = 0; i < this.popups.length; i++) {
|
||||
var popup = this.popups[i];
|
||||
var px = this.getPixelFromLonLat(popup.lonlat);
|
||||
var px = this.getLayerPxFromLonLat(popup.lonlat);
|
||||
popup.moveTo(px);
|
||||
}
|
||||
|
||||
|
||||
@@ -125,11 +125,11 @@
|
||||
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
|
||||
|
||||
var pixel = new OpenLayers.Pixel(50,150);
|
||||
var lonlat = map.getLonLatFromPixel(pixel);
|
||||
t.ok( lonlat instanceof OpenLayers.LonLat, "getLonLatFromPixel returns valid OpenLayers.LonLat" );
|
||||
var lonlat = map.getLonLatFromScreenPx(pixel);
|
||||
t.ok( lonlat instanceof OpenLayers.LonLat, "getLonLatFromScreenPx returns valid OpenLayers.LonLat" );
|
||||
|
||||
var newPixel = map.getPixelFromLonLat(lonlat);
|
||||
t.ok( newPixel instanceof OpenLayers.Pixel, "getPixelFromLonLat returns valid OpenLayers.Pixel" );
|
||||
var newPixel = map.getScreenPxFromLonLat(lonlat);
|
||||
t.ok( newPixel instanceof OpenLayers.Pixel, "getScreenPxFromLonLat returns valid OpenLayers.Pixel" );
|
||||
|
||||
// WARNING!!! I'm faily sure that the following test's validity
|
||||
// depends highly on rounding and the resolution. For now,
|
||||
|
||||
Reference in New Issue
Block a user