关于ArcGIS API for JavaScript中basemap的总结介绍（一）

实际上basemap这个概念并不只在arcgis中才有，在Python中有一个matplotlib basemap toolkit（https://pypi.python.org/pypi/basemap），是用来实现地理信息可视化的。其中，matplotlib是Python常用的数据绘制包，basemap是matplotlib的一个子包，用来进行地图绘制。本文所指的basemap是指esri提供的基础底图图层。

正式使用basemap是在前一阵做webgis开发的时候，需要在自己的矢量图层下面加一个底图图层，发现网上的相关文档不多，所以整理了一下帮助文档和demo，分享给大家。

首先，看一下arcgis帮助文档中对GIS basemap的介绍（http://resources.arcgis.com/zh-cn/help/main/10.1/index.html#/na/00s500000017000000/），因为重点介绍arcgis API，所以关于arcmap的操作方法和步骤不再赘述，只是简单介绍一下基础底图的概念：

　　底图图层属于一类地图图层，提供了一个可显示动态操作信息的框架。底图显示性能非常强大。由于底图图层相对稳定，不常发生变化，因此其显示只需计算一次，然后便可以多次重复使用。首次以特定的地图比例访问某个区域时，会对底图图层的显示进行计算。以后再以此地图比例访问该区域时，可调出该显示。众多 ArcMap 应用程序中都包括可用于显示和使用操作性信息、观测值和从分析模型中获取的信息的底图。底图用于位置参考，并为用户提供叠加或聚合业务图层、执行任务以及可视化地理信息的框架。底图是执行所有后续操作和地图制图的基础，它为地理信息的使用提供了环境和框架。底图相对稳定，并且在典型设置下，并不需要经常更新。此外，底图常常可在多种地图比例下使用。在各种地图比例范围内，底图都可以描绘出对应的内容。

接下来，重点介绍一下arcgis API for JS中esri提供的已有的17种basemap（包括"satellite","hybrid","streets","topo","osm"和"national-geographic"等等），包括代码和示例。

