ArcGIS For JavaScript API Overview Map(鷹眼/概覽圖) ————（二十五）
阿新 • • 發佈：2019-01-10
轉載自：http://blog.csdn.net/xiaokui_wingfly/article/details/8508026
描述：
此示例顯示瞭如何新增一個的地形底圖層到您的應用程式和使用OverviewMap的dijit顯示的主要地圖右上角的總覽圖。總覽圖的dijit最初發表在ESRI的程式碼庫作為樣本，並新增到ArcGISJavaScript API的2.0版本。要新增到您的應用程式的概述地圖，下面的程式碼新增到地圖的onLoad事件：
var overviewMapDijit= new esri.dijit.OverviewMap({map:map});
overviewMapDijit.startup();上面的程式碼新增總覽圖中的預設位置（右上角）。您可以修改此使用attachTo引數。使用此引數，您可以指定總覽圖將附加到下列地點之一：bottom-right,bottom-left, top-right 或 top-left
程式碼如下：
- <!DOCTYPE html>
- <html>
- <head>
- <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
-
<metahttp-equiv="X-UA-Compatible"content="IE=7,IE=9">
- <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
- <metaname="viewport"content="initial-scale=1, maximum-scale=1,user-scalable=no">
- <title>Overview Map</title>
-
<linkrel="stylesheet"href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
- <linkrel="stylesheet"href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
- <style>
- html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
- </style>
- <script>
- var dojoConfig = {
- parseOnLoad: true
- };
- </script>
- <scriptsrc="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
- <script>
- // 匯入必要包
- dojo.require("dijit.layout.BorderContainer");
- dojo.require("dijit.layout.ContentPane");
- dojo.require("esri.map");
- dojo.require("esri.dijit.OverviewMap");
- var map;
- function init() {
- map = new esri.Map("map", {
- basemap: "topo", // 指定的地圖底圖.有效選項："streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm".
- center: [-122.445, 37.752], // 居中的經緯度
- zoom: 14 // 縮放深度級別
- });
- dojo.connect(map, "onLoad", function(theMap) {
- // 新增概覽地圖
- var overviewMapDijit = new esri.dijit.OverviewMap({
- map: map, // 必要的
- visible: true, // 初始化可見，預設為false
- attachTo: "bottom-right", // 預設右上角
- width: 150, // 預設值是地圖高度的 1/4th
- height: 150, // 預設值是地圖高度的 1/4th
- opacity: .40, // 透明度 預設0.5
- maximizeButton: true, // 最大化,最小化按鈕，預設false
- expandFactor: 3, //概覽地圖和總覽圖上顯示的程度矩形的大小之間的比例。預設值是2，這意味著概覽地圖將至少是兩倍的大小的程度矩形。
- color: "red" // 預設顏色為#000000
- });
- overviewMapDijit.startup(); // 開啟
- });
- }
- dojo.ready(init);
- </script>
- </head>
- <bodyclass="claro">
- <divdata-dojo-type="dijit.layout.BorderContainer"
- data-dojo-props="design:'headline', gutters:false"
- style="width: 100%; height: 100%; margin:0;">
- <divid="map"
- data-dojo-type="dijit.layout.ContentPane"
- data-dojo-props="region:'center'"
- style="padding:0">
- </div>
- </div>
- </body>
- </html>
效果圖如下：
如果需要將鷹眼地圖放在地圖外面可以使用佈局，然後使用以下方法即可
var overviewMapDijit = new esri.dijit.OverviewMap({map:map}, dojo.byId('overviewMapDiv');
overviewMapDijit.startup();