新手入门

By admin in 必赢网址是多少 on 2019年2月8日

地理音讯连串(希伯来语: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文件夹存放产品的库文件。下图是多个分库援助的意义:
    必赢网址是多少 1
    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: 矢量要素渲染图层。
  • 马克ers:标签图层。
  • 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.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/thememarker-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:效果演示
必赢网址是多少 3

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:运行效果
必赢网址是多少 4

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的认识进度。内容主要蕴含两种档次地图的营造,以及合作局地基础的地形图操作,在上述四个小节开篇已做牵线,不再赘言。本篇已协同至
民用站点

作者:Esofar

出处:http://www.cnblogs.com/esofar/p/5777742.html

本文版权归小编和和讯共有,欢迎转发,但未经小编同意必须保留此段申明,且在文章页面分明地点给出原文链接。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 亚洲必赢app官方下载 版权所有