SuperMap iClient for JavaScript 新手入门

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

常见GIS组件平台：

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

1.开发准备

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

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

SuperMap.js为总库文件，支持所有功能。SuperMap.Includ.js是引用文件，用来在内部统一引用上述JS和其他CSS资源文件。
SuperMap iClient for JavaScript 类参考：点击访问

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 iClient for JavaScript 新手入门

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 iClient for JavaScript 新手入门

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 iClient for JavaScript 新手入门

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的认识过程。内容主要包括几种类型地图的构建，以及配合一些基础的地图操作，在上述三个小节开篇已做介绍，不再赘述。本篇已同步至个人站点。

作者：gao-yang

出处：http://www.cnblogs.com/gao-yang/p/5777742.html

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

SuperMap iClient for JavaScript 新手入门的更多相关文章

SuperMap iClient for JavaScript初入
SuperMap iClient for JavaScript初入介绍SuperMap for Js的简单使用. 推荐先看下这篇文档:SuperMap iClient for JavaScript ...
SuperMap iClient for JavaScript image出图
SuperMap iClient for JavaScript 客户端基于openlayers 开发. 目前最高版本为811,9D产品后推荐客户使用leaflet.openlayers客户端开发. 问 ...
SuperMap iClient for JavaScript 之关联查询
人们常说,计划赶不上变化.同样的,在项目中,使用的数据也是在不断变化的,尤其是属性信息的改变.就比如说,地图上的地物,它的空间信息在比较长的时间内,都不会发生变化,他的属性信息在初期不完整或者与后来的 ...
浅谈Supermap iClient for JavaScript 弹窗类
地图作为信息的载体和呈现方式,是GIS的重要组成部分,它是一个浏览信息的窗口,在信息日益发达的今天 ,各种地图应用如雨后春笋一般出现在大众眼前,而不是像以往一样太过局限于专业的领域.而弹窗,是作为地图 ...
JavaScript新手入门贪吃蛇
从小就在玩贪吃蛇,但是知道今天自己做了一遍才知道原理的具体的实现步骤. 刚进入界面时显示开始游戏(不重要,本人比较喜欢吹毛求疵) 中间黑色部分为游戏的主要展示部分主要步骤及源码: body中代码,红 ...
新手入门指导：Vue 2&period;0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script&gt ...
课程上线 -&OpenCurlyDoubleQuote;新手入门 &colon; Windows Phone 8&period;1 开发”
经过近1个月的准备和录制,“新手入门 : Windows Phone 8.1 开发”系列课程已经在Microsoft 虚拟学院上线,链接地址为:http://www.microsoftvirtuala ...
PHP常用代码大全(新手入门必备)
PHP常用代码大全(新手入门必备),都是一些开发中常用的基础.需要的朋友可以参考下. 1.连接MYSQL数据库代码 <?php $connec=mysql_connect("loc ...
HTML5游戏开发引擎Pixi&period;js新手入门讲解
在线演示本地下载这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) ...

随机推荐

Android 第三方图表类 MPChart 的使用
先看看条形图的的效果还不错是吧,实现这样的效果很合适呢! 还有折线图.饼图很多效果效果不错对吧~ 下面我们就先来看看条形图的实现方法吧! 第一步: 引入第三方包 MPChart 如果你碰巧看过我之前 ...
Leetcode&colon; Data Stream as Disjoint Intervals &amp&semi;&amp&semi; Summary of TreeMap
Given a data stream input of non-negative integers a1, a2, ..., an, ..., summarize the numbers seen ...
android入门——UI(5)
最近时间实在匆忙,博客的代码基本没有解释. 介绍ExpandableListView <?xml version="1.0" encoding="utf-8&quo ...
HDU 4456（二维树状数组+坐标转换）
题目链接:Problem - 4456 看别人叙述看的心烦,于是我自己画了一张图. 上图. 上代码 #include <iostream> #include <cstdio> ...
CDN拾遗
作为前端er,辛辛苦苦搬完砖,好不容易上线之后,正准备告一声万事大吉,回家吃鸡.忽然qa/pm/老板问,为什么我这里还是没有更新?只能是弱弱的回一声,清个缓存看看?或者还有那么一天,发现大部分区域都是 ...
获取linux服务进程号
ps -ef | grep "服务名" | grep -v "grep" | awk '{print $2}' # ps -ef|grep "被查询的 ...
es6初级之解构----之一
1. 访问对象属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quot ...
npm install --save 和 --save-dev的区别
--save 会把依赖包名称添加到 package.json 文件 "dependencies" 键下--save-dev 则添加到 package.json 文件 "d ...
MSSQL语句批量替换表中某列字段内容的某个字符
UPdate 表 Set 字段名=REPLACE(字段名,'查找目标字符','要替换的字符') 比如:在Products表中把字段CharCode中含有ch-的字符全部替换为dw- UPDATE Pr ...
Codeforces Gym100952 A&period;Who is the winner&quest; (2015 HIAST Collegiate Programming Contest)
A. Who is the winner? time limit per test 1 second memory limit per test 64 megabytes input stan ...