　在下载的arcgis_js_api包中有一个basemaps.js文件（路径为arcgis_js_api\3.17\esri），里面定义了esri提供的全部的basemap，下面贴出了这个js文件中的详细代码：

 // All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 // See http://js.arcgis.com/3.17/esri/copyright.txt for details.
 //>>built
 define("esri/basemaps", ["require", "dojo/has", "./kernel", "dojo/i18n!./nls/jsapi"], function(a, c, d, b) {
     a = {
         streets: {
             title: b.basemaps.streets,
             thumbnailUrl: a.toUrl("./images/basemap/streets.jpg"),
             itemId: "d8855ee4d3d74413babfb0f41203b168",
             baseMapLayers: [{
                     url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
                 }
             ]
         },
         satellite: {
             title: b.basemaps.satellite,
             thumbnailUrl: a.toUrl("./images/basemap/satellite.jpg"),
             itemId: "86de95d4e0244cba80f0fa2c9403a7b2",
             baseMapLayers: [{
                     url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
                 }
             ]
         },
         hybrid: {
             title: b.basemaps.hybrid,
             thumbnailUrl: a.toUrl("./images/basemap/hybrid.jpg"),
             itemId: "413fd05bbd7342f5991d5ec96f4f8b18",
             baseMapLayers: [{
                     url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
                 }, {
                     url: "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer",
                     isReference: !0
                 }
             ]
         },
         terrain: {
             title: b.basemaps.terrain,
             thumbnailUrl: a.toUrl("./images/basemap/terrain.jpg"),
             itemId: "aab054ab883c4a4094c72e949566ad40",
             baseMapLayers: [{
                     url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
                 }, {
                     url: "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer",
                     isReference: !0
                 }
             ]
         },
         topo: {
             title: b.basemaps.topo,
             thumbnailUrl: a.toUrl("./images/basemap/topo.jpg"),
             itemId: "6e03e8c26aad4b9c92a87c1063ddb0e3",
             baseMapLayers: [{
                     url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
                 }
             ]
         },
         gray: {
             title: b.basemaps.gray,
             thumbnailUrl: a.toUrl("./images/basemap/gray.jpg"),
             itemId: "8b3b470883a744aeb60e5fff0a319ce7",
             baseMapLayers: [{
                     url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"
                 }, {
                     url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer",
                     isReference: !0
                 }
             ]
         },
         "dark-gray": {
             title: b.basemaps["dark-gray"],
             thumbnailUrl: a.toUrl("./images/basemap/dark-gray.jpg"),
             itemId: "da65bacab5bd4defb576f839b6b28098",
             baseMapLayers: [{
                     url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer"
                 }, {
                     url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Reference/MapServer",
                     isReference: !0
                 }
             ]
         },
         oceans: {
             title: b.basemaps.oceans,
             thumbnailUrl: a.toUrl("./images/basemap/oceans.jpg"),
             itemId: "48b8cec7ebf04b5fbdcaf70d09daff21",
             baseMapLayers: [{
                     url: "http://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer"
                 }, {
                     url: "http://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer",
                     isReference: !0
                 }
             ]
         },
         "national-geographic": {
             title: b.basemaps["national-geographic"],
             thumbnailUrl: a.toUrl("./images/basemap/national-geographic.jpg"),
             itemId: "509e2d6b034246d692a461724ae2d62c",
             baseMapLayers: [{
                     url: "http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"
                 }
             ]
         },
         osm: {
             title: b.basemaps.osm,
             thumbnailUrl: a.toUrl("./images/basemap/osm.jpg"),
             itemId: "5d2bfa736f8448b3a1708e1f6be23eed",
             baseMapLayers: [{
                     type: "OpenStreetMap"
                 }
             ]
         },
         "dark-gray-vector": {
             title: b.basemaps["dark-gray"],
             thumbnailUrl: a.toUrl("./images/basemap/dark-gray.jpg"),
             itemId: "850db44b9eb845d3bd42b19e8aa7a024",
             baseMapLayers: [{
                     url: "http://www.arcgis.com/sharing/rest/content/items/850db44b9eb845d3bd42b19e8aa7a024/resources/styles/root.json",
                     type: "VectorTile"
                 }
             ]
         },
         "gray-vector": {
             title: b.basemaps.gray,
             thumbnailUrl: a.toUrl("./images/basemap/gray.jpg"),
             itemId: "0e02e6f86d02455091796eaae811d9b5",
             baseMapLayers: [{
                     url: "http://www.arcgis.com/sharing/rest/content/items/0e02e6f86d02455091796eaae811d9b5/resources/styles/root.json",
                     type: "VectorTile"
                 }
             ]
         },
         "streets-vector": {
             title: b.basemaps.streets,
             thumbnailUrl: a.toUrl("./images/basemap/streets.jpg"),
             itemId: "4e1133c28ac04cca97693cf336cd49ad",
             baseMapLayers: [{
                     url: "http://www.arcgis.com/sharing/rest/content/items/4e1133c28ac04cca97693cf336cd49ad/resources/styles/root.json",
                     type: "VectorTile"
                 }
             ]
         },
         "topo-vector": {
             title: b.basemaps.topo,
             thumbnailUrl: a.toUrl("./images/basemap/topo.jpg"),
             itemId: "6f65bc1351b7411588a8cb43fe23dad7",
             baseMapLayers: [{
                     url: "http://www.arcgis.com/sharing/rest/content/items/6f65bc1351b7411588a8cb43fe23dad7/resources/styles/root.json",
                     type: "VectorTile"
                 }
             ]
         },
         "streets-night-vector": {
             title: b.basemaps["streets-night-vector"],
             thumbnailUrl: a.toUrl("./images/basemap/streets-night.jpg"),
             itemId: "bf79e422e9454565ae0cbe9553cf6471",
             baseMapLayers: [{
                     url: "http://www.arcgis.com/sharing/rest/content/items/bf79e422e9454565ae0cbe9553cf6471/resources/styles/root.json",
                     type: "VectorTile"
                 }
             ]
         },
         "streets-relief-vector": {
             title: b.basemaps["streets-relief-vector"],
             thumbnailUrl: a.toUrl("./images/basemap/streets-relief.jpg"),
             itemId: "2e063e709e3446459f8538ed6743f879",
             baseMapLayers: [{
                     url: "http://www.arcgis.com/sharing/rest/content/items/2e063e709e3446459f8538ed6743f879/resources/styles/root.json",
                     type: "VectorTile"
                 }
             ]
         },
         "streets-navigation-vector": {
             title: b.basemaps["streets-navigation-vector"],
             thumbnailUrl: a.toUrl("./images/basemap/streets-navigation.jpg"),
             itemId: "dcbbba0edf094eaa81af19298b9c6247",
             baseMapLayers: [{
                     url: "http://www.arcgis.com/sharing/rest/content/items/dcbbba0edf094eaa81af19298b9c6247/resources/styles/root.json",
                     type: "VectorTile"
                 }
             ]
         }
     };
     c("extend-esri") && (d.basemaps = a);
     return a
 });

