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";
}

   当主视图已经更新完毕，静止不动的时候(如拖动地图后松开后，鼠标滚轮缩放地图后)，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