SuperMap iClient for JavaScript 新手入门（转）

旧城等待， 2021-09-20 13:28 220阅读 0赞

# [SuperMap iClient for JavaScript 新手入门][SuperMap iClient for JavaScript] #

地理信息系统（英语：Geographic Information System，缩写：GIS）是一门综合性学科，结合地理学与地图学，已经广泛的应用在不同的领域，是用于输入、存储、查询、分析和显示地理数据的计算机系统。具体解释请参考[维基百科][Link 1]。  
虽说GIS这门学科很复杂，但是从开发层次来划分，一般分为底层开发和二次开发。GIS组件发展迅速，将底层算法进行了封装。二次开发人员只要掌握相关组件的API函数，基本能完成业务需求。

常见GIS组件平台：

1.  ArcGIS - [Esri中国-Esri中国,GIS,GIS平台,地理信息系统][Esri_-Esri_GIS_GIS]
2.  SuperMap - [超图软件股份有限公司][Link 2]
3.  天地图 - [国家地理信息公共服务平台“天地图”][Link 3]

今天的重点就是体验一把SuperMap平台下WEB地图开发套件的使用。

# 1. 开发准备 #

SuperMap iClient 8C for JavaScript 是一套由 JavaScript 语言编写的 GIS 客户端应用开发包， 支持多源数据地图，支持多终端，跨浏览器， 通过本产品可快速实现浏览器上美观、流畅的地图呈现。

*  获取[开发包][Link 4]。`libs` 文件夹存放产品的库文件。下图是四个分库支持的功能：  
    ![785976-20160816203430015-468724979.png][]

`SuperMap.js` 为总库文件，支持所有功能。`SuperMap.Includ.js` 是引用文件，用来在内部统一引用上述JS和其他CSS资源文件。

*  SuperMap iClient for JavaScript 类参考：[点击访问][Link 5]

# 2. 快速入门 #

“图层” 在地图开发中是一个很重要的概念。相信学过 PhotoShop 的朋友对 “图层” 这个概念不陌生。图层就像一块透明的玻璃，在一块玻璃上画一朵花，在另一块玻璃上画一席草，重叠两块玻璃，由上而下俯视，从而形成图像显示效果。

地图上呈现丰富的元素也同样是由图层组成。地图可以添加一个或者多个图层，通过在图层上标记或绘制，组合显示用户所需要的最终效果。

SuperMap iClient for JavaScript 支持的图层如下：

*  TiledDynamicRestLayer： 动态分块图层，用来对接 SuperMap iServer 的分块动态REST图层服务。
 *  CloudLayer：云图层，用来显示 SuperMap 云服务发布的图层。
 *  SimpleCachedLayer：缓存图层，用来显示 SuperMap iServer 的缓存图层。
 *  WMS： 该图层用来显示OGC地图服务的地图数据。
 *  WMTS： 用来显示基于OGC WMTS 1.0.0标准实现的地图服务的地图数据。
 *  Vector： 矢量要素渲染图层。
 *  Markers：标签图层。
 *  OpenLayers：提供的其他第三方图层。

## 2.1. 构建 SuperMap iServer 服务地图 ##

SuperMap iServer 是基于跨平台 GIS 内核的云 GIS 应用服务器，该类地图的创建要依赖其产品iServer服务，本地搭建 SuperMap iServer 服务后方能测试。本例讲解主要内容是**创建REST动态分块图层**和**学习地图控件使用**。

Step1：创建地图显示容器。

Step2：引入资源文件，实现创建地图功能，加载REST动态分块图层。

<head> <title>经纬度坐标系图层</title>  <script src="supermap/libs/SuperMap.Include.js"></script> <script> //声明全局变量 map、layer、url var map, layer, url = "http://localhost:8090/iserver/services/map-shandong-zibo/rest/maps/zibo"; function init() { //1.在指定DOM元素上初始化地图对象。 map = new SuperMap.Map("map"); //2.添加控件。 map.addControl(new SuperMap.Control.ScaleLine()); map.addControl(new SuperMap.Control.LayerSwitcher()); map.addControl(new SuperMap.Control.MousePosition()); //2.初始化图层。 //创建分块动态REST图层，该图层显示iserver 8C 服务发布的地图, //其中"想要"为图层名称，url图层的服务地址，{transparent: true}设置到url的可选参数 layer = new SuperMap.Layer.TiledDynamicRESTLayer("zibo", url, null, { maxResolution: "auto" }); //监听图层信息加载完成事件，异步加载图层。 layer.events.on({ "layerInitialized": addLayer }); } function addLayer() { //将Layer图层加载到Map对象上。 map.addLayers([layer]); //出图，设置中心点，指定放缩级别。 map.setCenter(new SuperMap.LonLat(118.11908, 36.68166), 3); } </script> </head>

