使用 iClient Classic 入门

发送反馈

SuperMap iClient Classic 开发流程如下：

Ajax 开发流程

图1 SuperMap iClient Classic 开发流程

下面我们将介绍如何使用 SuperMap iClient Classic 来构建一个简单的地图应用。

第一步：下载并解压库文件

  1. 下载 SuperMap iClient Classic 解压包文件，解压安装包文件于本地磁盘。下载地址：http://support.supermap.com.cn/product/iClient.aspx
  2. 安装包目录结构如下：
     

    图2 SuperMap iClient Classic  产品包结构

第二步：创建 HTML 显示页面

在磁盘上任意位置新建文件夹并自定义该文件夹，本例命名为“MyFirst”；在 "MyFirst”文件夹下用文本编辑工具（如 NotePad++）新建一个“GettingStarted.html”的 html 页面，注意将该 html 页面保存为 UTF-8 编码格式，并添加入以下代码：

HTML   
<!DOCTYPE HTML>
<html>
<body onload="init()">
    <!--地图显示的div-->
    <div id="map" style="position:absolute;left:0px;right:0px;width:800px;height:500px;" >             
    </div>    
</body>
</html>

第三步：引用资源文件

分两步引用资源：

  1. 将第一步得到的 resource 文件夹拷贝到“MyFirst”文件夹下；

  2. 拷贝 libs 文件夹到“MyFirst”文件夹下；

当然，libs 和 resource 文件夹也可以放在其他位置，这时需要在下一步的代码中修改引用脚本的相对路径。

第四步：添加代码，实现访问地图服务：

在<html>和<body>之间添加如下代码，实现创建地图功能。

JavaScript   
<head>   
    <title>SuperMap iClient for JavaScript:TiledDynamicRESTLayer</title>
    <!--引用需要的脚本-->
    <script src="./libs/SuperMap.Include.js"></script>
    <script type="text/javascript">
    //声明变量 map、layer、url
    var map, layer,
    url = "http://localhost:8090/iserver/services/map-world/rest/maps/World";
    //创建地图控件
    function init() {
        map = new SuperMap.Map ("map");
        //创建分块动态 REST 图层，该图层显示 iserver 8C 服务发布的地图,
        //其中"world"为图层名称，url 图层的服务地址，{transparent: true}设置到 url 的可选参数
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, 
        null, {maxResolution:"auto"});
        layer.events.on({"layerInitialized": addLayer});          
    }             
    function addLayer() {
        //将 Layer 图层加载到 Map 对象上
        map.addLayer(layer);
        //出图，map.setCenter 函数显示地图
        map.setCenter(new SuperMap.LonLat(0, 0), 0);        
    }
    </script>
</head>

第五步：使用浏览器运行查看

启动 SuperMap iServer 并运行 GettingStarted.html 文件，浏览地图数据。

图3 访问 SuperMap iServer 服务的世界地图