鷹眼圖是地圖常見的部件。ArcGIS官方也給出了鷹眼圖的實現(xiàn)示例:官方鷹眼圖示例。實現(xiàn)更改主視圖的范圍(拖動,縮放),小視圖也會按比例更新視圖。但是相對于百度，高德等地圖應(yīng)用的鷹眼圖燕雁，少了隨鷹眼視圖拖動而更新主視圖的功能。下面是在參考官方例子的基礎(chǔ)上鲸拥，經(jīng)過查詢資料拐格，實現(xiàn)的一個鷹眼圖示例。

效果圖

?

?

實現(xiàn)步驟

有兩部分刑赶，一部分是主視圖操作時(拖動捏浊，縮放等)的事件處理。另一部分是鷹眼視圖的視圖div拖動時的事件處理

主視圖操作時

監(jiān)聽主視圖和鷹眼視圖的exent屬性撞叨。當(dāng)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

當(dāng)主視圖已經(jīng)更新完畢浊洞，靜止不動的時候(如拖動地圖后松開后，鼠標(biāo)滾輪縮放地圖后)胡岔，view的stationary屬性值為true法希。監(jiān)聽該屬性值，當(dāng)其為true時靶瘸，鷹眼視圖使用goTo函數(shù)更新定位

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"); //整個移動區(qū)域 
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)