將展現內容（div、iframe）放在Expand控件中

時間 2019-11-25

標籤展現內容 div iframe 放在 expand 控件欄目 CSS 简体版

原文原文鏈接

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。javascript

下面將一個表單div和一個echarts圖表放到Expand中。css

1、代碼框架html

　　框架中包括HTML的基本語句、在線API的引入、切片圖層的建立並添加到Map對象中等，詳細內容請查看：[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView簡介、ArcGIS JavaScript API4.8 底圖選擇的幾種方案。
java

 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>

2、建立一個表單div並放到Expand中jquery

　　爲了更好看的樣式，引入Bootstrap框架，要注意Bootstrap的引入要放在JS API引入以前，不然會出現multipleDefine的錯誤。這裏使用Bootstrap在線CDN，也能夠下載到本地引用。這裏有個小提示，在編寫HTML代碼時，複製href=".."或src=".."中的網址並在瀏覽器中打開（若是能夠，或在編輯器中雙擊直接打開），若是瀏覽器出現所引用文件的代碼，則說明網址沒有錯誤，不然要檢查網址是否是有錯誤。bootstrap

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框架寫一個註冊\登陸界面。
api

 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 id="viewDiv"></div>的前面，那頁面上方是表單，下方是地圖。雖然這個表單div是要放在Expand控件中的，可是頁面在加載地圖時會有等待時間，每每HTML DOM元素先於Expand控件加載出來。因此將表單div放到地圖下方，當Expand控件尚未加載出來時，頁面不會突兀地出現一個表單。
瀏覽器

　　下面編寫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樣式。echarts

 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>

3、建立一個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>

修改div背景顏色

　　這裏也能夠修改div的寬高，在Expand中會有相應改變。

 1     <!-- echarts圖表div -->
 2     <div id="div2" style="width:1000px;height:600px;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>

修改div寬高

4、將表單div和echarts圖表div放到一個新的HTML頁面中，並經過Iframe引用並放到Expand控件中

　　經過以上步驟，咱們已經實現了將一個表單div和一個echarts圖表div放到Expand控件中，但這麼作，在當前HTML頁面（咱們稱之爲主頁面）的<head>標籤內引入了不少外部的css和js文件，<body>標籤內也寫了不少內容，顯得有些冗餘了。

　　咱們能夠將div放到一個新的HTML頁面，並經過<iframe>標籤引用這個HTML頁面並放到Expand控件中。這樣，不少內容就從主頁面遷移到了新的HTML頁面。下面編寫一個新的HTML頁面iframe_div1.html，盛放表單div。這是一個新的HTML頁面，因此不須要的引用文件就能夠不引入了，好比JS API。同時，主頁面中用不到的css或js外部文件引用也能夠刪掉了。（若是在主頁面的<body>標籤內添加了一個<iframe>，而<iframe>引入的HTML頁面中要用到某些css或js文件，應該在那個新的HTML頁面中引入文件，而不是在主頁面中）。下面是iframe_div2.html的代碼：

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title></title>
 5     
 6     <!-- 新 Bootstrap4 核心 CSS 文件 -->
 7     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
 8     <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
 9     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
10     <!-- popper.min.js 用於彈窗、提示、下拉菜單 -->
11     <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
12     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
13     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
14 </head>
15 
16 <body>
17     <!-- 表單div -->
18     <div id="div1" style="width:200px;background-color:rgba(255,255,255,0.8);">
19         <h3>這是一個表單</h3>
20         <form>
21             <div class="form-group">
22                 <label for="name">景點名稱：</label>
23                 <input type="text" class="form-control" id="name" autocomplete="off">
24             </div>
25             <div class="form-group">
26                 <label for="date">遊玩日期：</label>
27                 <input type="text" class="form-control" id="date" autocomplete="off">
28             </div>
29             <div class="form-group">
30                 <label for="money">花費：</label>
31                 <input type="text" class="form-control" id="money" autocomplete="off">
32             </div>
33             <div class="form-group">
34                 <label for="company">同行：</label>
35                 <input type="text" class="form-control" id="company" autocomplete="off">
36             </div>
37             <div class="form-group">
38                 <label for="feeling">感覺：</label>
39                 <textarea class="form-control" rows="5" id="feeling"></textarea>
40                 <input type="button" class="btn btn-info" value="一個button" id="btnLight">
41             </div>
42         </form>
43     </div>
44 </body>
45 </html>

　　更新主頁面中代碼，刪除關於表單div的代碼（由於已經移到了iframe_div1.html這裏），並添加<iframe>標籤以引用iframe_div1.html，同時更改Expand控件的構造函數，將content的值更換爲iframe的ID值。

1                 //Expand承載表單div
2                 var div1Expand=new Expand({
3                     view:view,
4                     content:iframe_div1,
5                     expandIconClass:"esri-icon-edit",  //Expand按鈕符號
6                     expandTooltipe:"一個表單",  //鼠標懸停時顯示的提示
7                     expanded:false,  //默認摺疊（缺省）
8                 });
9                 view.ui.add(div1Expand,"top-left");

1     <!-- 表單div -->
2     <iframe src="iframe_div1.html" id="iframe_div1"></iframe>

　　雖然以前爲表單div1設置過了樣式，但這裏由於div1放到了iframe_div1.html中，主頁面中經過<iframe>標籤引用了iframe_div1.html，因此在Expand控件中顯示的是iframe_div1.html而不是div1！（雖然div1放到了iframe_div1.html中..）這麼說想表達的是，爲div1設置樣式與爲iframe_div1設置樣式是不一樣的。爲div1設置樣式是iframe_div1中具體內容的樣式（由於iframe_div1的內容就是div1），而爲iframe_div1設置樣式是爲了其在Expand控件中的表現形式。（iframe_div1是<iframe>元素的ID值，這個元素引用了iframe_div1.html）

　　爲iframe_div1設置寬高，反覆調試，設置最合適的寬高值。frameborder設置iframe是否顯示邊框，值爲"0"不顯示，值爲"1"顯示。

1     <!-- 表單div -->
2     <iframe src="iframe_div1.html" id="iframe_div1" frameborder="0" style="width:210px;height:610px;"></iframe>

　　雖然以前設置了div1的背景顏色，但那是對於div來講的，在iframe_div1.html這個頁面中，div1的背景顏色是不透明度0.8的白色。但這並不意味着iframe_div1放到控件中，它的背景色也是這樣。須要設置iframe_div1的屬性。

1     <!-- 表單div -->
2     <iframe src="iframe_div1.html" id="iframe_div1" frameborder="0" style="width:210px;height:610px;background-color:rgba(255,255,255,0.8);"></iframe>

　　但是運行結果顯示，Expand控件中iframe的背景顏色並無變..（沒有解決，不知道是什麼問題。但願若是讀者看到這裏，能夠本身嘗試解決問題，並告訴我問題出在哪裏）

　　一樣地，新建HTML頁面iframe_div2.html，將echarts圖表div的內容放到iframe_div2.html中。下面是iframe_div2.html的代碼：

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title></title>
 5         
 6     <!-- 在JS API引入以前 引入 echarts -->
 7     <script src="echarts.js"></script>
 8 </head>
 9 
10 <body>
11     <!-- echarts圖表div -->
12     <div id="div2" style="width:600px;height:370px;background-color:rgba(255,255,255,0.8);">
13         <script>
14             var myChart = echarts.init(document.getElementById('div2'));
15             option = {
16                 title: {
17                     text: '06-16 ~ 07-16 9:30am 各景區月平均人數',
18                     x: 'center'
19                 },
20                 tooltip: {
21                     trigger: 'item',
22                     formatter: "{a} <br/>{b} : {c} ({d}%)"
23                 },
24                 legend: {
25                     x: 'center',
26                     y: 'bottom',
27                     data: ['夫子廟', '中山陵', '雨花臺', '總統府', '玄武湖', '紅山森林動物園', '侵華日軍南京大屠殺遇難同胞記念館']
28                 },
29                 toolbox: {
30                    show: true,
31                    feature: {
32                        mark: { show: true },
33                        dataView: { show: true, readOnly: false },
34                        magicType: {
35                            show: false,
36                            type: ['pie', 'funnel']
37                        },
38                        restore: { show: false },
39                        saveAsImage: { show: false }
40                    }
41                 },
42                 calculable: true,
43                 series: [
44                     {
45                         // name:'面積模式',
46                         type: 'pie',
47                         radius: [40, 150],
48                         center: ['50%', '50%'],
49                         roseType: 'area',
50                         data: [
51                             { value: 10062, name: '夫子廟' },
52                             { value: 4076, name: '中山陵' },
53                             { value: 2362, name: '雨花臺' },
54                             { value: 230, name: '總統府' },
55                             { value: 837, name: '玄武湖' },
56                             { value: 396, name: '紅山森林動物園' },
57                             { value: 82, name: '侵華日軍南京大屠殺遇難同胞記念館' },
58                         ]
59                     }
60                 ]
61             };
62             myChart.setOption(option);
63         </script>
64     </div>
65 </body>
66 </html>

　　修改主頁面代碼。更改Expand構造函數中content屬性值，爲iframe設置寬高及背景顏色（背景顏色依然未更改）。

　　雖然背景顏色不是想象中的0.8不透明度的白色，但我發現了一些「貓膩」。

　　將iframe_div2的寬高都增大100px，看得更清楚。

1     <!-- echarts圖表div -->
2     <iframe src="iframe_div2.html" id="iframe_div2" frameborder="0" style="width:750px;height:500px;background-color:rgba(255,255,255,0.8);"></iframe>

　　圖中iframe_div2的背景顏色確實更改了，只是div2自己也帶有背景顏色，二者疊加就變得不那麼透明瞭。在iframe_div2.html中，將div2的背景顏色去掉。iframe_div2變成了咱們想要的背景顏色。

　　可是這種解決方法對iframe_div1無論用..

5、使用div放到Expand中和使用iframe放到Expand中的區別與聯繫

　　兩種方法均可以實現將想要展現的內容放到API Expand控件中。但div是寫在主頁面中的，這意味着主頁面要引入不少外部的css和js文件，<body>標籤內也要寫不少內容；而iframe方案是把div放到了一個新的HTML頁面裏，在主頁面中只是建立了一個<iframe>標籤，這個標籤內包含新頁面的引用。從下面的控制檯信息中能夠看到，<iframe>標籤引用的兩個HTML文件，實際上是做爲Sources（資源）引入到主頁面的。因此，若是Expand控件中要展現的內容不多，用div寫在主頁面中就行了；若是展現的內容挺多，那就放到新的HTML頁面中，再用<iframe>標籤引用這個頁面，這樣結構更清晰些。

　　同時，這兩種方法都存在一個共同的問題，就是地圖和div同時加載的問題。注意下圖右側的滾動條，上方是還未加載出來的地圖div（實際上是我把網絡關上了，正常狀況下，滾動條是一閃而過的，地圖能夠很快加載出來並將兩個div放到Expand控件中），而下方的表單div和echarts圖表div已經加載出來了（或兩個iframe），這樣就很尷尬..。能夠設置div的display屬性爲none以暫時解決這個問題。但是當div放到Expand控件後，display值依然是none，怎麼改變display的值又是一個問題。（未解決這個問題）

6、總結

　　所有代碼：

 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             "esri/widgets/Expand",
30             
31             "dojo/domReady!"],function(Map,MapView,TileLayer,Expand){
32                 var mapTileLayer=new TileLayer({
33                     url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
34                 });
35                 var map=new Map({
36                     layers:[mapTileLayer]
37                 });
38                 
39                 var view=new MapView({
40                     container:"viewDiv",
41                     map:map,
42                     center:[118.79647, 32.05838],  //南京城區
43                     zoom:10
44                 });    
45                 
46                 //Expand承載表單div
47                 var div1Expand=new Expand({
48                     view:view,
49                     content:iframe_div1,
50                     expandIconClass:"esri-icon-edit",  //Expand按鈕符號
51                     expandTooltipe:"一個表單",  //鼠標懸停時顯示的提示
52                     expanded:false,  //默認摺疊（缺省）
53                 });
54                 view.ui.add(div1Expand,"top-left");
55                 
56                 //Expand承載echarts圖表div
57                 var div2Expand=new Expand({
58                     view:view,
59                     content:iframe_div2,
60                     expandIconClass:"esri-icon-pie-chart",  //Expand按鈕符號
61                     expandTooltipe:"一個echarts圖表",  //鼠標懸停時顯示的提示
62                     expanded:false,  //默認摺疊（缺省）
63                 });
64                 view.ui.add(div2Expand,"top-left");
65         });
66     </script>
67 </head>
68 
69 <body>
70     <div id="viewDiv"></div>
71     
72     <!-- 表單div -->
73     <iframe src="iframe_div1.html" id="iframe_div1" frameborder="0" style="width:210px;height:610px;background-color:rgba(255,255,255,0.8);"></iframe>
74     
75     <!-- echarts圖表div -->
76     <iframe src="iframe_div2.html" id="iframe_div2" frameborder="0" style="width:650px;height:400px;background-color:rgba(255,255,255,0.8);"></iframe>
77 </body>
78 </html>

