[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 ...
随机推荐
- [Swift]LeetCode229. 求众数 II | Majority Element II
Given an integer array of size n, find all elements that appear more than ⌊ n/3 ⌋ times. Note: The a ...
- [Swift]LeetCode787. K 站中转内最便宜的航班 | Cheapest Flights Within K Stops
There are n cities connected by m flights. Each fight starts from city u and arrives at v with a pri ...
- [Swift]LeetCode806. 写字符串需要的行数 | Number of Lines To Write String
We are to write the letters of a given string S, from left to right into lines. Each line has maximu ...
- Python面试真题第四节
81.举例说明SQL注入和解决办法 82.s="info:xiaoZhang 33 shandong",用正则切分字符串输出['info', 'xiaoZhang', '33', ...
- 优化之Source Qualifier组件
勾选Select Distinct选项,该选项可去除重复记录,以此达到减少数据量从而提高性能 ----------------------------------------------------- ...
- 记一次尴尬的git reset丢失分支故障
最近...似乎一直在踩坑... 也不是什么故障,只是把一个分支的功能弄没了,之后在reflog里找到又恢复了. 产生原因是有同事错误地把分支B merge到了分支A并push. 我直接在分支A上res ...
- python-redistest
# !/usr/bin/python3.4 # -*- coding: utf-8 -*- import redis import time # 这里用来读取ip def getips(): ip = ...
- 【Redis篇】Redis持久化方式AOF和RDB
一.前述 持久化概念:将数据从掉电易失的内存存放到能够永久存储的设备上. Redis持久化方式RDB(Redis DB) hdfs: fsimageAOF(AppendOnlyFile) ...
- Yarn篇--搭建yarn集群
一.前述 有了上次hadoop集群的搭建,搭建yarn就简单多了.废话不多说,直接来 二.规划 三.配置如下 yarn-site.xml配置 <property> <n ...
- 谷歌浏览器的各种插件网址Chrome插件（谷歌浏览器）-超级详细
各种各样的插件,可以查找对自己有用的,自行下载安装 http://chromecj.com/