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:,
 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: ,   // 默认值是地图高度的 1/4th
  height: , // 默认值是地图高度的 1/4th
  opacity: .,  // 透明度 默认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: %; width: %; margin: %; padding: ; }
        #rightPane {
            width:%;
        }
        #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: ,
                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 > ) {
                    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>