ArcGIS For JavaScript API Overview Map(鹰眼/概览图) ————（二十五）

最新推荐文章于 2024-09-11 13:05:52 发布

X-rapido

最新推荐文章于 2024-09-11 13:05:52 发布

阅读量1w

点赞数

分类专栏： ArcGIS Api For Javascript 文章标签： ArcGIS ForJavaScript ArcGIS二次开发

本文链接：https://blog.csdn.net/xiaokui_wingfly/article/details/8508026

版权

ArcGIS Api For Javascript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

查看原文：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,	// 初始化可见，默认为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>
  
  <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>

效果图如下：