首页 技术 正文
技术 2022年11月9日
0 收藏 594 点赞 4,568 浏览 9400 个字

地理信息系统(英语: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 iClient for JavaScript 新手入门
    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

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,492
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,494
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,132
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,295