【官方文档：https://developers.arcgis.com/javascript/latest/sample-code/intro-widgets/index.html】

一、Intro to widgets using BasemapToggle

widgets(控件)是ArcGIS API for JavaScript的重要内容，widgets是指BasemapToggle(底图切换)、Bookmarks(书签)、Compass(指北针)、Layerlist(图层列表)、Legend(图例)等可以在地图上添加的按钮或功能键。更多widgets的信息，请查看API Reference：https://developers.arcgis.com/javascript/latest/api-reference/index.html。

widgets可以看作是被写好的、具有特定功能的一段JavaScript代码，封装在类(class)中。JS API提供了很多即拿即用(ready-to-use)的widgets。

一些widgets是默认添加在MapView或SceneView中的，如MapView中的Zoom(缩放)按钮、SceneView中的Compass(指北针)按钮。这些默认添加的按钮也是可以去掉的。在特定场景下，如果不需要这些功能，则可以去除。

总的来说，使用widgets有两步。一是创建并实例化widget；二是设置widget的相关属性。

这个例子介绍的是BasemapToggle widget，用于在同一个MapView中切换底图。这种方法在SceneView中也是适用的。

1.代码骨架

 <!doctype html>

 <html>

     <head>

         <meta charset="utf-8">

         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

         <title>Intro to widgets</title>

         <!-- JS API的引入 -->

         <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

         <script src="https://js.arcgis.com/4.8/"></script>

         <!-- 样式的设置 -->

         <style>

             html,body,#viewDiv{

                 padding:0;

                 margin:0;

                 height:100%;

                 width:100%;

             }

         </style>

         <script>

         </script>

     </head>

     <body>

         <div id="viewDiv"></div>

     </body>

 </html>

其中，包括JS API的引入、style样式的设置等等。

2.实例化Map和MapView

 <script>

 2     require([

         "esri/Map",

         "esri/views/MapView",

         "esri/widgets/BasemapToggle",  //加载BasemapToggle widget模块

         "dojo/domReady!"

         ],function(Map,MapView,BasemapToggle){

             //实例化Map

             var map=new Map({

                 basemap:"topo"

             });

             //实例化MapView

             var view=new MapView({

                 container:"viewDiv",

                 map:map,

                 center:[117,34],

                 zoom:3

             });

20 });

21 </script>

这里实例化了Map和MapView对象，并设置了相关属性。关于Map和MapView的更多信息，请查看：https://www.cnblogs.com/wangmengdx/p/9385033.html。

3.实例化BasemapToggle widget并设置相关属性

 //创建BasemapToggle widget并设置相关属性

var toggle=new BasemapToggle({

     view:view,  //设置当前底图为view当前承载的那个底图（"topo"）

     nextBasemap:"hybrid"  //切换至"hybird"底图

 });

view属性可以是MapView或者SceneView。它使得BasemapToggle widget连接至初始底图，即使用BasemapToggle widget切换之前的底图。

nextBasemap属性设置切换之后的底图。这里可以是Esri提供的底图，或者是自己Server发布的服务。

4.在view中设置widget的位置

 //添加widget到view中的指定位置

2 view.ui.add(toggle,"top-right");

使用View的ui属性，可以设置widget在view中显示的位置。

5.最终代码及运行效果

 <!doctype html>

 <html>

     <head>

         <meta charset="utf-8">

         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

         <title>Intro to widgets</title>

         <!-- JS API的引入 -->

         <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

         <script src="https://js.arcgis.com/4.8/"></script>

         <!-- 样式的设置 -->

         <style>

             html,body,#viewDiv{

                 padding:0;

                 margin:0;

                 height:100%;

                 width:100%;

             }

         </style>

         <script>

             require([

                 "esri/Map",

                 "esri/views/MapView",

                 "esri/widgets/BasemapToggle",  //加载BasemapToggle widget模块

                 "dojo/domReady!"

                 ],function(Map,MapView,BasemapToggle){

                     //实例化Map

                     var map=new Map({

                         basemap:"topo"

                     });

                     //实例化MapView

                     var view=new MapView({

                         container:"viewDiv",

                         map:map,

                         center:[117,34],

                         zoom:3

                     });

                     //创建BasemapToggle widget并设置相关属性

                     var toggle=new BasemapToggle({

                         view:view,  //设置当前底图为view当前承载的那个底图（"topo"）

                         nextBasemap:"hybrid"  //切换至"hybird"底图

                     });

                     //添加widget到view中的指定位置

                     view.ui.add(toggle,"top-right");

             });

         </script>

     </head>

     <body>

         <div id="viewDiv"></div>

     </body>

 </html>

