【官方文档：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. QEMU KVM Libvirt(12): Live Migration

    由于KVM的架构为 Libvirt –> qemu –> KVM 所以对于live migration有两种方式,一种是qemu + KVM自己的方式,一种是libvirt的方式,当然li ...

  2. [FPGA] 1、Artix-7 35T Arty FPGA 评估套件学习 + SiFive risc-v 指令集芯片验证

    目录 1.简介 2.深入 3.DEMO 4.SiFive基于risc-v指令集的芯片验证 LINKS 时间 作者 版本 备注 2018-10-09 08:38 beautifulzzzz v1.0 到 ...

  3. NeuChar 平台使用及开发教程（五）：使用 NeuChar 的关键字回复服务

    在上一篇<NeuChar 平台使用及开发教程(四):使用 NeuChar 的素材服务>中,我们已经完成了素材的添加,下面,让我们来设置一个关键字回复,并同步到应设置好Neural Endi ...

  4. data自定义属性获取方法和设置

    <!--原生获取方法--> <div data-id="id=1"></div> <script> //js原生获取方法 var i ...

  5. [Swift]LeetCode433. 最小基因变化 | Minimum Genetic Mutation

    A gene string can be represented by an 8-character long string, with choices from "A", &qu ...

  6. WebWorker与WebSocket实现前端消息总线

    Web Worker让JS有了多线程的能力,可以将复杂耗时的操作都交付给Worker线程处理.WebSocket让web端与服务端维持一个有效的长连接,实现服务端主动推送数据.将二者一结合,业务系统信 ...

  7. 【TOGAF】总体认知

    TOGAF是什么 TOGAF(The Open Group Architecture Framework)是当前最为流行的企业架构框架理论之一,它为一个企业或组织对于企业架构的接受.创建.使用和维护提 ...

  8. Java并发编程-volatile可见性的介绍

    要学习好Java的多线程,就一定得对volatile关键字的作用机制了熟于胸.最近博主看了大量关于volatile的相关博客,对其有了一点初步的理解和认识,下面通过自己的话叙述整理一遍. 有什么用? ...

  9. spark System memory must be at least

    运行 ScalaSpark 程序的时候出现错误: System memory * must be at least *.Please increase heap size using the --dr ...

  10. 『骑士精神 IDA*』

    骑士精神(SCOI2005) Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑 士的走法(它可以走到和它横坐标相差为1,纵 ...