[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets简介
【官方文档：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简介的更多相关文章
- [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 ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html] 一. ...
- [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 ...
- [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 ...
- 下载并部署 ArcGIS API for JavaScript 4.10
学习ArcGIS API for JavaScript 4.10 的第一步就是下载并部署该文件. 有的读者由于之间没接触过,不知道怎么下载和部署文件.这些读者要求作者详细的写一篇关于下载和部署的文章( ...
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
- ArcGIS API for JavaScript 4.4 版本加载谷歌地图
ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...
- 转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述
原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...
- arcgis api for JavaScript _加载三维图层(scene layer)
arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript 4.x 版本增加对三维的支持. 关于三维图层(sce ...
随机推荐
- 依赖注入[5]: 创建一个简易版的DI框架[下篇]
为了让读者朋友们能够对.NET Core DI框架的实现原理具有一个深刻而认识,我们采用与之类似的设计构架了一个名为Cat的DI框架.在<依赖注入[4]: 创建一个简易版的DI框架[上篇]> ...
- shell脚本_查找无效网址
#!/bin/bashif [ $# -ne 1 ];then echo -e "$Usage: $0 URL\n" exit 1;fi echo Broken ...
- J2EE-tomcat的配置
修改web.xml文件里面的内容: 路径:D:\software\apache-tomcat-8.0.44\webapps\ROOT\WEB-INF\web.xml: 内容:<?xml ver ...
- .NET Core玩转机器学习
最近在搞机器学习,目前国内没有什么关于ML.NET的教程,官方都是一大堆英文,经过了我的努力,找到了Relax Development大哥的博客,有关于ML.NET的内容 原文地址:https://w ...
- 免费SSL证书（支持1.0、1.1、1.2）
由于公司要开发微信小程序,而微信小程序的接口需要https协议的,并且要支持TLS1.0.TLS1.1.TLS1.2.如果仅仅是为了开发小程序,安全等级又不用太高,可以选择免费的SSL证书 在这里选择 ...
- 使用ML.NET实现情感分析[新手篇]
在发出<.NET Core玩转机器学习>和<使用ML.NET预测纽约出租车费>两文后,相信读者朋友们即使在不明就里的情况下,也能按照内容顺利跑完代码运行出结果,对使用.NET ...
- Metal并行计算以及Metal程序的命令行编译
本来Cuda用的挺好,为了Apple,放弃Cuda,改投OpenCl.好不容易OpenCl也算熟悉了,WWDC2018又宣布了Metal2,建议大家放弃OpenCl,使用Metal Performan ...
- LeetCode专题-Python实现之第1题：Two Sum
导航页-LeetCode专题-Python实现 相关代码已经上传到github:https://github.com/exploitht/leetcode-python 文中代码为了不动官网提供的初始 ...
- 阿里云弹性容器实例产品 ECI ——云原生时代的基础设施
阿里云弹性容器实例产品 ECI ——云原生时代的基础设施 1. 什么是 ECI 弹性容器实例 ECI (Elastic Container Instance) 是阿里云在云原生时代为用户提供的基础计算 ...
- 免费报名 | 腾讯云自研数据库CynosDB交流会
本文由云+社区发表 作者:技术沙龙 All in 云+时代,数据库的高可用性.按需付费.按需扩展等属性解放了大批开发者.腾讯发布的自研数据库CynosDB作为国内首款同时兼容MySQL和PG的云原生数 ...