实际上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文件中的详细代码：
1 // All material copyright ESRI, All Rights Reserved, unless otherwise specified. 2 // See http://js.arcgis.com/3.17/esri/copyright.txt for details. 3 //>>built 4 define("esri/basemaps", ["require", "dojo/has", "./kernel", "dojo/i18n!./nls/jsapi"], function(a, c, d, b) { 5 a = { 6 streets: { 7 title: b.basemaps.streets, 8 thumbnailUrl: a.toUrl("./images/basemap/streets.jpg"), 9 itemId: "d8855ee4d3d74413babfb0f41203b168", 10 baseMapLayers: [{ 11 url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" 12 } 13 ] 14 }, 15 satellite: { 16 title: b.basemaps.satellite, 17 thumbnailUrl: a.toUrl("./images/basemap/satellite.jpg"), 18 itemId: "86de95d4e0244cba80f0fa2c9403a7b2", 19 baseMapLayers: [{ 20 url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" 21 } 22 ] 23 }, 24 hybrid: { 25 title: b.basemaps.hybrid, 26 thumbnailUrl: a.toUrl("./images/basemap/hybrid.jpg"), 27 itemId: "413fd05bbd7342f5991d5ec96f4f8b18", 28 baseMapLayers: [{ 29 url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" 30 }, { 31 url: "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer", 32 isReference: !0 33 } 34 ] 35 }, 36 terrain: { 37 title: b.basemaps.terrain, 38 thumbnailUrl: a.toUrl("./images/basemap/terrain.jpg"), 39 itemId: "aab054ab883c4a4094c72e949566ad40", 40 baseMapLayers: [{ 41 url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer" 42 }, { 43 url: "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer", 44 isReference: !0 45 } 46 ] 47 }, 48 topo: { 49 title: b.basemaps.topo, 50 thumbnailUrl: a.toUrl("./images/basemap/topo.jpg"), 51 itemId: "6e03e8c26aad4b9c92a87c1063ddb0e3", 52 baseMapLayers: [{ 53 url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" 54 } 55 ] 56 }, 57 gray: { 58 title: b.basemaps.gray, 59 thumbnailUrl: a.toUrl("./images/basemap/gray.jpg"), 60 itemId: "8b3b470883a744aeb60e5fff0a319ce7", 61 baseMapLayers: [{ 62 url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer" 63 }, { 64 url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer", 65 isReference: !0 66 } 67 ] 68 }, 69 "dark-gray": { 70 title: b.basemaps["dark-gray"], 71 thumbnailUrl: a.toUrl("./images/basemap/dark-gray.jpg"), 72 itemId: "da65bacab5bd4defb576f839b6b28098", 73 baseMapLayers: [{ 74 url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer" 75 }, { 76 url: "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Reference/MapServer", 77 isReference: !0 78 } 79 ] 80 }, 81 oceans: { 82 title: b.basemaps.oceans, 83 thumbnailUrl: a.toUrl("./images/basemap/oceans.jpg"), 84 itemId: "48b8cec7ebf04b5fbdcaf70d09daff21", 85 baseMapLayers: [{ 86 url: "http://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer" 87 }, { 88 url: "http://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer", 89 isReference: !0 90 } 91 ] 92 }, 93 "national-geographic": { 94 title: b.basemaps["national-geographic"], 95 thumbnailUrl: a.toUrl("./images/basemap/national-geographic.jpg"), 96 itemId: "509e2d6b034246d692a461724ae2d62c", 97 baseMapLayers: [{ 98 url: "http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer" 99 } 100 ] 101 }, 102 osm: { 103 title: b.basemaps.osm, 104 thumbnailUrl: a.toUrl("./images/basemap/osm.jpg"), 105 itemId: "5d2bfa736f8448b3a1708e1f6be23eed", 106 baseMapLayers: [{ 107 type: "OpenStreetMap" 108 } 109 ] 110 }, 111 "dark-gray-vector": { 112 title: b.basemaps["dark-gray"], 113 thumbnailUrl: a.toUrl("./images/basemap/dark-gray.jpg"), 114 itemId: "850db44b9eb845d3bd42b19e8aa7a024", 115 baseMapLayers: [{ 116 url: "http://www.arcgis.com/sharing/rest/content/items/850db44b9eb845d3bd42b19e8aa7a024/resources/styles/root.json", 117 type: "VectorTile" 118 } 119 ] 120 }, 121 "gray-vector": { 122 title: b.basemaps.gray, 123 thumbnailUrl: a.toUrl("./images/basemap/gray.jpg"), 124 itemId: "0e02e6f86d02455091796eaae811d9b5", 125 baseMapLayers: [{ 126 url: "http://www.arcgis.com/sharing/rest/content/items/0e02e6f86d02455091796eaae811d9b5/resources/styles/root.json", 127 type: "VectorTile" 128 } 129 ] 130 }, 131 "streets-vector": { 132 title: b.basemaps.streets, 133 thumbnailUrl: a.toUrl("./images/basemap/streets.jpg"), 134 itemId: "4e1133c28ac04cca97693cf336cd49ad", 135 baseMapLayers: [{ 136 url: "http://www.arcgis.com/sharing/rest/content/items/4e1133c28ac04cca97693cf336cd49ad/resources/styles/root.json", 137 type: "VectorTile" 138 } 139 ] 140 }, 141 "topo-vector": { 142 title: b.basemaps.topo, 143 thumbnailUrl: a.toUrl("./images/basemap/topo.jpg"), 144 itemId: "6f65bc1351b7411588a8cb43fe23dad7", 145 baseMapLayers: [{ 146 url: "http://www.arcgis.com/sharing/rest/content/items/6f65bc1351b7411588a8cb43fe23dad7/resources/styles/root.json", 147 type: "VectorTile" 148 } 149 ] 150 }, 151 "streets-night-vector": { 152 title: b.basemaps["streets-night-vector"], 153 thumbnailUrl: a.toUrl("./images/basemap/streets-night.jpg"), 154 itemId: "bf79e422e9454565ae0cbe9553cf6471", 155 baseMapLayers: [{ 156 url: "http://www.arcgis.com/sharing/rest/content/items/bf79e422e9454565ae0cbe9553cf6471/resources/styles/root.json", 157 type: "VectorTile" 158 } 159 ] 160 }, 161 "streets-relief-vector": { 162 title: b.basemaps["streets-relief-vector"], 163 thumbnailUrl: a.toUrl("./images/basemap/streets-relief.jpg"), 164 itemId: "2e063e709e3446459f8538ed6743f879", 165 baseMapLayers: [{ 166 url: "http://www.arcgis.com/sharing/rest/content/items/2e063e709e3446459f8538ed6743f879/resources/styles/root.json", 167 type: "VectorTile" 168 } 169 ] 170 }, 171 "streets-navigation-vector": { 172 title: b.basemaps["streets-navigation-vector"], 173 thumbnailUrl: a.toUrl("./images/basemap/streets-navigation.jpg"), 174 itemId: "dcbbba0edf094eaa81af19298b9c6247", 175 baseMapLayers: [{ 176 url: "http://www.arcgis.com/sharing/rest/content/items/dcbbba0edf094eaa81af19298b9c6247/resources/styles/root.json", 177 type: "VectorTile" 178 } 179 ] 180 } 181 }; 182 c("extend-esri") && (d.basemaps = a); 183 return a 184 });
View Code (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的实际效果。
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Basemap Introductiontitle> 6 <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> 7 <style> 8 html, body, #mapDiv { 9 padding: 0; 10 margin: 0; 11 height: 100%; 12 } 13 style> 14 <script src="http://js.arcgis.com/3.9/">script> 15 <script> 16 require(["esri/map","dojo/domReady!"], function (Map) { 17 var map=new Map("mapDiv",{ 18 center:[120,32], 19 zoom:5, 20 basemap:"topo" 21 }); 22 }); 23 script> 24 head> 25 <body class="tundra"> 26 <div id="mapDiv">div> 27 body> 28 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 |  |