创建一幅地图
SuperMap iServer 发布的地图
在准备章节，已经新建了一个 HTML 页面，在页面中继续添加如下代码以创建一幅地图：
<script type="text/javascript" src="http://iclient.supermap.io/dist/openlayers/iclient9-openlayers.js"></script>
在页面中加入 SuperMap iServer 发布的世界地图，在 <script> 中添加如下代码，初始化地图信息：
var url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
// 初始化地图信息
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [0, 0],
zoom: 2,
projection: 'EPSG:4326'
})
});
// 添加图层
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: url,
wrapX: true
}),
projection: 'EPSG:4326'
});
map.addLayer(layer);
第三方地图
SuperMap iClient for OpenLayers 对多种互联网地图信息进行了封装，例如百度地图、天地图等。以天地图为例，SuperMap iClient for OpenLayers 提供了 tiandituSource。在页面中加入天地图，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_tiandituLayer_ll"></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-openlayers.js"></script>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [116.402, 39.905],
zoom: 5,
projection: "EPSG:4326"
}),
// 添加天地图图层
layers: [
new ol.layer.Tile({
source: new ol.source.Tianditu({
layerType: 'ter',
projection: "EPSG:4326"
});
}),new ol.layer.Tile({
source: new ol.source.Tianditu({
layerType: 'ter',
isLabel: true,
projection: "EPSG:4326"
});
})];
});
</script>
</body>
</html>
Supermap iClient for openlayers 还提供了百度地图图层 baiduTileLayer、超图云地图图层 cloudTileLayer。完整示例请访问http://iclient.supermap.io/examples/openlayers/examples.html#mapping