Expand是ArcGIS JavaScript API 4.3推出的一个widget（控件），用于承载一个HTML DOM元素，可以把一个自己编写的div或者是一个其他的Esri widget控件放到Expand里面。Expand在地图上显示为一个小方块按钮，点击可以展开或关闭它所承载的内容。关于Expand控件的详细内容，请查看：https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html。
下面将一个表单div和一个echarts图表放到Expand中。
一、代码框架
框架中包括HTML的基本语句、在线API的引入、切片图层的创建并添加到Map对象中等，详细内容请查看：[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView简介、ArcGIS JavaScript API4.8 底图选择的几种方案。
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <!-- 移动端优化 --> 5 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 6 <title>将展示内容（div、iframe）放在Expand控件中</title> 7 8 <!-- JS API 引入 --> 9 <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> 10 <script src="https://js.arcgis.com/4.8/"></script> 11 12 <!-- 设置样式 --> 13 <style> 14 html,body,#viewDiv{ 15 margin:0; 16 padding:0; 17 height:100%; 18 width:100%; 19 } 20 </style> 21 22 <!-- JS API 调用代码 --> 23 <script> 24 require([ 25 "esri/Map", 26 "esri/views/MapView", 27 "esri/layers/TileLayer", 28 29 "dojo/domReady!"],function(Map,MapView,TileLayer){ 30 var mapTileLayer=new TileLayer({ 31 url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer" 32 }); 33 var map=new Map({ 34 layers:[mapTileLayer] 35 }); 36 37 var view=new MapView({ 38 container:"viewDiv", 39 map:map, 40 center:[118.79647, 32.05838], //南京城区 41 zoom:10 42 }); 43 }); 44 </script> 45 </head> 46 47 <body> 48 <div id="viewDiv"></div> 49 </body> 50 </html>
二、创建一个表单div并放到Expand中
为了更好看的样式，引入Bootstrap框架，要注意Bootstrap的引入要放在JS API引入之前，否则会出现multipleDefine的错误。这里使用Bootstrap在线CDN，也可以下载到本地引用。这里有个小提示，在编写HTML代码时，复制href=".."或src=".."中的网址并在浏览器中打开（如果可以，或在编辑器中双击直接打开），如果浏览器出现所引用文件的代码，则说明网址没有错误，否则要检查网址是不是有错误。
1 <!-- 在JS API引入之前 引入 Bootstrap --> 2 <!-- 新 Bootstrap4 核心 CSS 文件 --> 3 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css"> 4 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 5 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 6 <!-- popper.min.js 用于弹窗、提示、下拉菜单 --> 7 <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script> 8 <!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> 9 <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
在<body>标签内进行表单div的编写。将这个div放在承载地图的viewDiv的后面（后面会有解释）。关于使用Bootstrap框架编写表单的详细内容，请查看：使用Bootstrap框架写一个注册\登录界面。
1 <!-- 表单div --> 2 <div id="div1"> 3 <h3>这是一个表单</h3> 4 <form> 5 <div class="form-group"> 6 <label for="name">景点名称：</label> 7 <input type="text" class="form-control" id="name" autocomplete="off"> 8 </div> 9 <div class="form-group"> 10 <label for="date">游玩日期：</label> 11 <input type="text" class="form-control" id="date" autocomplete="off"> 12 </div> 13 <div class="form-group"> 14 <label for="money">花费：</label> 15 <input type="text" class="form-control" id="money" autocomplete="off"> 16 </div> 17 <div class="form-group"> 18 <label for="company">同行：</label> 19 <input type="text" class="form-control" id="company" autocomplete="off"> 20 </div> 21 <div class="form-group"> 22 <label for="feeling">感受：</label> 23 <textarea class="form-control" rows="5" id="feeling"></textarea> 24 <input type="button" class="btn btn-info" value="一个button" id="btnLight"> 25 </div> 26 </form> 27 </div>
保存后打开网页，发现右侧多了一个竖直滚动条。下拉看到刚才编写的表单放在了承载地图的viewDiv的下面。如果编写表单的代码放在了<div >
下面编写Expand控件，并将这个表单放到Expand中。Expand的构造函数中，view表示Expand所贴附的那个视图；content是承载的HTML DOM元素或API提供的widget（控件），其值是DOM元素的ID值或控件的变量名；expandIconClass是Expand按钮的符号，其值是一个表示符号的字符串，可以在这里选择自己喜欢的符号：https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/index.html；expandTooltip设置鼠标在Expand控件上悬停时显示的提示信息；expanded设置Expand在加载完成后是打开状态还是折叠状态，缺省为折叠状态。
1 <!-- JS API 调用代码 --> 2 <script> 3 require([ 4 "esri/Map", 5 "esri/views/MapView", 6 "esri/layers/TileLayer", 7 8 "esri/widgets/Expand", 9 10 "dojo/domReady!"],function(Map,MapView,TileLayer,Expand){ 11 var mapTileLayer=new TileLayer({ 12 url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer" 13 }); 14 var map=new Map({ 15 layers:[mapTileLayer] 16 }); 17 18 var view=new MapView({ 19 container:"viewDiv", 20 map:map, 21 center:[118.79647, 32.05838], //南京城区 22 zoom:10 23 }); 24 25 //Expand承载表单div 26 var div1Expand=new Expand({ 27 view:view, 28 content:div1, 29 expandIconClass:"esri-icon-edit", //Expand按钮符号 30 expandTooltipe:"一个表单", //鼠标悬停时显示的提示 31 expanded:false, //默认折叠（缺省） 32 }); 33 view.ui.add(div1Expand,"top-left"); 34 }); 35 </script>
为表单div设置宽度，使其更好看些。可以在<div>标签中添加style属性，也可以在<head>头标签中设置<style></style>css样式。
1 <!-- 表单div --> 2 <div id="div1" style="width:200px;"> 3 <h3>这是一个表单</h3> 4 <form> 5 <div class="form-group"> 6 <label for="name">景点名称：</label> 7 <input type="text" class="form-control" id="name" autocomplete="off"> 8 </div> 9 <div class="form-group"> 10 <label for="date">游玩日期：</label> 11 <input type="text" class="form-control" id="date" autocomplete="off"> 12 </div> 13 <div class="form-group"> 14 <label for="money">花费：</label> 15 <input type="text" class="form-control" id="money" autocomplete="off"> 16 </div> 17 <div class="form-group"> 18 <label for="company">同行：</label> 19 <input type="text" class="form-control" id="company" autocomplete="off"> 20 </div> 21 <div class="form-group"> 22 <label for="feeling">感受：</label> 23 <textarea class="form-control" rows="5" id="feeling"></textarea> 24 <input type="button" class="btn btn-info" value="一个button" id="btnLight"> 25 </div> 26 </form> 27 </div>
三、创建一个echarts图表并放到Expand中
echarts是百度公司开发的JavaScript开源可视化库，提供丰富的图表制作功能，具体请查看：http://echarts.baidu.com/。echarts没有在线的CDN，我们在官网下载后将echarts.js文件拷贝在当前目录下。在<head>中引用echarts.js。与引入Bootstrap情况相同，在引入echarts.js时，要先于JS API引入，否则会出现multipleDefine的错误。
1 <!-- 在JS API引入之前 引入 echarts --> 2 <script src="echarts.js"></script>
在表单div后编写一个echarts图表div，这里不对echarts代码进行解释了。
1 <!-- echarts图表div --> 2 <div id="div2" style="width:600px;height:370px;"> 3 <script> 4 var myChart = echarts.init(document.getElementById('div2')); 5 option = { 6 title: { 7 text: '06-16 ~ 07-16 9:30am 各景区月平均人数', 8 x: 'center' 9 }, 10 tooltip: { 11 trigger: 'item', 12 formatter: "{a} <br/>{b} : {c} ({d}%)" 13 }, 14 legend: { 15 x: 'center', 16 y: 'bottom', 17 data: ['夫子庙', '中山陵', '雨花台', '总统府', '玄武湖', '红山森林动物园', '侵华日军南京大屠杀遇难同胞纪念馆'] 18 }, 19 toolbox: { 20 show: true, 21 feature: { 22 mark: { show: true }, 23 dataView: { show: true, readOnly: false }, 24 magicType: { 25 show: false, 26 type: ['pie', 'funnel'] 27 }, 28 restore: { show: false }, 29 saveAsImage: { show: false } 30 } 31 }, 32 calculable: true, 33 series: [ 34 { 35 // name:'面积模式', 36 type: 'pie', 37 radius: [40, 150], 38 center: ['50%', '50%'], 39 roseType: 'area', 40 data: [ 41 { value: 10062, name: '夫子庙' }, 42 { value: 4076, name: '中山陵' }, 43 { value: 2362, name: '雨花台' }, 44 { value: 230, name: '总统府' }, 45 { value: 837, name: '玄武湖' }, 46 { value: 396, name: '红山森林动物园' }, 47 { value: 82, name: '侵华日军南京大屠杀遇难同胞纪念馆' }, 48 ] 49 } 50 ] 51 }; 52 myChart.setOption(option); 53 </script> 54 </div>
编写Expand代码，将echarts图表放到Expand控件中。
为了更好的表现效果，更换echarts图表div的背景颜色，设置成0.8不透明度的白色。
1 <!-- echarts图表div --> 2 <div id="div2" style="width:600px;height:370px;background-color:rgba(255,255,255,0.8);"> 3 <script> 4 var myChart = echarts.init(document.getElementById('div2')); 5 option = { 6 title: { 7 text: '06-16 ~ 07-16 9:30am 各景区月平均人数', 8 x: 'center' 9 }, 10 tooltip: { 11 trigger: 'item', 12 formatter: "{a} <br/>{b} : {c} ({d}%)" 13 }, 14 legend: { 15 x: 'center', 16 y: 'bottom', 17 data: ['夫子庙', '中山陵', '雨花台', '总统府', '玄武湖', '红山森林动物园', '侵华日军南京大屠杀遇难同胞纪念馆'] 18 }, 19 toolbox: { 20 show: true, 21 feature: { 22 mark: { show: true }, 23 dataView: { show: true, readOnly: false }, 24 magicType: { 25 show: false, 26 type: ['pie', 'funnel'] 27 }, 28 restore: { show: false }, 29 saveAsImage: { show: false } 30 } 31 }, 32 calculable: true, 33 series: [ 34 { 35 // name:'面积模式', 36 type: 'pie', 37 radius: [40, 150], 38 center: ['50%', '50%'], 39 roseType: 'area', 40 data: [ 41 { value: 10062, name: '夫子庙' }, 42 { value: 4076, name: '中山陵' }, 43 { value: 2362, name: '雨花台' }, 44 { value: 230, name: '总统府' }, 45 { value: 837, name: '玄武湖' }, 46 { value: 396, name: '红山森林动物园' }, 47 { value: 82, name: '侵华日军南京大屠杀遇难同胞纪念馆' }, 48 ] 49 } 50 ] 51 }; 52 myChart.setOption(option); 53 </script> 54 </div>