Geek Answers Handbook

How to move two layers independently in OpenLayers?

Is it possible to create two layers (with translucent) in OpenLayers and move them yourself? If so, how?
I want the user to be able to choose which layer to move, or if this is not possible, move one layer through its own JavaScript code and the other through the user.

Both will be predefined pixmap layers, if that is important.

+4
source share
1 answer

This is the solution I came across. This is not very, but it works for my purposes.

Best alternatives are welcome ...

/** * @requires OpenLayers/Layer/TMS.js */ MyLayer = OpenLayers.Class(OpenLayers.Layer.TMS, { latShift: 0.0, latShiftPx: 0, setMap: function(map) { OpenLayers.Layer.TMS.prototype.setMap.apply(this, arguments); map.events.register("moveend", this, this.mapMoveEvent) }, // This is the function you will want to modify for your needs mapMoveEvent: function(event) { var resolution = this.map.getResolution(); var center = this.map.getCenter(); // This is some calculation I use, replace it whatever you like: var h = center.clone().transform(projmerc, proj4326); var elliptical = EllipticalMercator.fromLonLat(h.lon, h.lat); var myCenter = new OpenLayers.LonLat(elliptical.x, elliptical.y); this.latShift = myCenter.lat - center.lat; this.latShiftPx = Math.round(this.latShift/resolution); this.div.style.top = this.latShiftPx + "px"; }, moveTo: function(bounds, zoomChanged, dragging) { bounds = bounds.add(0, this.latShift); OpenLayers.Layer.TMS.prototype.moveTo.apply(this, [bounds, zoomChanged, dragging]); }, // mostly copied and pasted from Grid.js ... moveGriddedTiles: function() { var buffer = this.buffer + 1; while(true) { var tlTile = this.grid[0][0]; var tlViewPort = { x: tlTile.position.x + this.map.layerContainerOriginPx.x, y: tlTile.position.y + this.map.layerContainerOriginPx.y + this.latShiftPx // ... except this line }; var ratio = this.getServerResolution() / this.map.getResolution(); var tileSize = { w: Math.round(this.tileSize.w * ratio), h: Math.round(this.tileSize.h * ratio) }; if (tlViewPort.x > -tileSize.w * (buffer - 1)) { this.shiftColumn(true, tileSize); } else if (tlViewPort.x < -tileSize.w * buffer) { this.shiftColumn(false, tileSize); } else if (tlViewPort.y > -tileSize.h * (buffer - 1)) { this.shiftRow(true, tileSize); } else if (tlViewPort.y < -tileSize.h * buffer) { this.shiftRow(false, tileSize); } else { break; } } }, CLASS_NAME: "MyLayer" });

Please note that this only works with OpenLayers 2.13 or later.

+2
source

More articles:


All Articles