SuperMap
SuperMap iClient for JavaScript 新手入门
地理信息系统（英语：Geographic Information System，缩写：GIS）是一门综合性学科，结合地理学与地图学，已经广泛的应用在不同的领域，是用于输入、存储、查询、分析和显示地理数据的计算机系统。具体解释请参考维基百科。
虽说GIS这门学科很复杂，但是从开发层次来划分，一般分为底层开发和二次开发。GIS组件发展迅速，将底层算法进行了封装。二次开发人员只要掌握相关组件的API函数，基本能完成业务需求。
常见GIS组件平台：
- ArcGIS - Esri中国-Esri中国,GIS,GIS平台,地理信息系统
- SuperMap - 超图软件股份有限公司
- 天地图 - 国家地理信息公共服务平台“天地图”
今天的重点就是体验一把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：查看运行效果
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：效果演示
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：运行效果
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 的认识过程。内容主要包括几种类型地图的构建，以及配合一些基础的地图操作，在上述三个小节开篇已用粗体标出，不再赘述。本篇已同步至 个人站点。
SuperMap的更多相关文章
- SuperMap iClient for JavaScript 新手入门
地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,是用于输入.存储.查询.分析和显示地理数 ...
- Supermap iCloudManager -负载均衡
Supermap icm负载均衡理解: 应用场景:地图出图 子节点1和子节点2中的服务保持一致,一般情况下设置的是匿名用户通过nginx访问服务信息,所以不需要登录. 1.通过nginx分发请求,(轮 ...
- supermap布局设定地图网格及布局网格
地图网格设定 LayoutElements elements = m_mapLayoutControl.MapLayout.Elements; //构造GeoMap GeoMap geoMap = n ...
- (十九)WebGIS中I查询的原理及设计(包含AGS、GeoServer、Supermap)
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 我们在使用arcmap时,经常会用到被称为I查询的工具.具体 ...
- SuperMap iServer 扩展服务及扩展服务提供者范例
一.扩展服务实例 1.将iserver-extend1下的listener.java打成jar包2.复制到D:\SuperMap-iServer\webapps\iserver\WEB-INF\lib ...
- supermap iclient for js 标签专题图（服务端）
<!DOCTYPE><html> <head> <meta http-equiv="Content-Type" content=" ...
- SuperMap iClient 7C——网络客户端GIS开发平台 产品新特性
SuperMap iClient 7C是空间信息和服务的可视化交互开发平台,是SuperMap服务器系列产品的统一客户端.产品基于统一的架构体系,面向Web端和移动端提供了多种类型的SDK开发包,帮助 ...
- flex中通过代码获取supermap的token
最近工作中需要使用代码来获取supermap服务启动安全访问限制以后的token值,经过一番尝试,最终成功获取到,记录下里,以供翻阅 //get token public function getTo ...
- ArcGIS与SuperMap的使用比较（1）
用了超过6年的超图产品了,因此对超图的很多特性比较熟悉,去年开始接触ARCGIS,并用来研发了一些新产品,因此对于两个GIS平台有些感受,记录如下: 比较版本:ARCGIS10.1与SuperMap ...
随机推荐
- JAVA接口示例
总感觉有点虚,但慢慢找到感觉了.将对象放进数组里,这就比较深入了. interface drawTest{ public void draw(); public void doAnyThing(); ...
- XML在数据传输哪些方面会比JSON有优势，在哪些领域更加适合？
XML 跟 JSON 的圣战,或许会成为自 vim/emacs 圣战,cli/gui 圣战等等圣战以来的又一个圣战,而所有的圣战大抵都不会有结果,因为每方都有各自的道理,谁都不服谁. 在我看来,XML ...
- JAVA并发2
Java 5中引入了新的锁机制--java.util.concurrent.locks中的显式的互斥锁:Lock接口,它提供了比synchronized更加广泛的锁定操作.Lock接口有3个实现它的类 ...
- Codeforces Round #316 (Div. 2) D、E
Problem D: 题意:给定一棵n个点树,每个点有一个字母,有m个询问,每次询问某个节点x的子树中所有深度为k的点能否组成一个回文串 分析:一堆点能组成回文串当且仅当数量为奇数的字母不多于1个,显 ...
- Codeforces Round #236 (Div. 2)E. Strictly Positive Matrix(402E)
E. Strictly Positive Matrix You have matrix a of size n × n. Let's number the rows of the matrix f ...
- java中paint repaint update 之间的关系
最近总结了一下java中的paint,repaint和updata三者之间的关系,首先咱们都知道用paint方法来绘图,用repaint重绘,用update来写双缓冲.但是他们之间是怎么来调用的呢,咱 ...
- IntelliJ IDEA创建web项目及异常问题解决
IDEA配置Tomcat: 1.下载Tomcat,本次使用的是apache-tomcat-6.0.43 2.IDEA配置Tomcat 在idea中的Settings(Ctrl+Alt+s)(或者点击图 ...
- 正则表达式：网页爬虫：从TXT中获取邮箱地址（获取的练习，缺点：一行只能匹配一个）
import java.util.regex.*; import java.io.*; class L { public static void main(String[] args) throws ...
- 3D空间包围球(Bounding Sphere)的求法
引言 在3D碰撞检測中,为了加快碰撞检測的效率,降低不必要的碰撞检測,会使用基本几何体作为物体的包围体(Bounding Volume, BV)进行測试.基本包围体的碰撞检測相对来说廉价也easy的多 ...
- Js中执行变量中的命令语句，也就是所谓的宏替换（很实用的例子）
Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子) 由其做动态编程时非常有用,必须符合js中的语法,用eval能够执行. var aaa="alert('这是变量中的语句')&q ...