【官方文档：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. FFmpeg命令行工具学习(一)：查看媒体文件头信息工具ffprobe

    一.简述 ffprobe是ffmpeg命令行工具中相对简单的,此命令是用来查看媒体文件格式的工具. 二.命令格式 在命令行中输入如下格式的命令: ffprobe [文件名] 三.使用ffprobe查看 ...

  2. [Swift]LeetCode252.会议室 $ Meeting Rooms

    Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2],...] (si ...

  3. [Swift]LeetCode798. 得分最高的最小轮调 | Smallest Rotation with Highest Score

    Given an array A, we may rotate it by a non-negative integer K so that the array becomes A[K], A[K+1 ...

  4. [Swift]LeetCode996. 正方形数组的数目 | Number of Squareful Arrays

    Given an array A of non-negative integers, the array is squareful if for every pair of adjacent elem ...

  5. MyEclipse设置编码格式

    1.设置项目编码格式,右键项目,Properties 选择第一个   2.设置软件编码格式,windows---->Preferences打开"首选项"对话框

  6. Python内置函数(22)——float

    英文文档: class float([x]) Return a floating point number constructed from a number or string x. If the ...

  7. 微信小程序实战–集阅读与电影于一体的小程序项目（八）

    31.电影详情页面 movie-template.wxml <view class="movie-container" catchtap="onMovieTap&q ...

  8. docker commit命令创建新的镜像

    docker commit命令创建新的镜像 1.运行容器 2.修改容器 3.将容器保存为新容器 (1)运行容器 [root@cmdb-server docker]# docker run -ti ce ...

  9. php 定时任务

    crontab第一次使用真是个坑 第一次使用crontab 时,会出现no crontab for root - using an empty one“Select a editor ......”下 ...

  10. RabbitMQ学习笔记（六） RPC

    什么RPC? 这一段是从度娘摘抄的. RPC(Remote Procedure Call Protocol)——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的 ...