arcgis api for js 4.* 鹰眼图

鹰眼图和分屏差不多，再加一个小的div就可

1、设置鹰眼图不能平移和缩放

    view.when(disableZooming);
    function disableZooming(view) {
        function stopEvtPropagation(event) {
          event.stopPropagation();
        }
        //拖拽平移
        view.on("drag",stopEvtPropagation)
        //滚轮缩放
        view.on("mouse-wheel",stopEvtPropagation)
        //双击放大
        view.on("double-click",stopEvtPropagation)
        //Crtl+双击缩小
        view.on("double-click",["Control"],stopEvtPropagation);
        //Shift+拖拽放大
        view.on("drag", ["Shift"], stopEvtPropagation);
        //Shift+Ctrl+拖拽缩小
        view.on("drag", ["Shift", "Control"], stopEvtPropagation);
        //键盘+-缩放
        view.on("key-down",function(event){
            var keyPressed=event.key;
            var prohibitedKeys=["+","-","Shift","_","+"];
            if(prohibitedKeys.indexOf(keyPressed)!==-1){
                    event.stopPropagation()
            }
            })
        //上下左右键盘平移
        view.on("key-down",function(event){
            var keyPressed=event.key;
            if(keyPressed.slice(0,5)==="Arrow"){
                event.stopPropagation()
            }
        })

    }

2、设置小矩形查看主map的显示情况
3、移动小矩形来显示主map
因为关闭了view的drag，所以我用的pointer-down、pointer-move和pointer-up来实现。点用toMap转换成坐标点initPoint=overview.toMap({x:event.x,y:event.y})
用initPolygon.contains(initPoint)来判断点是否在矩形中
用initExtentOver.contains(updatePolygon)控制矩形不跑出鹰眼图

         overview.on("pointer-down",function(event){
                var initExtentOver=getInitExtentOver();
                var initPoint=overview.toMap({x:event.x,y:event.y})
                var initPolygon=extentGraphic.geometry;
                if (initPolygon && initPolygon.contains(initPoint)) {
                    var xmin=extentGraphic.geometry.xmin;
                    var xmax=extentGraphic.geometry.xmax;
                    var ymax=extentGraphic.geometry.ymax;
                    var ymin=extentGraphic.geometry.ymin;
                    var spatialReference=extentGraphic.geometry.spatialReference
                    graphicMove=overview.on("pointer-move",function(event){
                        var updatePoint=overview.toMap({x:event.x,y:event.y})
                        var disX=updatePoint.x-initPoint.x;
                        var disY=updatePoint.y-initPoint.y;
                        var updatePolygon=new Extent({
                            xmin:xmin+disX,
                            xmax:xmax+disX,
                            ymax:ymax+disY,
                            ymin:ymin+disY,
                            spatialReference:spatialReference
                        });
                        //设置矩形不跑出鹰眼图
                        if(!initExtentOver.contains(updatePolygon)){
                            var height=updatePolygon.height;
                            var width=updatePolygon.width;
                            if(updatePolygon.xmin<initExtentOver.xmin){
                                updatePolygon.xmin=initExtentOver.xmin;
                                updatePolygon.xmax=initExtentOver.xmin+width;
                            };
                            if(updatePolygon.xmax>initExtentOver.xmax){
                                updatePolygon.xmax=initExtentOver.xmax;
                                updatePolygon.xmin=initExtentOver.xmax-width;
                            };
                            if(updatePolygon.ymin<initExtentOver.ymin){
                                updatePolygon.ymin=initExtentOver.ymin;
                                updatePolygon.ymax=initExtentOver.ymin+height;
                            };
                            if(updatePolygon.ymax>initExtentOver.ymax){
                                updatePolygon.ymax=initExtentOver.ymax;
                                updatePolygon.ymin=initExtentOver.ymax-height;
                            };
                        }
                        extentGraphic.geometry=updatePolygon;
                        mainView.extent=updatePolygon;
                    })
                }
                
            })
            overview.on("pointer-up",function(event){
                if(graphicMove){
                    graphicMove.remove();
                }else{
                    return;
                }
                
            })