supermap 学习系列（一）——加载地图(rest方式)

最新推荐文章于 2026-03-29 09:11:13 发布

原创最新推荐文章于 2026-03-29 09:11:13 发布 · 9.8k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

超图

本文是SuperMap学习系列的第一部分，主要介绍如何通过REST方式加载地图。文章提供了一张加载后的地图效果展示。

学习笔记，方便以后查阅。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="json_parse.js"></script>
    <script src="toJSON.js"></script>
    <script src="libs/SuperMap.Include.js"></script>
    <script type="text/javascript">           
        var map, layer, vectorLayer, control, selectFeature;
        // 设置访问的GIS服务地址
        var url = "http://localhost:8090/iserver/services/map-ChinaTestWorkPlace/rest/maps/ChinaTest";
        function GetMap() {
            // 创建地图对象
            map = new SuperMap.Map("map");
            //control = new SuperMap.Control.MousePosition();     //该控件显示鼠标移动时，所在点的地理坐标。
            //map.addControl(control);  //添加控件
            // 创建图层对象
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });
            layer.events.on({ "layerInitialized": addLayer });            
        }
        // 加载图层
        function addLayer() {
            // 向Map添加图层
            map.addLayer(layer);
            map.setCenter(new SuperMap.LonLat(116.409749, 39.912344), 1);         
        }     
    </script>
</head>
<body onload="GetMap()">    
    <div id="map" style="height: 640px; width: 720px; border: 1px solid red; margin-left: auto; margin-right: auto;"></div>
</body>
</html>

效果图如下：

标签

#地图 #supermap #rest