ArcGIS API For JavaScript 開發（二）基礎地圖

有了開發環境，接下來的就是實踐了，實踐是檢驗真理的惟一標準！

多多練習，不要以爲本身可以想的出來就萬事大吉了，仍是得動手作纔是最好的檢驗本身的能力。

---

基礎地圖，本節將經過arcgis api for javascript 實現——加載2D地圖、鷹眼、比例尺、圖例等基本的功能。

首先如何完成上面的功能？將用到哪些技術？哪些類？這些是咱們先必須知道的：

dojo需引入的esri/map 資源或者說是類吧： dojo.request("esri/map"); 這個資源是加載地圖的基本，Map類，繼承了Accessor；它的子類：WebMap , WebScene；

Since: ArcGIS API for JavaScript 4.0

The Map class contains properties and methods for storing, managing, and overlaying layers common to both 2D and 3D viewing. Layers can be added and removed from the map, but are rendered via a MapView (for viewing data in 2D) or a SceneView (for viewing data in 3D). Thus a map instance is a simple container that holds the layers, while the View is the means of displaying and interacting with a map's layers and basemap.

Map類包含用於存儲、管理和覆蓋在2D和3D視圖中常見的層的屬性和方法。能夠從地圖中添加和刪除圖層，可是經過MapView(在2D視圖中查看數據)或SceneView(用於在3D中查看數據)呈現。所以，映射實例是一個簡單的容器，它包含層，而視圖則是顯示和與映射層和basemap交互的方法。

A single map may be referenced by multiple views. This sample for example, contains a single Map that is visible in two separate views - one in 2D and the other in 3D. Because one map may be accessed by multiple views in the same application, all user interaction with a map's layers is handled on the View, not the Map.

單個映射能夠被多個視圖引用。例如，這個示例包含一個單獨的映射，它能夠在兩個單獨的視圖中顯示——一個在2D中，另外一個在3D視圖中。因爲同一個應用程序中能夠經過多個視圖訪問一個映射，因此在視圖中處理全部與map層的用戶交互，而不是映射。

An instance of Map is an essential component of the MapView and SceneView. A Map object should be created prior to a view so it can be passed into the map property of that view (e.g. MapView.map, SceneView.map).

---

 

加載地圖

Map的實例是MapView和SceneView的重要組件。應該在視圖以前建立一個Map對象，以便將其傳遞到該視圖的映射屬性(例如，MapView.map,SceneView.map)。

屬性

Name	Type	Summary	Class
allLayers	Collection<Layer>	地圖上全部圖層的集合	Map
basemap	Basemap	指定地圖	Map
declaredClass	String	The name of the class. more details	Accessor
ground	Ground	指定映射的表面屬性。	Map
layers	Collection<Layer>	操做層的集合	Map

方法

 

Name	Return Type	Summary	Class
add()		在圖層集合中添加一個圖層。	Map
addMany()		在圖層集合中添加一層或一組圖層。	Map
findLayerById()	Layer	返回一個基於給定層id的層。	Map
remove()	Layer	從層集合中移除指定的層。	Map
removeAll()	Layer[]	刪除全部層。	Map
removeMany()	Layer[]	刪除指定的層。	Map
reorder()	Layer	更改圖層的順序。	Map

 

 

其中咱們會用到的屬性和方法有：

它的構造函數： var map = new Map();

其用法有