主頁面

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title></title>
 5     
 6     <!-- 新 Bootstrap4 核心 CSS 文件 -->
 7     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
 8     <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
 9     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
10     <!-- popper.min.js 用於彈窗、提示、下拉菜單 -->
11     <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
12     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
13     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
14 </head>
15 
16 <body>
17     <!-- 表單div -->
18     <div id="div1" style="width:200px;">
19         <h3>這是一個表單</h3>
20         <form>
21             <div class="form-group">
22                 <label for="name">景點名稱：</label>
23                 <input type="text" class="form-control" id="name" autocomplete="off">
24             </div>
25             <div class="form-group">
26                 <label for="date">遊玩日期：</label>
27                 <input type="text" class="form-control" id="date" autocomplete="off">
28             </div>
29             <div class="form-group">
30                 <label for="money">花費：</label>
31                 <input type="text" class="form-control" id="money" autocomplete="off">
32             </div>
33             <div class="form-group">
34                 <label for="company">同行：</label>
35                 <input type="text" class="form-control" id="company" autocomplete="off">
36             </div>
37             <div class="form-group">
38                 <label for="feeling">感覺：</label>
39                 <textarea class="form-control" rows="5" id="feeling"></textarea>
40                 <input type="button" class="btn btn-info" value="一個button" id="btnLight">
41             </div>
42         </form>
43     </div>
44 </body>
45 </html>

