【官方文档：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. High Availability手册(1): 环境

    三台KVM虚拟机 首先我们得有一个pacemaker的环境,需要三台机器,如果没有那么多物理机器,可以用kvm虚拟机 创建一个bridge ovs-vsctl add-br ubuntu_br ifc ...

  2. ABP入门系列（5）——展现层实现增删改查

    ABP入门系列目录--学习Abp框架之实操演练 这一章节将通过完善Controller.View.ViewModel,来实现展现层的增删改查.最终实现效果如下图: 一.定义Controller ABP ...

  3. [Swift]LeetCode95. 不同的二叉搜索树 II | Unique Binary Search Trees II

    Given an integer n, generate all structurally unique BST's (binary search trees) that store values 1 ...

  4. [Swift]LeetCode169. 求众数 | Majority Element

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  5. [SQL]LeetCode182. 查找重复的电子邮箱 | Duplicate Emails

    Write a SQL query to find all duplicate emails in a table named Person. +----+---------+ | Id | Emai ...

  6. 12.Git分支-推送（push）、跟踪分支、拉取（pull）、删除远程分支

    1.推送 本地的分支并不会自动与远程仓库同步,你可以显示的向远程仓库推送你的分支.例如你在本地创建了一个dev分支,你想其他的人和你一样在dev之下进行工作,可以使用 git push <rem ...

  7. Cassandra事务与关系型数据库事务有何区别

    Cassandra不会使用回滚和锁机制来实现关系型数据的ACID事务,相比较于提供原子性,隔离性和持久化,Cassandra提供最终(可调节的)一致性,让用户决定为每个事务提供强一致性或者最终一致性. ...

  8. JDK1.8源码(三)——java.util.HashMap

      什么是哈希表? 在讨论哈希表之前,我们先大概了解下其他数据结构在新增,查找等基础操作执行性能 数组:采用一段连续的存储单元来存储数据.对于指定下标的查找,时间复杂度为O(1):通过给定值进行查找, ...

  9. 基于winserver部署Apollo初次体验（附.net客户端demo）

    前言 配置中心伴随着这几年分布式系统演变和微服务架构的兴起,已经成为必不可少的需求之一.试下一下如果哪天公司的所有应用服务,从公司服务器迁移到云服务,成千上万的配置,修改起来是多么耗时费劲的事(我们公 ...

  10. [Python Web]常见的 POST 提交数据的方式

    本文参考整理于:https://imququ.com/post/four-ways-to-post-data-in-http.html 简介 这里介绍了,用 POST 方法提交数据时,常见的三种方式: ...