Step3：使用地图控件。

控件用来控制地图的显示和对交互操作的响应，在没有明确指定的情况下，地图默认添加Navigation、PanZoomBar控件。常见控件如下：

可见控件：

*  PanZoomBar：地图平移缩放控件，提供对地图的平移和缩放的控制操作。
 *  ScaleLine： 比例尺控件，显示地图的比例关系。
 *  LayerSwitcher： 地图图层切换控件，可以查看图层信息和控制图层显示。
 *  OverviewMap：地图鹰眼控件，辅助查看地图更大范围的显示。
 *  MousePosition：该控件显示鼠标移动时，所在点的地理坐标。

不可见控件：

*  Navigation：地图浏览控件，监听鼠标点击、平移、滚轮等事件来实现对地图的浏览操作。
 *  SelectFeature：要素选择控件，监听鼠标悬停，点击事件来选择vector图层上面的要素。
 *  DrawFeatue： 要素绘制控件，监听鼠标事件来实现要素的绘制。

添加控件有两种方式，一种是在创建Map对象的时候，设置`controls`属性来添加控件。如下：

var map = new SuperMap.Map('map', {controls: [new SuperMap.Control.PanZoomBar()]});

另一种就是上述代码所使用的那样。在完成Map对象创建后，调用`addControl()`或`addControls()`来添加控件。如下：

var map = new SuperMap.Map('map'); map.addControl(new SuperMap.Control.ScaleLine(), new SuperMap.Pixel(800,400));

Step4：查看运行效果

![785976-20160816203508234-1062376507.png][]

## 2.2. 构建 SuperMap 云地图 ##

本例讲解内容是，结合 **SuperMap 云服务发布的图层CloudLayer的创建**，并完成对**地图的放大、缩小，图层的隐藏、移除等**基础功能的演示，以及完成**矢量覆盖物和标记覆盖物的添加、事件注册**等功能。

Step1：同样创建地图容器。不过是多添加几个按钮。

<body onload="init()"> <div id="toolbar" style="padding: 10px"> 地图基础操作： <input type="button" class="btn" value="放大" onclick="mapEnlarge()" /> <input type="button" class="btn" value="缩小" onclick=" mapReduce()" /> <input type="button" class="btn" value="平移" onclick="mapPan()" />  图层基础操作： <input type="button" class="btn" value="隐藏" onclick="layerShowOrHide()" id="isShow" /> <input type="button" class="btn" value="移除" onclick="layerRemove()" />  添加覆盖物： <input type="button" class="btn" value="矢量元素覆盖物" onclick="addVector()" /> <input type="button" class="btn" value="标记覆盖物" onclick="addMarker()" /> </div> <div id="map" style="position: absolute; left: 0px; right: 0px; width: auto; height: 90%;"></div> </body>

