ArcGIS For JavaScript API Overview Map(鷹眼/概覽圖) ————（二十五）_

ArcGIS For JavaScript API Overview Map(鷹眼/概覽圖) ————（二十五）__ArcGIS

最後更新：2018-07-27 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

查看原文：ArcGIS For JavaScript API Overview Map —— 鷹眼/概覽圖

描述：

此樣本顯示了如何添加一個的地形底圖層到您的應用程式和使用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

線上示範：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_overviewmap/index.html

引用參考：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_overviewmap

代碼如下：

<!DOCTYPE html><html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta http-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-->    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">    <title>Overview Map</title>    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">    <link rel="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>    <script src="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,// 初始化可見，預設為falseattachTo: "bottom-right",// 預設右上方width: 150,// 預設值是地圖高度的 1/4thheight: 150, // 預設值是地圖高度的 1/4th opacity: .40, // 透明度預設0.5maximizeButton: true,// 最大化,最小化按鈕，預設falseexpandFactor: 3,//概覽地圖和總覽圖上顯示的程度矩形的大小之間的比例。預設值是2，這意味著概覽地圖將至少是兩倍的大小的程度矩形。color: "red"// 預設顏色為#000000          });          overviewMapDijit.startup();// 開啟        });      }      dojo.ready(init);    </script>  </head>    <body class="claro">    <div data-dojo-type="dijit.layout.BorderContainer"          data-dojo-props="design:'headline', gutters:false"          style="width: 100%; height: 100%; margin:0;">      <div id="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();

參考聯結：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_overviewmapexternal

線上示範：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_overviewmapexternal/index.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More