<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>图层控制器测试</title> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/soria/soria.css" /> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" /> <link rel="stylesheet" href="js/webgis2book/widgets/themes/darkangel/darkangel.css" /> <link rel="stylesheet" href="js/webgis2book/widgets/themes/darkangel/override.css" /> <style> html, body, #mapDiv { padding: 0; margin: 0; width: 100%; height: 100%; } </style> <script> var dojoConfig = { locale: 'en', isDebug: true, async: true, packages: [{ "name": "webgis2book", "location": location.pathname.replace(//[^/]+$/, "") + "/js/webgis2book" }] }; </script> <script src="http://js.arcgis.com/3.9/"></script> <script> var map; var toc = null; require(["dojo/parser", "dojo/_base/window", "dojo/dom-style", "dojo/topic", "dijit/registry", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "webgis2book/widgets/TocWidget", "webgis2book/widgets/Menu", "webgis2book/widgets/MenuItem", "webgis2book/widgets/WidgetContainer", "webgis2book/widgets/MenuFrame", "dojo/domReady!"], function (parser, win, domStyle, topic, registry, Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, TocWidget, Menu) { parser.parse(); map = new Map("mapDiv"); var streetMap = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer", { id: "街道地图" }); map.addLayer(streetMap); var imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer", { id: "影像", opacity: 0, visible: true }); map.addLayer(imageryPrime); imageryPrime.setOpacity(1.0); var censusData = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", { id: "美国人口普查", visible: true }); censusData.setOpacity(0.75); map.addLayer(censusData); var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer", { id: '路易斯维尔地籍' }); layer.setOpacity(0.5); map.addLayer(layer); createWidget(); createMenu(); function createWidget() { toc = new TocWidget(); toc.setTitle("图层控制器"); toc.setMap(map); } function createMenu() { var menuFrame = registry.byId('menuFrame'); var logoUrl = require.toUrl("webgis2book/widgets/assets/images/logo.png"); menuFrame.setFrameIcon(logoUrl); menuFrame.setTitle("菜单"); var params = { label: "工具", icon: "assets/images/icons/i_globe.png", positionAsPct: 20, visible: true }; var toolMenu = new Menu(params); toolMenu.addMenuItem({ label: "图层控制器", icon: "assets/images/icons/i_highway.png", visible: true, onMenuItemClick: testMenuItemClick }); menuFrame.addChild(toolMenu); toolMenu.startup(); } function testMenuItemClick(evt) { topic.publish("showWidget", toc); } }); </script> </head> <body class="soria"> <div id="mapDiv"> <div data-dojo-type="webgis2book/widgets/MenuFrame" id='menuFrame' style="left: 50px;"></div> <div data-dojo-type="webgis2book/widgets/WidgetContainer" id='widgetContainer'></div> </div> </body> </html>