[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets简介的更多相关文章

  1. [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView简介

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/index.html]  一.Intro to MapView(2D ...

  2. [ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html] 一. ...

  3. [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-popups简介

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popup/index.html] 一.Intro to ...

  4. [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-layers简介

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-layers/index.html] 一.Intro t ...

  5. 下载并部署 ArcGIS API for JavaScript 4.10

    学习ArcGIS API for JavaScript 4.10 的第一步就是下载并部署该文件. 有的读者由于之间没接触过,不知道怎么下载和部署文件.这些读者要求作者详细的写一篇关于下载和部署的文章( ...

  6. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  7. ArcGIS API for JavaScript 4.4 版本加载谷歌地图

    ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...

  8. 转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述

    原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...

  9. arcgis api for JavaScript _加载三维图层(scene layer)

    arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript  4.x 版本增加对三维的支持. 关于三维图层(sce ...

随机推荐

  1. [IOT] 自制蓝牙工牌办公室定位系统 （一）—— 阿里物联网平台概览及打通端到云（硬核·干货）

    目录:老少皆宜.超长干货文警告 1.快速入门创建产品 -- 小白,打包带走去吹牛 2.代码分析 -- 老炮,快速了解能用上 2.1 从start.sh分析开发环境如何自动构建 2.2 从sample. ...

  2. [编译] 4、在Linux下搭建nRF51822的开发烧写环境（makefile版）

    星期日, 09. 九月 2018 07:51下午 - beautifulzzzz 1.安装步骤 1) 从GNU Arm Embedded Toolchain官网下载最新的gcc-arm工具链,写文章时 ...

  3. [.net 面向对象程序设计深入]（31）实战设计模式——使用Ioc模式（控制反转或依赖注入）实现松散耦合设计（1）

    [.net 面向对象程序设计深入](31)实战设计模式——使用IoC模式(控制反转或依赖注入)实现松散耦合设计(1) 1,关于IOC模式 先看一些名词含义: IOC: Inversion of con ...

  4. 【二代示波器教程】第13章 RTX操作系统版本二代示波器实现

    第13章      RTX操作系统版本二代示波器实现 本章教程为大家讲解RTX操作系统版本的二代示波器实现.主要讲解RTOS设计框架,即各个任务实现的功能,任务间的通信方案选择,任务栈,系统栈以及全局 ...

  5. Java编程题: 写一个Singleton出来

    Singleton模式主要作用是保证在Java应用程序中,一个类Class只有一个实例存在. 一般Singleton模式通常有几种种形式: 第一种形式:  定义一个类,它的构造函数为private的, ...

  6. 举例子来说明Python引用和对象

    今天看到这么一句奇怪的话: python中变量名和对象是分离的:最开始的时候是看到这句话的时候没有反应过来.决定具体搞清楚一下python中变量与对象之间的细节.(其实我感觉应该说 引用和对象分离 更 ...

  7. [Swift]LeetCode264.丑数 II | Ugly Number II

    Write a program to find the n-th ugly number. Ugly numbers are positive numbers whose prime factors ...

  8. [Swift]LeetCode971.翻转二叉树以匹配先序遍历 | Flip Binary Tree To Match Preorder Traversal

    Given a binary tree with N nodes, each node has a different value from {1, ..., N}. A node in this b ...

  9. awk小例子_1_逆序排列

    seq 3 | awk '{ lifo[NR]=$0 } END{ for(lno=NR;lno>-1;lno--){ print lifo[lno]; } }' 结果:3 2 1 空行(lno ...

  10. Python——day12 nonlcoal关键字、装饰器（开放封闭原则、函数被装饰、最终写法）

    一.nonlocal关键字 1.作用:将L与E(E中的名字需要提前定义)的名字统一 2.应用场景:如果想在被嵌套的函数中修改外部函数变量(名字)的值 def outer(): num=10 print ...