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。可以自行修改爲想要的效果，代碼思路應該都是類似的。