<!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>

arcgis图层控制的更多相关文章

  1. arcgis api for js入门开发系列七图层控制(含源代码)

    上一篇实现了demo的地图分屏对比模块,本篇新增图层控制模块,截图如下(源代码见文章底部): 图层控制模块实现的思路如下: 1.在地图配置文件map.config.js里面配置图层目录树节点信息,作为 ...

  2. arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现

    图层控制是非常多GIS系统里面必须的一个小功能,本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式.首先看图: 实现效果 ...

  3. arcgis api 3.x for js 入门开发系列七图层控制（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. openlayers4 入门开发系列之图层控制（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  5. openlayers自定义图层控制的实现

    好久没写博文了,今天出来冒个泡. 最近一直在考虑一件事情,那就是openlayers中自定义wms的图层控制.用过openlayers的人都知道,在openlayers中有自带的图层控制的控件,调用方 ...

  6. ArcGIS 图层旋转工具-arcgis案例实习教程

    ArcGIS 图层旋转工具-arcgis案例实习教程 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:对输入图层执行坐标旋转 使用方法:输入图层,旋转中心,旋转 ...

  7. PIE SDK地图图层控制

    1. 功能简介 地图图层控制就是图层的相关操作,如地图图层数据的添加.删除.移动和拖拽等功能. 2. 功能实现说明 2.1. 实现思路及原理说明 第一步 图层添加是调用AddLayer方法将图层添加到 ...

  8. OpenLayers 3 的 图层控制控件

    openlayers3的control中没有提供默认的图层控制控件. 但是git上已经有造好的轮子,直接拿来用就可以了.地址 https://github.com/walkermatt/ol3-lay ...

  9. ArcGIS图层介绍

    什么是图层 图层是用来在 ArcGIS 产品套件中显示地理数据集的机制.每个图层代表一种数据集(可以是地图服务.图形或是矢量数据),并指定该数据集是如何描绘使用一组属性的. 包含一个地图控件的每个应用 ...

随机推荐

  1. Linux常见问题解答--如何修复“tar：Exiting with failure status due to previous errors”

    问题: 当我用tar命令来创建一个压缩文件时,总在执行过程中失败,并且抛出一个错误说明"tar:由于前一个错误导致失败退出"("Exiting with failure ...

  2. springboot 2 集成 redis 缓存 序列化

    springboot 缓存 为了实现是在数据中查询数据还是在缓存中查询数据,在application.yml 中将mybatis 对应的mapper 包日志设置为debug . spring: dat ...

  3. vue:解决使用param传参后，再次刷新页面会新增一个原有的tab

    问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个bug,就是当我重新刷新该页面时,会新增一个tab 原来的: 刷新页面后: 查阅资料后,发现该现象是由于通过param ...

  4. Ajax 导出Excel 方式

    1.使用iframe 加载 使用get方式 <iframe id="comdownshow" height="0" width="0" ...

  5. 洛谷P3745 [六省联考2017]期末考试

    传送门 题解 //Achen #include<algorithm> #include<iostream> #include<cstring> #include&l ...

  6. Android实战技巧之四十一：制作自己的Android SDK

      标签: sdkandroid定制sdk 2015-09-21 18:05 11237人阅读 评论(2) 收藏 举报  分类: Android(260)  版权声明:本文为博主原创文章,未经博主允许 ...

  7. PAT甲级——A1057 Stack

    Stack is one of the most fundamental data structures, which is based on the principle of Last In Fir ...

  8. PAT甲级——A1037 Magic Coupon

    The magic shop in Mars is offering some magic coupons. Each coupon has an integer N printed on it, m ...

  9. js 获取复选框 和 并改变状态

    function checkAll() { var checkbox = document.getElementById('vegeids');// var boxes = document.getE ...

  10. mavenjar 一些拉取不下来问题

    http://search.maven.org/这里找相近版本替换试试.拉取不下来是因为官方版本不足或者网络问题.