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

最新推荐文章于 2021-08-27 18:10:06 发布

小透明-溶冰

最新推荐文章于 2021-08-27 18:10:06 发布

阅读量1.4k

点赞数

分类专栏： arcgis api for javascript

arcgis api for javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

转载自：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

在线演示：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

代码如下：

[html]view plaincopy 
   
 <!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>  

效果图如下：

如果需要将鹰眼地图放在地图外面可以使用布局，然后使用以下方法即可

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

小透明-溶冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ArcGIS For JavaScript API Overview Map(鹰眼/概览图) ————（二十五）

转载自：http://blog.csdn.net/xiaokui_wingfly/article/details/8508026描述：此示例显示了如何添加一个的地形底图层到您的应用程序和使用OverviewMap的dijit显示的主要地图右上角的总览图。总览图的dijit最初发表在ESRI的代码库作为样本，并添加到ArcGISJavaScript API的2.0
复制链接

扫一扫

专栏目录