ArcGIS For JavaScript API Overview Map(鹰眼/概览图) ————(二十五)
来源:互联网 发布:mac升级进度条 编辑:程序博客网 时间:2024/05/20 10:52
描述:
此示例显示了如何添加一个的地形底图层到您的应用程序和使用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
- ArcGIS For JavaScript API Overview Map(鹰眼/概览图) ————(二十五)
- ArcGIS For JavaScript API Overview Map(鹰眼/概览图) ————(二十五)
- ArcGIS For JavaScript APi Map with scalebar(地图比例尺 内/外)————(二十三)
- ArcGIS API for JavaScript v3.9实现鹰眼图
- Android API Guide for Media Apps(一)——概览(Overview)
- ArcGIS For JavaScript API Switch Basemap(切换底图)————(二十)
- ArcGIS For JavaScript API Toggle multiple ArcGIS Online services(切换多个ArcGIS Online服务)————(十五)
- ArcGIS For JavaScript API 添加 topographic map(地形图)————(三)
- ArcGIS For JavaScript API Show map properties(显示地图信息)————(十二)
- 缓冲区分析—ArcGIS API for JavaScript
- ArcGIS For JavaScript API Bookmark Widget(书签组件)————(二十一)
- ArcGIS For JavaScript API Measurement Widget(测量工具)————(二十四)
- ArcGIS For JavaScript API Bookmark Widget(书签组件)————(二十一)
- ArcGIS For JavaScript API Feature layer hover(功能图层的悬浮)————(二十六)
- ArcGIS API for JavaScript——绘制工具(Draw)
- ArcGIS API For JavaScript——空间查询(QueryTask)
- ArcGIS API for JavaScript——要素服务(FeatureLayer)
- ArcGIS For JavaScript API Resizable Map(可调整大小的地图)————(十)
- VC 文件关联以及图标的实时更新
- Android学习备忘006——Manifest.xml
- 关于VS2010“转到定义”无响应的解决方法(intellisense)
- Three20 对特殊字符敏感
- 有关MAC、PHY和MII/RMII
- ArcGIS For JavaScript API Overview Map(鹰眼/概览图) ————(二十五)
- 第一周
- MapperScannerConfigurer
- java 接口的语法
- 带删除按钮的ListView
- Spring <context:annotation-config/> 解说
- Rotional Rose2003 下载、安装教程图解
- tomcat异常:Exception loading sessions from persistent storage
- 再导入Eclipse工程时遇到 Eclips import android project erro :Invalid project descript