一種是：

 require([ "esri/Map", "esri/views/MapView", "dojo/domReady!" ], function (Map, Mapview) { var map = new Map({ //basemap:"http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"  basemap: "streets" }); var view = new Mapview({ container: "viewDiv", map: map }); });

還有一種是：require("esri/map",function(Map){

var map = new Map("viewDiv",{ basemap: "streets" });

});

 

加載鷹眼

 鷹眼圖主要方法
構造方法：esri.dijit.OverviewMap (params, srcNodeRef)
構造方法在建立一個鷹眼圖的時候須要傳入關聯的地圖對象和一個用於呈現鷹眼圖控件的 HTML 元素，該元素可選，若是沒有設置該 HTML 元素，將呈如今地圖對象上，另外還包括不少可選參數，如下幾個爲經常使用的可選參數：

attachTo	指 定 鷹 眼 圖 附 加 到 地 圖 的 那 個 角 落 。 參 數 值 是"top-right","bottom-right","bottom-left" 和"top-left".
baseLayer	指定鷹眼圖空間地圖的底圖
expandFactor	設置鷹眼地圖控件和矩形之間的比例，默認值是 2
opacity	指定鷹眼圖控件上矩形的透明度

鷹眼圖屬性

屬性	說明
hide	隱藏鷹眼圖控件
Show	顯示鷹眼圖控件
startup	當構造函數建立成功後，使用該方法後就能夠進行用戶交互了（幾乎全部的控件（Map 除外）都有該方法
destroy	當應用程序再也不須要比例尺控件的時候，摧毀該對象。（幾乎全部的控件都有該方法）

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

用法：

function OverviewMap() { var over = { map: Map, attachTo: "bottom-right", color: "#D84E13", expandFactor:2, baseLayer:new esri.layers.ArcGISTiledMapServiceLayer(MapServer) }; var MapViewer = new esri.dijit.OverviewMap(over, dojo.byId("OverViewDiv")); MapViewer.startup(); }

 

// 鷹眼
  var overviewMapDijit = new OverviewMap({ map: map, // 必要的
  visible: true,    // 初始化可見，默認爲false
  attachTo: "bottom-right", // 默認右上角
  width: 310,   // 默認值是地圖高度的 1/4th
  height: 150, // 默認值是地圖高度的 1/4th
  opacity: .40,  // 透明度 默認0.5
  maximizeButton: true, // 最大化,最小化按鈕，默認false
  expandFactor: 0.4,    //概覽地圖和總覽圖上顯示的程度矩形的大小之間的比例。默認值是2，這意味着概覽地圖將至少是兩倍的大小的程度矩形。
  color: "red"  // 默認顏色爲#000000
 }); overviewMapDijit.startup();

 

加載比例尺

比例尺是經過Scalebar來實現的；

Scalebar 的主要方法
構造方法：esri.dijit. Scalebar(p (params, srcNodeRef)
構造方法在建立一個比例尺控件的時候須要傳入關聯的地圖對象和一個用於呈現比例尺控件的 HTML
元素，該元素可選，若是沒有設置該 HTML 元素，將呈如今地圖對象上。另外還包括不少可選參數，
如下幾個爲經常使用的可選參數：
attachTo 　　　　　　　　 比 例 尺 控 件 在 其 關 聯 地 圖 上 位 置 。 參 數 值 是"top-right","bottom-right","bottom-left" 和"top-left".
scalebarUnit 　　　　　　 比例尺控件的單位

屬性 　　說明
hide 　　隱藏比例尺控件
Show 　　顯示比例尺控件

用法：

function Scalebar() { var scalebar = new esri.dijit.Scalebar({ map: Map, attachTo: "top-right" }, dojo.byId("scaleBarDiv")); }

 

加載圖例

圖例

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

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

用法：

function Maplegend() { 　　 var legendPar = {map:Map, 　 arrangment: esri.dijit.Legend.ALIGN_RIGHT, 　 autoUpdate:true }; 　　var legendDijit = new esri.dijit.Legend(legendPar, "legendDiv"); 　　legendDijit.startup(); }

 

 

而後就是融合在一塊兒看看效果，比較單獨的知道仍是得用出來才行，執行咱們的實踐精神！

 

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>基礎地圖</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.12/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.12/"></script>
    <style> html, body { height: 97%; width: 98%; margin: 1%; padding: 0; } #rightPane { width:20%; } #legendPane { border:solid #97DCF2 1px; } </style>
    <script>
        var map; require([ "esri/map", "esri/dijit/OverviewMap", "esri/dijit/Scalebar", "esri/arcgis/utils", "esri/layers/FeatureLayer", "esri/dijit/Legend", "dojo/_base/array", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane", "dijit/layout/AccordionContainer", "dojo/domReady!" ], function ( Map, OverviewMap, Scalebar, arcgisUtils, FeatureLayer, Legend, arrayUtils, parser ) { parser.parse(); //建立地圖，並添加"topo"爲底圖
            map = new Map("map", { basemap: "topo", center: [-96.53, 38.374], zoom: 13, logo:false }); //新建rivers圖層
            var rivers = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); //新建waterbodies圖層
            var waterbodies = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); //把圖層加入到地圖
 map.addLayers([waterbodies, rivers]); //添加圖例
            map.on("layers-add-result", function (evt) { var layerInfo = arrayUtils.map(evt.layers, function (layer, index) { return { layer: layer.layer, title: layer.layer.name }; }); if (layerInfo.length > 0) { var legendDijit = new Legend({ map: map, layerInfos: layerInfo }, "legendDiv"); legendDijit.startup(); } }); //添加鷹眼圖
            var overviewMapDijit = new OverviewMap({ //設置鷹眼控件的地圖
 map: map, //設置是否可見
                visible: true, //鷹眼控件放置的位置
                attachTo: "bottom-left" }); overviewMapDijit.startup(); //添加比例尺
            var scalebar = new Scalebar({ map: map, //比例尺單位
                scalebarUnit: "dual", //放置的位置
                attachTo: "bottom-right" }); }); </script>

</head>
<body>
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin:0;">
        <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:'Legend',selected:true">
                    <div id="legendDiv"></div>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Pane 2'"> This pane could contain tools or additional content </div>
            </div>
        </div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
        </div>
        <div id="bookmarks"></div>
    </div>
</body>
</html>