iframe_div1.html

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title></title>
 5         
 6     <!-- 在JS API引入以前 引入 echarts -->
 7     <script src="echarts.js"></script>
 8 </head>
 9 
10 <body>
11     <!-- echarts圖表div -->
12     <div id="div2" style="width:600px;height:370px;">
13         <script>
14             var myChart = echarts.init(document.getElementById('div2'));
15             option = {
16                 title: {
17                     text: '06-16 ~ 07-16 9:30am 各景區月平均人數',
18                     x: 'center'
19                 },
20                 tooltip: {
21                     trigger: 'item',
22                     formatter: "{a} <br/>{b} : {c} ({d}%)"
23                 },
24                 legend: {
25                     x: 'center',
26                     y: 'bottom',
27                     data: ['夫子廟', '中山陵', '雨花臺', '總統府', '玄武湖', '紅山森林動物園', '侵華日軍南京大屠殺遇難同胞記念館']
28                 },
29                 toolbox: {
30                    show: true,
31                    feature: {
32                        mark: { show: true },
33                        dataView: { show: true, readOnly: false },
34                        magicType: {
35                            show: false,
36                            type: ['pie', 'funnel']
37                        },
38                        restore: { show: false },
39                        saveAsImage: { show: false }
40                    }
41                 },
42                 calculable: true,
43                 series: [
44                     {
45                         // name:'面積模式',
46                         type: 'pie',
47                         radius: [40, 150],
48                         center: ['50%', '50%'],
49                         roseType: 'area',
50                         data: [
51                             { value: 10062, name: '夫子廟' },
52                             { value: 4076, name: '中山陵' },
53                             { value: 2362, name: '雨花臺' },
54                             { value: 230, name: '總統府' },
55                             { value: 837, name: '玄武湖' },
56                             { value: 396, name: '紅山森林動物園' },
57                             { value: 82, name: '侵華日軍南京大屠殺遇難同胞記念館' },
58                         ]
59                     }
60                 ]
61             };
62             myChart.setOption(option);
63         </script>
64     </div>
65 </body>
66 </html>