<!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. Python学习day09 - Python进阶（3）

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  2. Django项目：CMDB(服务器硬件资产自动采集系统)--01--01CMDB获取服务器基本信息

    AutoClient #settings.py # ————————01CMDB获取服务器基本信息———————— import os BASEDIR = os.path.dirname(os.pat ...

  3. JavaSE_05_反射

    1.什么是反射? Java反射说的是在运行状态中,对于任何一个类,我们都能够知道这个类有哪些方法和属性.对于任何一个对象,我们都能够对它的方法和属性进行调用.我们把这种动态获取对象信息和调用对象方法的 ...

  4. 关于mysql8授权的问题，mysql萌新小白采坑记录

    记录本人第一次使用mysql时踩的坑,因为我从官网下载最新的版本8.0.15msi版本的,直接下一步下一步安装完成之后,本地访问正常,然后服务器安装访问也正常.然后本地连接服务器上的mysql时报错. ...

  5. V8：V8(Javascript引擎)

    ylbtech-V8:V8(Javascript引擎) Lars Bak是这个项目的组长,目前该JavaScript引擎已用于其它项目的开发.第一个版本随着第一个版本的Chrome于2008年9月2日 ...

  6. 玩转python爬虫之正则表达式

    玩转python爬虫之正则表达式 这篇文章主要介绍了python爬虫的正则表达式,正则表达式在Python爬虫是必不可少的神兵利器,本文整理了Python中的正则表达式的相关内容,感兴趣的小伙伴们可以 ...

  7. Maven实战04_使用Archetype生成项目骨架

    在上一章中的HelloWorld中,我们的项目遵循了一些Maven项目的约定 在项目的根目录中放置pom.xml 在src/main/java目录中放置项目的主代码 在src/test/java目录中 ...

  8. Navicat12激活，最新版本v12.1.18，原版激活[windows]

    1.navicat_premium原版安装包  :官网下载地址2.注册工具  :github地址 本次用到的软件我已经打包好  :    蓝奏云 我安装navicat的路径在:I:\Navicat P ...

  9. Python实现十大经典排序算法（史上最简单）

    十大排序算法(Python实现)一. 算法介绍及相关概念解读 算法分类十种常见排序算法可以分为两大类: 非线性时间比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn), ...

  10. 2019-2-19-win10-uwp-客户端如何发送类到-asp-dotnet-core-作为参数

    title author date CreateTime categories win10 uwp 客户端如何发送类到 asp dotnet core 作为参数 lindexi 2019-2-19 9 ...