使用 iClient for MapboxGL 浏览 iPortal 地图

同 iClient for OpenLayers 开发流程类似，iClient for MapboxGL 开发流程为：

1. 获取 MapboxGL、SuperMap iClient for MapboxGL；

2. 引入 js 和 css 文件；

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

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

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

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

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

产品包目录结构：

图1 SuperMap iClient JavaScript 产品包结构

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

新建文件夹 "MyFirst"，将第一步下载的产品包中 dist 目录下的 mapboxgl 文件夹拷贝到新建的 "MyFirst" 文件夹中。并在该文件夹下用文本编辑工具（如 NotePad++）新建 "iportalWebMap_range.html" 的 html 页面，注意文件编码格式为 UTF-8。在 <head>标签对中插入以下文件：

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

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

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

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height: 100%">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
   new mapboxgl.supermap.WebMap(491609698 ,{
     target:'map',
     server:'https://iportal.supermap.io/iportal'});
</script>
</body>

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

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

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

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