(basemaps.js)

　然后是官方帮助文档中对这17种basemap的简单介绍(https://developers.arcgis.com/javascript/3/jsapi/esri.basemaps-amd.html)：

Name	Type	Summary
dark-gray	Object	The Dark Gray Canvas basemap is designed to be used as a soothing background map for overlaying and focus attention on other map layers.
dark-gray-vector	Object	This vector tile layer provides a detailed basemap for the world featuring a neutral background style with minimal colors, labels, and features.
gray	Object	The Light Gray Canvas basemap is designed to be used as a neutral background map for overlaying and emphasizing other map layers.
gray-vector	Object	This vector tile layer provides a detailed basemap for the world featuring a neutral background style with minimal colors, labels, and features.
hybrid	Object	The World Imagery map is a detailed imagery map layer and labels that is designed to be used as a basemap for various maps and applications.
national-geographic	Object	The National Geographic basemap is designed to be used as a general reference map for informational and educational purposes.
oceans	Object	The Ocean Basemap is designed to be used as a basemap by marine GIS professionals and as a reference map by anyone interested in ocean data.
osm	Object	The OpenStreetMap is a community map layer that is designed to be used as a basemap for various maps and applications.
satellite	Object	The World Imagery map is a detailed imagery map layer that is designed to be used as a basemap for various maps and applications.
streets	Object	The Streets basemap presents a multiscale street map for the world.
streets-navigation-vector	Object	This vector tile layer provides a detailed basemap for the world featuring a custom navigation map style.
streets-night-vector	Object	This vector tile layer provides a detailed basemap for the world featuring a custom "night time" street map style.
streets-relief-vector	Object	This vector tile layer provides a detailed basemap for the world featuring a classic Esri street map style designed for use with a relief map.
streets-vector	Object	This vector tile layer provides a detailed basemap for the world featuring a classic Esri street map style.
terrain	Object	The Terrain with Labels basemap is designed to be used to overlay and emphasize other thematic map layers.
topo	Object	The Topographic map includes boundaries, cities, water features, physiographic features, parks, landmarks, transportation, and buildings.
topo-vector	Object	This vector tile layer provides a detailed basemap for the world featuring a classic Esri topographic map style designed for use with a relief map.

　最后，对于GIS开发人员来说，在webgis开发中如果需要使用esri提供的basemap，就可以直接在脚本中通过指定Map构造函数参数中的basemap的值来引用相应的底图图层。下面写了一段代码，可以新建一个html文件，把这段代码拷进去，然后可以在浏览器中运行查看地图显示效果。将代码第20行中的“topo”改成上面表格中其它basemap的名字，可以查看相应basemap的实际效果。

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>Basemap Introduction</title>
     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
     <style>
         html, body, #mapDiv {
             padding: 0;
             margin: 0;
             height: 100%;
         }
     </style>
     <script src="http://js.arcgis.com/3.9/"></script>
     <script>
         require(["esri/map","dojo/domReady!"], function (Map) {
             var map=new Map("mapDiv",{
                 center:[120,32],
                 zoom:5,
                 basemap:"topo"
             });
         });
     </script>
 </head>
 <body class="tundra">
     <div id="mapDiv"></div>
 </body>
 </html>

　　我通过上述方式改动代码并依次运行程序，发现还是有点问题，即这17种basemap中只有8种可以通过上述代码的这种方式调用，其余的不能运行。比如，我把“topo”改成“topo-vector”后运行程序，浏览器中地图不能显示，控制台提示信息是Map.setBasemap: Unable to find basemap definition for: "topo-vector". Try one of these: streets,satellite,hybrid,topo,gray,oceans,national-geographic,osm。后来有查文档和求助大神，不过还是没搞通其余的basemap应该怎么调用，比较遗憾。烦请有知道的朋友告诉我一下，我也要继续研究一下，搞懂之后我再写个续篇吧。

　　下面是这8种basemap（national-geographic,gray,hybrid,oceans,osm,satellite,streets,topo）的运行效果示例：

national-geographic
gray
hybrid
oceans
osm
satellite
streets
topo