ArcGIS Server開發教程系列（8）ArcGIS API for Javascript-控件（小部件）

時間 2019-11-29

標籤 arcgis server 開發教程系列 api javascript 控件部件欄目 JavaScript 简体版

原文原文鏈接

1. 鷹眼javascript

OverviewMap小部件用於在其關聯的主地圖內較清楚的當前鳥瞰圖的範圍。當主地圖範圍變化時，鷹眼圖會自動在其空間內更新範圍以保持和地圖的當前範圍保持一致，當鷹眼圖空間的地圖範圍變化時，主地圖的顯示範圍也會變化，主地圖範圍在OverviewMap控件中以矩形表示。css

構造方法：esri.dijit.OverviewMap (params, srcNodeRef)html 構造方法在建立一個鷹眼圖的時候須要傳入關聯的地圖對象和一個用於呈現鷹眼圖控件的HTML元素，該元素可選，若是沒有設置該HTML元素，將呈如今地圖對象上，另外還包括不少可選參數，如下幾個爲經常使用的可選參數：java
attachTojson	指定鷹眼圖附加到地圖的那個角落。參數值是"top-right","bottom-right","bottom-left" 和"top-left".api
baseLayeride	指定鷹眼圖空間地圖的底圖函數
expandFactorui	設置鷹眼地圖控件和矩形之間的比例，默認值是2spa
opacity	指定鷹眼圖控件上矩形的透明度
hide	隱藏鷹眼圖控件
Show	顯示鷹眼圖控件
startup	當構造函數建立成功後，使用該方法後就能夠進行用戶交互了（幾乎全部的控件（Map除外）都有該方法
destroy	當應用程序再也不須要比例尺控件的時候，摧毀該對象。（幾乎全部的控件都有該方法）

n 關於startup方法

在Dijit一系列生命週期中，一個重要方法是啓動方法startup. 這個方法會在DOM節點被建立並添加到網頁以後執行，同時在這個方法也會等待當前小部件中所包含的子控件被建立並正確啓動以後才執行。

示例：

var overviewMapDijit = new esri.dijit.OverviewMap({

map: map,

visible: true

});

overviewMapDijit.startup();

須要提早引用

dojo.require("esri.dijit.OverviewMap");

2. 比例尺

Scalebar用於在地圖上或者一個指定的HTML節點中顯示地圖的比例尺信息。