Step2：构建地图对象，加载 SuperMap 云地图。并演示地图、图层的一些基础操作，以及覆盖物的添加、事件注册等功能。代码有点稍多，请细细品味。

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CloudLayer</title> <link href="css/bootstrap.min.css" rel="stylesheet" /> <script src="supermap/libs/SuperMap.Include.js"></script> <script type="text/javascript"> var map; var layer, vectors, markers, imgMarker; var vectorInfoWin, markerInfoWin; function init() { //初始化地图对象。 map = new SuperMap.Map("map", { controls: [ new SuperMap.Control.Navigation(), new SuperMap.Control.Zoom(), new SuperMap.Control.LayerSwitcher(), new SuperMap.Control.MousePosition() ], //地图所有图层都被当做叠加图层来使用。 allOverlays: false }); //通过向SuperMap云服务器发送请求得到SuperMap云服务发布的图层。 layer = new SuperMap.Layer.CloudLayer(); //构建 标记类覆盖物 图层。 markers = new SuperMap.Layer.Markers("Markers"); //构建 矢量类覆盖物 图层。 vectors = new SuperMap.Layer.Vector("Vectors"); //创建一个矢量选择要素的控件，在指定图层上单击鼠标选择矢量要素。 var selectFeature = new SuperMap.Control.SelectFeature(vectors, { onSelect: onFeatureSelected }); map.addControl(selectFeature); //激活控件。 selectFeature.activate(); //将 底图 和 两类覆盖物图层 添加到地图上。 map.addLayers([layer, vectors, markers]); //设置中心点，指定放缩级别。 map.setCenter(new SuperMap.LonLat(11339634.286396, 4588716.5813769), 4); } //a.1. 按钮生成一个矢量要素覆盖物，并添加到矢量图层。 function addVector() { //构建点几何对象类 var point = new SuperMap.Geometry.Point(13648644.286396, 5518190.5813769); //构建矢量要素覆盖物 var pointVector = new SuperMap.Feature.Vector(point); //修改点样式红色 pointVector.style = { fillColor: "red", strokeColor: "yellow", pointRadius: 6 }; //添加 矢量要素覆盖物 到 矢量图层 vectors.addFeatures(pointVector); } //a.2. 点击矢量要素覆盖物，触发调用此函数。 function onFeatureSelected(feature) { closeVectorInfoWin(); //创建一个具有指向和边框的浮动弹窗 var popup = new SuperMap.Popup.FramedCloud( "popwin", new SuperMap.LonLat(13648644.286396, 5518190.5813769), null, "矢量要素覆盖物鼠标点击事件", null, true); vectorInfoWin = popup; //在地图中添加弹出窗口 map.addPopup(popup); }; //a.3. 销毁 Popup.FramedCloud 弹窗。 function closeVectorInfoWin() { if (vectorInfoWin) { vectorInfoWin.hide(); vectorInfoWin.destroy(); } } //b.1. 按钮生成一个标记覆盖物，注册click事件，并添加到标记图层。 function addMarker() { //SuperMap.Size 用来描绘一对高宽值的实例 var size = new SuperMap.Size(30, 30); //依据size创建屏幕坐标 //SuperMap.Pixel 此类用x, y坐标描绘屏幕坐标 var offset = new SuperMap.Pixel(-(size.w / 2), -size.h); //SuperMap.Icon 创建图标，在网页中表现为div标签中的image标签 var icon = new SuperMap.Icon('supermap/theme/images/marker-gold.png', size, offset); //依据位置和大小初始化标记覆盖物 imgMarker = new SuperMap.Marker(new SuperMap.LonLat(10454187.286396, 4740367.5813769), icon); //添加 标记覆盖物 到 标记图层 markers.addMarker(imgMarker); //注册 click 事件,触发 mouseClickHandler()方法 imgMarker.events.on({ "click": mouseClickHandler }); } //b.2. 点击标记覆盖物，触发click事件会调用此函数。 function mouseClickHandler(event) { closeMarkerInfoWin(); //构建固定位置浮动弹窗，自适应显示 var popup = new SuperMap.Popup.Anchored( "marker", //唯一标识 imgMarker.getLonLat(), //标记覆盖物的坐标 new SuperMap.Size(220, 140), '标记覆盖物鼠标点击事件', null, true, null); popup.autoSize = true; markerInfoWin = popup; map.addPopup(popup); } //b.3. 销毁 Popup.Anchored 弹窗。 function closeMarkerInfoWin() { if (markerInfoWin) { markerInfoWin.hide(); markerInfoWin.destroy(); } } //c.1. 地图放大 ，在当前缩放级别的基础上放大一级。 function mapEnlarge() { map.zoomIn(); } //c.2. 地图缩小，在当前缩放级别的基础上缩小一级。 function mapReduce() { map.zoomOut(); } //c.3. 地图平移 ，根据指定的屏幕像素（-20，-8）值平移地图。 function mapPan() { map.pan(-20, -8); } //d.1. 设置图层可见性。 function layerShowOrHide() { var temp = document.getElementById("isShow").value; if (temp == '隐藏') { layer.setVisibility(false) document.getElementById("isShow").value = '显示'; } else { layer.setVisibility(true); document.getElementById("isShow").value = '隐藏'; } } //d.2. 移除图层，不可恢复。 function layerRemove() { map.removeLayer(layer); } </script> </head>

Step3：效果演示  
![785976-20160816203544265-1450477257.png][]

## 2.3. 构建 天地图WMTS服务地图 ##

> 什么是WMTS服务？  
> WMTS，切片地图Web服务（Web Map Tile Service）当前版本是1.0.0。该服务符合 OGC（Open Geospatial Consortium，开放地理信息联盟）制定的 WMTS 实现规范。  
> WMTS 是 OGC 提出的缓存技术标准，即在服务器端缓存被切割成一定大小瓦片的地图，对客户端只提供这些预先定义好的单个瓦片的服务，将更多的数据处理操作如图层叠加等> 放在客户端，从而缓解 GIS 服务器端数据处理的压力，改善用户体验。

SuperMap iClient for JavaScript 支持访问第三方 WMTS 地图服务。本例针对**天地图的 WMTS 服务进行调用演示**。

天地图官网提供的服务资源：[http://www.tianditu.com/service/query.html][http_www.tianditu.com_service_query.html]

Step1：这次先贴出演示代码，再做剖析。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>天地图WMTS服务图层</title> <style type="text/css"> </style> <script src="supermap/libs/SuperMap.Include.js"></script> <script type="text/javascript"> var map, layerBase, layerMarker; function init() { //初始化地图，所有图层都被当做叠加图层来使用。 map = new SuperMap.Map("map", { allOverlays: true }); //全球矢量底图服务。 layerBase = new SuperMap.Layer.WMTS({ name: "vec", url: "http://t0.tianditu.com/vec_c/wmts", layer: "vec", style: "default", matrixSet: "c", format: "tiles", requestEncoding: "KVP" }); //全球矢量中文注记服务。 layerMarker = new SuperMap.Layer.WMTS({ name: "cva", url: "http://t0.tianditu.com/cva_c/wmts", layer: "cva", style: "default", matrixSet: "c", format: "tiles", requestEncoding: "KVP" }); //添加图层，设置中心点，指定放缩级别。 map.addLayers([layerBase, layerMarker]); map.setCenter(new SuperMap.LonLat(0, 0), 3); } </script> </head> <body onload="init()"> <div id="map" style="left: 0px; right: 0px; width: auto; height: 90%;"> </body> </html>

Step2：运行效果  
![785976-20160816203605171-931680408.png][]

Step3：上面是调用了天地图官网提供的两个WMTS服务图层叠加后的效果。功能实现主要是依赖 `SuperMap.Layer.WMTS`类来完成。下面就介绍介绍它的一些基础属性：

layerMarker = new SuperMap.Layer.WMTS({
     name: "cva", //WMTS服务名称。 url: "http://t0.tianditu.com/cva_c/wmts", //WMTS图层的服务地址，必设属性。 layer: "cva", //图层名称。 style: "default", //发布的图层样式，默认为”default”。 matrixSet: "c", //发布的标识符矩阵集，必设属性。 format: "tiles", //图像的MIME类型，默认为 “image/png”。 requestEncoding: "KVP" //请求编码。可以是“REST”或者“KVP”，默认为”KVP”。 });

还有一个问题，怎样得到这些 WMTS 服务参数值？这就要回过头继续了解 WMTS 服务。这一块不做详细解释，只说操作方法。  
比如，获取天地图的全球矢量底图服务信息，只要浏览器请求：  
[http://t0.tianditu.com/vec\_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities][http_t0.tianditu.com_vec_c_wmts_SERVICE_WMTS_VERSION_1.0.0_REQUEST_GetCapabilities]  
响应为一个XML文档，保存到本地。在XML文档中搜索`Contents`节点，关于服务图层的信息就在里面了。

> 请求参数 GetCapabilities 操作使得 WMTS 客户端从服务器获取服务元数据文档，详细请参考 [WMTS API][]。

# 3. 本篇小结 #

本篇总结了这几天我对 SuperMap iClient for JavaScript 的认识过程。内容主要包括几种类型地图的构建，以及配合一些基础的地图操作，在上述三个小节开篇已用粗体标出，不再赘述。本篇已同步至 [个人站点][Link 6]。

转载于:https://www.cnblogs.com/jiangze-blog/p/7844852.html

[SuperMap iClient for JavaScript]: http://www.cnblogs.com/gao-yang/p/5777742.html
[Link 1]: https://zh.wikipedia.org/wiki/%E5%9C%B0%E7%90%86%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F
[Esri_-Esri_GIS_GIS]: http://www.esrichina.com.cn/
[Link 2]: http://www.supermap.com/
[Link 3]: http://www.tianditu.com/
[Link 4]: http://support.supermap.com.cn/product/iClient.aspx
[785976-20160816203430015-468724979.png]: /images/20210726/656c9fac29864f7bb2ee5cc7c45eff72.png
[Link 5]: http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/apidoc/files/SuperMap/Map-js.html
[785976-20160816203508234-1062376507.png]: /images/20210726/63fd8c78c0cf45fa97ff32ff78ebd81c.png
[785976-20160816203544265-1450477257.png]: /images/20210726/2ca76f7685dc4ab89d836ca4827fb1fc.png
[http_www.tianditu.com_service_query.html]: http://www.tianditu.com/service/query.html
[785976-20160816203605171-931680408.png]: /images/20210726/2386ec509cdc4979a8163cd16b902028.png
[http_t0.tianditu.com_vec_c_wmts_SERVICE_WMTS_VERSION_1.0.0_REQUEST_GetCapabilities]: http://t0.tianditu.com/vec_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities
[WMTS API]: http://support.supermap.com.cn/DataWarehouse/WebDocHelp/6.1.3/iserverOnlineHelp/API/WMTS/WMTS100/wmts1.0.0.htm
[Link 6]: http://codergao.cn/