创建一幅地图
SuperMap iServer 发布的地图
在准备章节，已经新建了一个 HTML 页面，在页面中继续添加如下代码以加入一幅地图：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.js"></script>
<script type="text/javascript" src="http://iclient.supermap.io/dist/leaflet/iclient9-leaflet.js"></script>
</head>
<body>
// 地图显示的div
<div id="map" style="position:absolute;left:0px;right:0px;width:800px;height:500px;"></div>
</body>
</html>
以加入 SuperMap iServer 发布的世界地图为例，在 <script> 中添加代码，初始化地图信息：
var url ="http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
// 初始化地图信息
var map = L.map('map', {
crs: L.CRS.NonEarthCRS({
bounds: L.bounds([48.4, -7668.25],[8958.85, -55.58]),
origin: L.point(48.4,-55.58)
}),
center: [-4500, 4000],
maxZoom: 18,
zoom: 1
});
// 添加图层
L.supermap.tiledMapLayer(url, {noWrap: true}).addTo(map);
第三方地图
SuperMap iClient for Leaflet 对多种互联网地图信息进行了封装，例如百度地图、天地图等。以天地图为例，SuperMap iClient for Leaflet 提供了 tiandituTileLayer，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_tiandituLayer_mecartor"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/include-leaflet.js"></script>
<script type="text/javascript">
var map = L.map('map', {
center: [0, 0],
zoom: 0
});
L.supermap.tiandituTileLayer({layerType: "img"}).addTo(map); // 添加天地图图层
</script>
</body>
</html>
Supermap iClient for Leaflet 还提供了百度地图图层 baiduTileLayer、超图云地图图层 cloudTileLayer。完整示例请访问 http://iclient.supermap.io/examples/leaflet/examples.html#mapping