【官方文档: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. 依赖注入[5]: 创建一个简易版的DI框架[下篇]

    为了让读者朋友们能够对.NET Core DI框架的实现原理具有一个深刻而认识,我们采用与之类似的设计构架了一个名为Cat的DI框架.在<依赖注入[4]: 创建一个简易版的DI框架[上篇]> ...

  2. shell脚本_查找无效网址

    #!/bin/bashif [ $# -ne 1 ];then      echo -e "$Usage: $0 URL\n"      exit 1;fi echo Broken ...

  3. J2EE-tomcat的配置

    修改web.xml文件里面的内容:  路径:D:\software\apache-tomcat-8.0.44\webapps\ROOT\WEB-INF\web.xml: 内容:<?xml ver ...

  4. .NET Core玩转机器学习

    最近在搞机器学习,目前国内没有什么关于ML.NET的教程,官方都是一大堆英文,经过了我的努力,找到了Relax Development大哥的博客,有关于ML.NET的内容 原文地址:https://w ...

  5. 免费SSL证书(支持1.0、1.1、1.2)

    由于公司要开发微信小程序,而微信小程序的接口需要https协议的,并且要支持TLS1.0.TLS1.1.TLS1.2.如果仅仅是为了开发小程序,安全等级又不用太高,可以选择免费的SSL证书 在这里选择 ...

  6. 使用ML.NET实现情感分析[新手篇]

    在发出<.NET Core玩转机器学习>和<使用ML.NET预测纽约出租车费>两文后,相信读者朋友们即使在不明就里的情况下,也能按照内容顺利跑完代码运行出结果,对使用.NET ...

  7. Metal并行计算以及Metal程序的命令行编译

    本来Cuda用的挺好,为了Apple,放弃Cuda,改投OpenCl.好不容易OpenCl也算熟悉了,WWDC2018又宣布了Metal2,建议大家放弃OpenCl,使用Metal Performan ...

  8. LeetCode专题-Python实现之第1题:Two Sum

    导航页-LeetCode专题-Python实现 相关代码已经上传到github:https://github.com/exploitht/leetcode-python 文中代码为了不动官网提供的初始 ...

  9. 阿里云弹性容器实例产品 ECI ——云原生时代的基础设施

    阿里云弹性容器实例产品 ECI ——云原生时代的基础设施 1. 什么是 ECI 弹性容器实例 ECI (Elastic Container Instance) 是阿里云在云原生时代为用户提供的基础计算 ...

  10. 免费报名 | 腾讯云自研数据库CynosDB交流会

    本文由云+社区发表 作者:技术沙龙 All in 云+时代,数据库的高可用性.按需付费.按需扩展等属性解放了大批开发者.腾讯发布的自研数据库CynosDB作为国内首款同时兼容MySQL和PG的云原生数 ...