javascript - OpenLayersで2つのレイヤーを互いに独立して移動する方法は?

Question

OpenLayers で 2 つのレイヤー (1 つが半透明) を作成し、それらを個別に移動することは可能ですか? もしそうなら、どのように？
ユーザーが移動するレイヤーを選択できるようにするか、それが不可能な場合は、独自の JavaScript コードを介して 1 つのレイヤーを移動し、もう 1 つのレイヤーをユーザーが制御できるようにしたいと考えています。

それが重要な場合は、どちらもプリレンダリングされたピックスマップ レイヤーになります。

Answer 1

これが私が思いついた解決策です。きれいではありませんが、私の目的には適しています。

より良い代替案は大歓迎です...

/**
* @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"
});

これは OpenLayers 2.13 以降でのみ機能することに注意してください。