Question

我正在使用jdk-8u45中包含的JavaFX WebView来打开一个使用OpenLayers 2.13.1显示地图的网页。我尝试使用ZoomBox BoxHandler来放大地图。缩放的工作方式应该如此，但问题在于如何绘制矩形。

想要的结果是，一旦我点击地图并开始拖动，矩形应该在我移动鼠标时开始绘制。这适用于所有浏览器，但WebView内部除外。发生的事情是，只有在我的鼠标在x和y方向上移动了几厘米（例如对角线）之后，矩形才开始从这个位置（不是我开始拖动的位置）绘制。我查看了不同鼠标事件的坐标，它们似乎都是正确的，这可以通过它放大我实际拖过的区域（例如不是绘制的区域）这一事实得到证实。

JavaScript console.log从我点击地图的那一刻起stmts输出坐标，但在拖动开始时没有绘制任何内容。

有没有人与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]);
}

另外，我不知道这是否相关，但当我检查包含地图的HTML div元素时（使用Firebug Lite），它看起来像{{1}的顶部边框比它应该进一步下降。地图（在网页上的正确位置）延伸到顶部边框之外。这与我提到的其他浏览器的行为不同。

任何帮助都将不胜感激。

在JavaFX WebView中使用OpenLayers ZoomBox

0 个答案: