WebGis鹰眼图

WebGis鹰眼图&全屏显示

鹰眼图是GIS中一个基本的功能，鹰眼图，顾名思义，在鹰眼图上可以像从空中俯视一样查看地图框中所显示的地图在整个图中的位置。

直接贴代码了，关于代码都有注解。

引入相关css样式

<style>
    html,
    body,
    #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
    #overviewDiv {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 600px;
        height: 400px;
        border: 1px solid red;
        z-index: 1;
        overflow: hidden;
    }

    #extentDiv {
        background-color: rgba(0, 255, 0, 0.5);
        position: absolute;
        z-index: 2;
    }
</style>

外部样式表及脚本引用

<link rel="stylesheet" type="text/css" href="css/BwgisPlat3d.css">
<link rel="stylesheet" href="http://localhost:8022/arcgis_js_api/library/4.10/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://localhost:8022/arcgis_js_api/library/4.10/esri/css/main.css" />
<script src="http://localhost:8022/arcgis_js_api/library/4.10/dojo/dojo.js"></script>

注意：这里的引用路径是本地的服务器路径

Body内容

<div id="viewDiv">
    <span id="info" style="position:absolute;right:25px;bottom:5px;color:#000;"></span>
</div>
<div id="overviewDiv">
    <div id="extentDiv"></div>
</div>

实现鹰眼图和全屏显示的JS

<script>
    require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/widgets/Fullscreen",
        "esri/views/MapView",
        "esri/geometry/Point",
        "esri/widgets/Expand",
        "esri/core/watchUtils",
        "esri/core/watchUtils"
    ], function(Map, SceneView,Fullscreen,MapView,Point,Expand,watchUtils) {
        // 声明地图视图
        var map = new Map({
            basemap: "satellite",  //卫星地图
            ground: "world-elevation"  //高程显示
        });
        // 声明3D地图对象
        var view = new SceneView({
            container: "viewDiv",
            map: map,
            scale: 50000000,
            center: [116.23,38.33]
        });
        // 移除默认状态条
        view.ui._removeComponents(["attribution"]);
        //全屏显示
        view.ui.add(new Fullscreen({
            view: view,
            element:viewDiv
        }), "bottom-right");

        //加入鹰眼
        var overviewDiv = new Map({
            basemap: "osm"
        });
        // 声明2D地图
        var mapView = new MapView({
            container: "overviewDiv",
            map: overviewDiv,
            constraints: {
                rotationEnabled: false
            }
        });
        mapView.ui.components = [];     //将平面地图的状态条置空
        var extentDiv = document.getElementById("extentDiv");
        mapView.when(function () {
            view.watch("extent", updateOverViewExtent);  //三维地球视图范围改变，执行updateOverViewExtent方法
            mapView.watch("extent", updateOverViewExtent);  //

            watchUtils.when(view, "stationary", updateOverView);  //三维视图静止之后执行updateOverView方法
            watchUtils.when(mapView, "stationary", updateOverView);  //平面视图静止之后执行updateOverView方法

            /**
             * 修改鹰眼图的位置内容
             */
            function updateOverView() {
                //将视图设置为给定的目标。
                mapView.goTo({
                    center: view.center,  //表示视图的中心点
                    scale: view.scale * 2 * Math.max(view.width / mapView.width, view.height / mapView.height)  //表示视图中心的地图比例尺
                });
            }

            /**
             * 修改视图范围
             */
            function updateOverViewExtent() {
                var extent = view.extent;  //范围表示视图内地图的可见部分
                if (extent != undefined) {
                    var bottomLeft = mapView.toScreen(  //将给定的地图点转换为屏幕点
                        new Point({
                            x: extent.xmin,  //The top-left X-coordinate of an extent envelope.
                            y: extent.ymin,  //The bottom-left Y-coordinate of an extent envelope.
                            spatialReference: extent.spatialReference
                        })
                    );
                    var topRight = mapView.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";
                }
            }


            var bgExpand = new Expand({
                view: view,  //对MapView或SceneView的引用。
                content: document.getElementById("overviewDiv")  //要在展开的“扩展”小部件中显示的内容
            });

            view.ui.add(bgExpand, "top-right");
        });
    });
</script>

鹰眼图效果

这里底图是esri影像图，鹰眼图是OSM图，注意引入相关的css，js。可以自行修改为想要的效果，代码思路应该都是类似的。