1.5.3.2.2 创建一幅地图

优质

小牛编辑

129浏览

2023-12-01

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