1

jdk-8u45 に含まれるJavaFX を使用WebViewして、OpenLayers 2.13.1 を使用してマップを表示する Web ページを開きます。を使用して地図を拡大しようとしてZoomBoxいBoxHandlerます。ズームは正常に機能しますが、問題は長方形の描画方法です。

必要な結果は、マップをクリックしてドラッグを開始すると、マウスを動かすと長方形が描画を開始することです。これは、my 内を除いて、すべてのブラウザーで正常に機能しますWebView。何が起こるかというと、マウスを x 方向と y 方向の両方 (たとえば対角線) に数 cm 移動した後でのみ、長方形がこの位置から描画を開始します (ドラッグを開始した位置ではありません)。さまざまなマウス イベントの座標を調べましたが、それらはすべて正しいように見えます。これは、実際にドラッグした領域 (たとえば、描画された領域ではない) にズームインするという事実によって確認されます。

JavaScript console.logstmts は、マップをクリックした瞬間から座標を出力しますが、ドラッグの最初は何も描画されません。

誰かに同様の問題がありましたWebViewか？私が言ったように、コードは私が試した他のすべてのブラウザー (Safari、Firefox、Chrome、IE) で魅力的に機能します。私はインターネットを見回しましたが、私の問題に対する答えを見つけることができませんでした.

から取得したコードBoxHandler.js:

startBox: function (xy) {
    ;;;console.log(xy);
    ;;;console.log("startbox xy=" + xy.x + "," + xy.y);
    if(this.zoomBox){
        this.removeBox();
    }

    this.zoomBox = OpenLayers.Util.createDiv('zoomBox',
                                             this.dragHandler.start);
    this.zoomBox.className = this.boxDivClassName;
    this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
    this.map.viewPortDiv.appendChild(this.zoomBox);

    OpenLayers.Element.addClass(
        this.map.viewPortDiv, "olDrawBox"
    );
},

/**
* Method: moveBox
*/
moveBox: function (xy) {

    var startX = this.dragHandler.start.x;
    var startY = this.dragHandler.start.y;

    ;;;console.log("dragHandler.start.x=" + this.dragHandler.start.x);
    ;;;console.log("dragHandler.start.y=" + this.dragHandler.start.y);

    var deltaX = Math.abs(startX - xy.x);
    var deltaY = Math.abs(startY - xy.y);
    this.zoomBox.style.width = Math.max(1, deltaX) + "px";
    this.zoomBox.style.height = Math.max(1, deltaY) + "px";
    this.zoomBox.style.left = xy.x < startX ? xy.x+"px" : startX+"px";
    this.zoomBox.style.top = xy.y < startY ? xy.y+"px" : startY+"px";

    console.log("zoombox width=" + this.zoomBox.style.width);
    console.log("zoombox height=" + this.zoomBox.style.height);
    console.log("zoombox left=" + this.zoomBox.style.left);
    console.log("zoombox top=" + this.zoomBox.style.top);

    // depending on the box model, modify width and height to take borders
    // of the box into account
    var box = this.getBoxCharacteristics();
    ;;;console.log("movebox xOffset=" + box.xOffset);
    ;;;console.log("movebox yOffset=" + box.yOffset);
    if (box.newBoxModel) {
        if (xy.x > startX) {
            this.zoomBox.style.width =
                Math.max(1, deltaX - box.xOffset) + "px";
        }
        if (xy.y > startY) {
            this.zoomBox.style.height =
                Math.max(1, deltaY - box.yOffset) + "px";
        }
    }
},

/**
* Method: endBox
*/
endBox: function(end) {
    var result;
    console.log(this.map.viewPortDiv.lastElementChild.style);
    if (Math.abs(this.dragHandler.start.x - end.x) > 5 ||
        Math.abs(this.dragHandler.start.y - end.y) > 5) {
        var start = this.dragHandler.start;
        var top = Math.min(start.y, end.y);
        var bottom = Math.max(start.y, end.y);
        var left = Math.min(start.x, end.x);
        var right = Math.max(start.x, end.x);
        result = new OpenLayers.Bounds(left, bottom, right, top);
    } else {
        result = this.dragHandler.start.clone(); // i.e. OL.Pixel
    }
    this.removeBox();

    this.callback("done", [result]);
}

また、これが関連しているかどうかはわかりませんが、div(Firebug Lite を使用して) マップを保持する HTML 要素を調べると、上の境界線が本来よりも下にあるように見えdivます。マップ (Web ページの正しい位置) が上部の境界線を超えています。これは、私が言及した他のブラウザーとは異なる動作です。

どんな助けでも大歓迎です。

4

0 に答える 0