| 修改日期 | 修改人 | 备注 |
| 2017-06-23 15:02:50[当前版本] | 李豪山 | . |
| 2017-06-23 14:59:05 | 李豪山 | CREAT |
实际上basemap这个概念并不只在arcgis中才有，在Python中有一个matplotlib basemap toolkit（https://pypi.python.org/pypi/basemap），是用来实现地理信息可视化的。其中，matplotlib是Python常用的数据绘制包，basemap是matplotlib的一个子包，用来进行地图绘制。本文所指的basemap是指esri提供的基础底图图层。
首先，看一下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.x\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)
最后，对于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>
下面是常用basemap（national-geographic,gray,hybrid,oceans,osm,satellite,streets,topo）的运行效果示例：
| national- geographic |
|
|
gray |
|
|
hybrid |
|
|
oceans |
|
|
osm |
|
|
satellite |
|
|
streets |
|
|
topo |
|