ArcGIS 4.11学习笔记之鹰眼图

鹰眼图是地图常见的部件。ArcGIS官方也给出了鹰眼图的实现示例:官方鹰眼图示例。实现更改主视图的范围(拖动,缩放),小视图也会按比例更新视图。但是相对于百度，高德等地图应用的鹰眼图，少了随鹰眼视图拖动而更新主视图的功能。下面是在参考官方例子的基础上，经过查询资料，实现的一个鹰眼图示例。

效果图

​

​

实现步骤

有两部分，一部分是主视图操作时(拖动，缩放等)的事件处理。另一部分是鹰眼视图的视图div拖动时的事件处理

主视图操作时

监听主视图和鹰眼视图的exent属性。当extent属性变化时，保持鹰眼视图里视图div的位置同步更新

// Update the overview extent by converting the SceneView extent to the 
// overMapView screen coordinates and updating the extentDiv position.
function updateOverviewExtent() {
    var extent = mainView.extent;
    var bottomLeft = overMapView.toScreen(
        new Point({
            x: extent.xmin,
            y: extent.ymin,
            spatialReference: extent.spatialReference
        })
    );
    var topRight = overMapView.toScreen(
        new Point({
            x: extent.xmax,
            y: extent.ymax,
            spatialReference: extent.spatialReference
        })
    );
    extentDiv.style.top = topRight.y + "px";
    extentDiv.style.left = bottomLeft.x + "px";
    extentDiv.style.height = bottomLeft.y - topRight.y + "px";
    extentDiv.style.width = topRight.x - bottomLeft.x + "px";
}

image.gif

当主视图已经更新完毕，静止不动的时候(如拖动地图后松开后，鼠标滚轮缩放地图后)，view的stationary属性值为true。监听该属性值，当其为true时，鹰眼视图使用goTo函数更新定位

function updateOverview() {
    // Animate the MapView to a zoomed-out scale so we get a nice overview.
    // We use the "progress" callback of the goTo promise to update
    // the overview extent while animating
    overMapView.goTo({
        center: mainView.center,
        scale: mainView.scale * 6 *
            Math.max(mainView.width / overMapView.width, mainView.height / overMapView.height)
    });
};

**视图div拖动**

var extentDiv = document.getElementById("extentDiv");
var dragFlag = false;
var $divWrap = $(extentDiv).parents("#overviewDiv"); //整个移动区域 
var abs_x, abs_y, leftX, topY;
$(extentDiv).on("mousedown", function(event) {
    $(this).css("cursor", "move");
    leftX = 0;
    topY = 0;
    dragFlag = true;
    console.log(event);
    abs_x = event.pageX - $(this).offset().left;
    abs_y = event.pageY - $(this).offset().top;
    console.log("abs_x:" + abs_x);
    console.log("abs_y:" + abs_y);
});
$divWrap.on("mousemove", function(e) {
    $(extentDiv).css("cursor", "move");
    if(dragFlag == true) {
        console.log(e);
        leftX = e.pageX - abs_x - $divWrap.offset().left;
        topY = e.pageY - abs_y - $divWrap.offset().top;
        console.log(leftX + "--" + topY);
        $(extentDiv).css("top", topY);
        $(extentDiv).css("left", leftX);
    }
});
$(extentDiv).on("mouseup", function(e) {
    var mapPoint = overMapView.toMap({
        x: leftX + $(this).width() / 2,
        y: topY + $(this).height() / 2
    });
    mainView.goTo({
        center: mapPoint
    });
    overMapView.goTo({
        center: mapPoint
    });
    $(this).css("cursor", "default");
    dragFlag = false;
});

demo地址:[https://download.csdn.net/download/lf5566fl/11673030](https://download.csdn.net/download/lf5566fl/11673030)