创建一幅地图

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

results matching ""

    No results matching ""