SuperMap

时间：2021-11-24 17:07:36

SuperMap iClient for JavaScript 新手入门

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

常见GIS组件平台：

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

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

1. 开发准备

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

  • 获取开发包。libs 文件夹存放产品的库文件。下图是四个分库支持的功能：
    SuperMap

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

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：创建地图显示容器。

<html>

<body onload="init()">

    <!--地图显示的div-->

    <div id="map" style="position: absolute; left: 0px; right: 0px; width: auto; height: 90%;">

    </div>

</body>

</html>

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

<head>

    <title>经纬度坐标系图层</title>

    <!--引用需要的脚本 注意：SuperMap.Include.js内部已经动态引用相关JS，CSS文件-->

    <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：查看运行效果

SuperMap

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()" />&nbsp;

        图层基础操作：

            <input type="button" class="btn" value="隐藏" onclick="layerShowOrHide()" id="isShow" />

        <input type="button" class="btn" value="移除" onclick="layerRemove()" />&nbsp;

        添加覆盖物：

        <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：效果演示
SuperMap

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

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：运行效果
SuperMap

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
响应为一个XML文档，保存到本地。在XML文档中搜索Contents节点，关于服务图层的信息就在里面了。

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

3. 本篇小结

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

相关文章