使用 iClient for OpenLayers 浏览 iPortal 地图

发送反馈

使用 iClient for OpenLayers 进行开发的一般流程为：

1. 获取 OpenLayers、SuperMap iClient for OpenLayers；

2. 引入 js 和 css 文件；

3. 在 js 代码中调用类库提供的接口完成功能代码的编写；

4. 最后在浏览器中查看运行效果。

 

iClient for OpenLayers 支持以 CDN 在线方式引用库文件、支持以 npm 方式安装类库进行模块化开发。本示例将仅以获取类库（v10.1.0 完整包）到本地的方式介绍如何使用 iClient for OpenLayers 访问 iPortal 的地图资源。本示例对应的在线范例地址为：https://iclient.supermap.io/examples/openlayers/editor.html#iportalWebMap

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

下载地址：https://iclient.supermap.io/download/download.html

产品包目录结构：

图1 SuperMap iClient JavaScript 产品包结构

第二步：引入 js、css 库文件

新建文件夹 'MyFirst'，将第一步下载的产品包中的 libs 和 dist 文件夹拷贝到新建的 'MyFirst' 文件夹中。由于 include-ol.js 分别通过相对路径 '../../libs' 和 '../../dist' 请求 libs 和 dist 中的文件，所以还需将 libs 和 dist 文件夹再次拷贝到 'MyFirst' 文件夹的上上一级目录中。

然后在 'MyFirst' 文件夹下用文本编辑工具（如 NotePad++）新建 'iportalWebMap.html' 的 html 页面，注意文件编码格式为 UTF-8。在 <head> 标签对中插入以下文件：

<script type="text/javascript" include='geostats' src="dist/ol/include-ol.js"></script>

注意：请检查并确保上述库文件引用的相对路径的正确性。

第三步：编辑 html，实现访问地图功能

在<body>中编写如下代码：

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">

  <div id="map" style="width: 100%;height:100%"></div>

  <script type="text/javascript">

    new ol.supermap.WebMap(491609698, {

      target:'map',

      server:'https://iportal.supermap.io/iportal'});

  </script>

</body>

上述代码完成了访问在线站点： https://iportal.supermap.io/iportal 中 id 为 491609698 的地图（地图详情）。

第四步：在浏览器中查看地图

在浏览器中打开上述完成开发的 iportalWebMap.html，即可看到如下运行效果。

 

第五步：发布 Web GIS 项目。所有功能开发完成后，您可将项目发布到 Tomcat 等中间件，以 http 协议访问功能。具体过程因不是本示范的重点，请自行查阅相关资料。