ArcGIS For JavaScript API Bookmark Widget(书签组件)————(二十一)
2013-01-14 13:41
267 查看
描述:
默认情况下,书签小工具提供了的列表只读书签。此示例显示的书签组件内的dijit.form.DropDownButton
引用API:http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/#bookmarks
在线演示:http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_bookmarks_dropdownbutton/index.html
如图:
默认情况下,书签小工具提供了的列表只读书签。此示例显示的书签组件内的dijit.form.DropDownButton
引用API:http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/#bookmarks
在线演示:http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_bookmarks_dropdownbutton/index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Bookmark Widget</title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/nihilo/nihilo.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; } body{ background-color: #fff; overflow:hidden; font-family: sans-serif; } #header { padding-top: 4px; padding-left: 15px; background-color:#444; color:#fff; font-size:16pt; text-align: left; font-weight:bold; height:55px; } #subheader { font-size:small; color: #cfcfcf; text-align:left; } #bookmarks-wrapper { position: absolute; z-index: 40; top: 15px; right: 30px; background: transparent; font-size: 12pt; color: #444; } .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; } #ds-h div { width: 100%; } #ds-l div { height: 100%; } #ds .o1 { filter: alpha(opacity=10); opacity: .1; } #ds .o2 { filter: alpha(opacity=8); opacity: .08; } #ds .o3 { filter: alpha(opacity=6); opacity: .06; } #ds .o4 { filter: alpha(opacity=4); opacity: .04; } #ds .o5 { filter: alpha(opacity=2); opacity: .02; } #ds .h1 { height: 1px; } #ds .h2 { height: 2px; } #ds .h3 { height: 3px; } #ds .h4 { height: 4px; } #ds .h5 { height: 5px; } </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("dijit.form.DropDownButton"); dojo.require("esri.map"); dojo.require("esri.dijit.Bookmarks"); var map, bookmarks; function init() { map = new esri.Map("map", { basemap: "topo", center: [-100, 40], zoom: 4 }); // 书签可以被指定为一个数组对象结构: // { extent: <esri.geometry.Extent>, name: <some string> } var bookmarks_list = [{ "extent": { // 范围 "spatialReference": { // 空间参考 "wkid": 102100 }, "xmin":-14201669, // 左下角X "ymin":4642975, // 左下角Y "xmax":-13021482, // 右上角X "ymax":5278931 // 右上角Y }, "name": "Northern California(北加州)" }, { "extent": { "spatialReference": { "wkid":102100 }, "xmin":-8669334, "ymin":4982379, "xmax":-8664724, "ymax":4984864 }, "name": "Central Pennsylvania(宾夕法尼亚州中部)" }]; // 创建书签组件 bookmarks = new esri.dijit.Bookmarks({ map: map, editable: true, // 可允许编辑。默认false则只读模式 bookmarks: bookmarks_list // Array / JSON }, dojo.byId('bookmarks')); // 绑定移除标签事件 dojo.connect(bookmarks,"onRemove",function(){ alert('删除成功,32版本尚未找到二次确认删除标签,如有方案,请留言,多谢'); }); } // 加载时显示 dojo.ready(init); </script> </head> <body class="nihilo"> <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Bookmark Widget Sample <div id="subheader">书签</div> <!-- 书签在一个下拉框的里面 --> <div id="bookmarks-wrapper"> <div data-dojo-type="dijit.form.DropDownButton"> <span>Bookmarks(书签)</span> <div data-dojo-type="dijit.TooltipDialog"> <div id="bookmarks"></div> </div> </div> </div> </div> <div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> <div id="ds"> <!-- 阴影div --> <div id="ds-h"> <div class="ds h1 o1"></div> <div class="ds h2 o2"></div> <div class="ds h3 o3"></div> <div class="ds h4 o4"></div> <div class="ds h5 o5"></div> </div> </div> <!-- end drop shadow divs --> </div> </div> </body> </html>
如图:
![](http://img.my.csdn.net/uploads/201301/14/1358142321_8804.png)
相关文章推荐
- ArcGIS For JavaScript API Bookmark Widget(书签组件)————(二十一)
- ArcGIS For JavaScript API Measurement Widget(测量工具)————(二十四)
- ArcGIS API for JavaScript开发初探——基本地图组件使用
- ArcGis server api for flex widget的 理解--自定义组件。
- ArcGIS API for JavaScript 4.2学习笔记[10] 2D添加指北针widget、视图保存、视图padding(第二章完结)
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
- ArcGIS.Server.9.3和ArcGIS API for JavaScript实现距离量算和面积量算(九)
- ArcGIS API for JavaScript 4.2学习笔记[6] goTo()地图动画
- ArcGIS API for JavaScript开发笔记(一)——ArcGIS for Javascript API 3.14本地部署
- ArcGIS API for JavaScript 学习之 identifyTask
- ArcGIS API for JavaScript 4.2学习笔记[13] Layer的弹窗(PopupTemplate)
- arcgis api for javascript 距离与面积量算
- ArcGIS Server API for JavaScript调用错误:已阻止跨源请求:同源策略禁止读取位于......
- 一个将Google Maps API与ArcGIS JavaScript API for GMaps结合的例子
- ArcGIS API for JavaScript 需要在DoJo中加载的资源
- ArcGis for javascript api 在eclipse中搭建运行环境
- ArcGIS API For Javascript GP工具 Printing Tools导出地图或者打印地图(二):GP 服务Printing Tools
- Arcgis API for Javascript 3.5最新版离线本地部署方法-中文
- ArcGIS API for JavaScript开发教程系列(一)之创建地图
- ArcGIS API for JavaScript 4.5版和3.22版发布了