構造方法：esri.dijit. Scalebar(p (params, srcNodeRef)

構造方法在建立一個比例尺控件的時候須要傳入關聯的地圖對象和一個用於呈現比例尺控件的HTML元素，該元素可選，若是沒有設置該HTML元素，將呈如今地圖對象上。另外還包括不少可選參數，如下幾個爲經常使用的可選參數：

attachTo	比例尺控件在其關聯地圖上位置。參數值是"top-right","bottom-right","bottom-left" 和"top-left".
scalebarUnit	比例尺控件的單位
屬性	說明
hide	隱藏比例尺控件
Show	顯示比例尺控件

示例

var scalebar = new esri.dijit.Scalebar({

map: map,

// "dual" displays both miles and kilmometers

// "english" is the default, which displays miles

// use "metric" for kilometers

scalebarUnit: "dual"

});

須要提早引用

dojo.require("esri.dijit.Scalebar");

3. 書籤

書籤控件用於管理用戶建立的地圖書籤（Bookmark.MapBookmark），提供新建書籤、定位到書籤和刪除書籤的功能。

構造方法：esri.dijit. Bookmarks (params, srcNodeRef) 構造方法在建立一個書籤控件的時候須要傳入關聯的地圖對象和一個用於呈現書籤控件的HTML元素。另外還包括不少可選參數，如下幾個爲經常使用的可選參數：
bookmarks	在建立的時候用已有的書籤對象初始化書籤控件
editable	書籤控件是否能夠編輯
方法	說明
addBookmark	給書籤控件添加一個書籤
hide	隱藏書籤控件
removeBookmark	從書籤控件中移除一個書籤
show	顯示書籤控件
toJson	將書籤對象返回一組json
屬性	說明
bookmarks	返回書籤控件的全部書籤
事件	說明
onClick	擋在一個書籤上編輯的時候發生
onEdit	當編輯書籤的時候發生
onRemove	當移除一個書籤的時候發生

示例

// specify "editable" as true to enable editing

var bookmark = new esri.dijit.Bookmarks({

map: map,

bookmarks: [],

editable: true

}, dojo.byId('bookmark'));

須要提早引用

dojo.require("esri.dijit.Bookmarks");

固然，還須要一個div，例子參考最後的，放在界面的左邊，將來能夠放更多東西。

4. 圖例

Legend 控件用於動態顯示所有或者部分圖層的標籤和符號信息，圖例控件支持下面四種圖層:

ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer 和KMLLayer

構造方法：esri.dijit. Legend (params, srcNodeRef) 構造方法在建立一個圖例的時候須要傳入關聯的地圖對象和一個用於呈現圖例控件的HTML元素。另外還包括不少可選參數，如下幾個爲經常使用的可選參數：
autoUpdate	當地圖的比例尺發生變化或者圖層發生變化的時候，圖例控件是否自動更新
respectCurrentMapScale	圖例控件是否自動更新
layerInfos	指定一個圖層子集用於在圖例中顯示
arrangement	指定圖例在HTML元素中的對其方式
方法	說明
refresh	當在構造函數中用了layerInfos，用這個方法刷新圖例以替換構造函數中的圖層

示例

var legendLayers = [];

legendLayers.push({ layer: layer, title: 'test' });

map.on('layers-add-result', function () {

var legend = new Legend({

map: map,

layerInfos: legendLayers

}, "legendDiv");

legend.startup();

});

須要提早引用

dojo.require("esri.dijit.Legend");

固然，還須要一個div，例子參考最後的，放在界面的右邊。

完整代碼以下：

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>地圖-Test </title>

         <link href="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/dojo/dijit/themes/tundra/tundra.css"

                rel="stylesheet" type="text/css" />

            <link href="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/esri/css/esri.css"

                rel="stylesheet" type="text/css" />

                <script type="text/javascript">                    var dojoConfig = { parseOnLoad: true };</script>

                <script src="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/init.js" type="text/javascript"></script>

        <style type="text/css"> .MapClass { width:900px; height:600px; border:1px solid #000;} </style>

    <style>

      html, body {

        height: 100%; width: 100%;

        margin: 0; padding: 0;

      }

      body{

        background-color: #fff; overflow:hidden;

        font-family: sans-serif;

      }

      #header {

        padding-top: 4px;

        padding-right: 15px;

        background-color:#444;

        color:#fff;

        font-size:16pt; text-align:right;font-weight:bold;

        height:55px;

      }

      #subheader {

        font-size:small;

        color: #cfcfcf;

        text-align:right;

      }

      #leftPane{

        margin: 0;

        padding: 5px;

        width: 250px;

        color: #3C1700;

        background-color: #fff;

      }

 

      .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }

      #ds-h div { width: 100%; }

      #ds-l div { height: 100%; }

      #ds .o1 { filter: alpha(opacity=10); opacity: .1; }

      #ds .o2 { filter: alpha(opacity=8); opacity: .08; }

      #ds .o3 { filter: alpha(opacity=6); opacity: .06; }

      #ds .o4 { filter: alpha(opacity=4); opacity: .04; }

      #ds .o5 { filter: alpha(opacity=2); opacity: .02; }

      #ds .h1 { height: 1px; }

      #ds .h2 { height: 2px; }

      #ds .h3 { height: 3px; }

      #ds .h4 { height: 4px; }

      #ds .h5 { height: 5px; }

      #ds .v1 { width: 1px; }

      #ds .v2 { width: 2px; }

      #ds .v3 { width: 3px; }

      #ds .v4 { width: 4px; }

      #ds .v5 { width: 5px; }

    </style>

 

    <style>

        html, body {

          height: 97%;

          width: 98%;

          margin: 1%;

        }

 

        #rightPane {

          width: 20%;

        }

 

        #legendPane {

          border: solid #97DCF2 1px;

        }

  </style>

   

    <script type="text/javascript">

        dojo.require("dijit.layout.BorderContainer");

        dojo.require("dijit.layout.ContentPane");

 

        dojo.require("esri.map");

        dojo.require("esri.layers.FeatureLayer");

 

        dojo.require("esri.dijit.Bookmarks");

 

        dojo.require("esri.dijit.OverviewMap");

 

        dojo.require("esri.dijit.Scalebar");

 

        dojo.require("esri.dijit.Legend");

 

        var map;

        var editorWidget;

 

        dojo.addOnLoad(function () {

            map = new esri.Map("map");

            var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/test/MapServer");

                map.addLayer(layer);

 

            // Create the bookmark widget

            // specify "editable" as true to enable editing

            var bookmark = new esri.dijit.Bookmarks({

                map: map,

                bookmarks: [],

                editable: true

            }, dojo.byId('bookmark'));

 

            var scalebar = new esri.dijit.Scalebar({

                map: map,

                // "dual" displays both miles and kilmometers

                // "english" is the default, which displays miles

                // use "metric" for kilometers

                scalebarUnit: "dual"

            });

 

            var overviewMapDijit = new esri.dijit.OverviewMap({

                map: map,

                visible: true

            });

            overviewMapDijit.startup();

 

            var legendLayers = [];

            legendLayers.push({ layer: layer, title: 'test' });

 

            map.on('layers-add-result', function () {

                var legend = new Legend({

                    map: map,

                    layerInfos: legendLayers

                }, "legendDiv");

                legend.startup();

            });

    </script>

  </head>

 

  <body class="claro">

    <div id="mainWindow"

         data-dojo-type="dijit.layout.BorderContainer"

         data-dojo-props="design:'headline',gutters:false"

         style="width: 1200px; height: 800px; margin: 0;">

      <div id="leftPane"

           data-dojo-type="dijit.layout.ContentPane"

           data-dojo-props="region:'left'">

       

        <div id="bookmark"></div>       

      </div>

      <div id="rightPane"

       data-dojo-type="dijit/layout/ContentPane"

       data-dojo-props="region:'right'">

 

    <div data-dojo-type="dijit/layout/AccordionContainer">

      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"

           data-dojo-props="title:'圖例', selected:true">

        <div id="legendDiv"></div>

      </div>

    </div>

  </div>

 

      <div id="map" class="shadow"

           data-dojo-type="dijit.layout.ContentPane"

           data-dojo-props="region:'center'">

 

        <div id="ds"> <!-- drop shadow divs -->

          <div id="ds-h">

            <div class="ds h1 o1"></div>

            <div class="ds h2 o2"></div>

            <div class="ds h3 o3"></div>

            <div class="ds h4 o4"></div>

            <div class="ds h5 o5"></div>

          </div>

          <div id="ds-l">

            <div class="ds v1 o1"></div>

            <div class="ds v2 o2"></div>

            <div class="ds v3 o3"></div>

            <div class="ds v4 o4"></div>

            <div class="ds v5 o5"></div>

          </div>

        </div> <!-- end drop shadow divs -->

           

      </div>

    </div>

 

  </body>

</html>