07-开发进阶

1第三方地图服务访问概述访问非SuperMapiServer发布的地图服务可以使用如下两种方法：1）使用SuperMapiServer转发第三方地图服务，将第三方地图服务发布为rest服务或者OGC标准服务。SuperMapiServer能够将目前应用度较高的几款第三方地图服务（如百度地图、天地图、BingMap地图等）作为数据来源与之交互，并将其数据再次发布为REST地图服务或者OGC标准服务。2）通过客户端开发工具iConnector直接访问第三方地图服务。iConnector是一款基于SuperMapiClientforJavaScript和第三方地图JavaScriptAPI开发的连接器工具，主要面对的是以第三方在线JavaScript为基础开发，并且又想加入SuperMapiServer强大功能的用户。iConnector是一个开源的工具，其下载地址，提供了针对百度、天地图、Google、Leaflet、ArcGIS等的不同接口。1.1加载天地图天地图是国家测绘局2010年10月21日宣布开通，是中国公众版国家地理信息公共服务平台，天地图作为中国区域内数据资源最全的地理信息服务平台，许多应用项目都希望能直接对接天地图的服务，直接获取对应的数据资源。通过SuperMapiServer可以将天地图数据转发为REST地图服务。其操作方法是打开SuperMapiServer服务管理工具，点击“快速发布服务”，在弹出的对话框中，为数据来源选择“天地图服务”，在按照快速发布向导的提示，一步步将其发布为REST地图服务即可。1.1加载天地图第二种加载方式是通过iconnector对接天地图服务。具体接口调用参见以下示例代码：直接实例化Tmap对象即可，可以增加切换叠图类型的控件。functioninit(){//初始化天地图的mapmap=newTMap(mapDiv,{projection:EPSG:4326});//定位map.centerAndZoom(newTLngLat(70,30),3);//增加鼠标对地图的控制map.enableHandleMouseScroll();map.enableDoubleClickZoom();//增加切换叠图类型控件map.addControl(newTMapTypeControl());}1.1加载天地图上图为加载天地图的效果图，加载了天地图服务，并加载切换地图类型的控件。1.2加载百度地图加载百度地图的方法同天地图加载类似，方法一：SuperMapiServer直接对接百度地图服务，将其转发为REST服务。1.2加载百度地图第二种加载方式是通过iconnector对接百度地图服务。具体接口调用参见以下示例代码：直接实例化Bmap对象，添加比例尺导航控件等。functioninit(){//初始化百度地图的mapvarmap=newBMap.Map('allmap');//添加比例尺控件map.addControl(newBMap.ScaleControl());//添加导航控件map.addControl(newBMap.NavigationControl());//设置鼠标滑轮放大缩小地图可用map.enableScrollWheelZoom(true);//初始化定位map.centerAndZoom(newBMap.Point(105,39),5);}1.2加载百度地图上图为通过iconnector加载百度地图的效果图。2时空数据展示以前我们所展示的地图数据都是空间二维或者三维数据，现将数据加上时间维度就构成了时空数据，时空数据打破了传统静态数据的限制，能有效的展现空间数据在时间；动态渲染矢量数据是用HTML5中帧的新特性来实现的。时空数据可应用于所有在时间节点上有变化的空间数据，如车辆监控、气象监控、等温线/面变化、人口迁移、道路变迁等等行业。2.1时空数据展示原理时空数据的展示原理：将各来源的数据，比如SuperMapiServer，客户端数据，加载到矢量动画图层上，通过动画管理即动画控制渲染效果，最后底层渲染动画效果。2.2时空数据格式各行业在时空数据上使用的数据格式不统一，千奇百怪，如下图的有文本形式、excel表格形式、各种数据库方式、也有使用我们原有的supermap格式等。虽然数据存在多样性，不能统一，但是我们不难发现他们都有三个共同点：•id：每一条数据都存在一个用于代表具体实物的id•时间：当前数据的时间•位置：当前数据的空间位置只要存在这三个属性的数据就可以在我们的产品里面进行展示。2.3时空数据展示主要接口动画管理类SuperMap.Animator：通过浏览器帧（浏览器固定每秒会渲染60帧）的概念，实现对用户动画进行播放、停止等操作。此类只负责时间上的控制，具体动画效果需要用户在初始化时的回调函数内部进行实现。矢量动画图层类SuperMap.Layer.AnimatorVector：该图层用于渲染动态矢量要素，用于管理时空数据的增删改查等操作,接口和现有的vectorlayer基本一样。主要负责对数据的管理，并在渲染时进行数据查找。动画渲染类SuperMap.Renderer.AnimatorCanvas：基于2D‘canvas’的一种渲染，用于渲染矢量动画效果。支持点线面的渐变效果。基于浏览器的canvas进行的渲染，所以浏览器必须支持canvas才能够使用时空数据。目前时空数据底层渲染支持如下：点渐变、线渐变、面渐变、点闪烁、尾巴、点发射、线伸缩。2.4时空数据展示实例通过一个实例来介绍时空数据是如何展示的。实现：假设一个点（id为“point1”）0时刻时位置在(0,0)，在1时刻时位置到了(20000000,0)，这里需要动画的渲染它的运动轨迹。2.4时空数据显示实例初始化数据，主要实现代码如何下features=[newSuperMap.Feature.Vector(newSuperMap.Geometry.Point(0,0),//设置第一个位置{FEATUREID:point1,//设置为点的idTIME:0//设置第一个时间}),newSuperMap.Feature.Vector(newSuperMap.Geometry.Point(20000000,0),//设置第二个位置{FEATUREID:point1,TIME:1})];2.4时空数据展示实例动画图层初始化主要代码：animatorVector=newSuperMap.Layer.AnimatorVector(layer,{},{speed:0.01,//设置速度为每一帧播放0.01小时的数据startTime:0,//设置开始时间为0时刻endTime:1//设置结束时间为1时刻});2.4时空数据展示实例实现将图层添加到地图上，将要素添加到动画图层上，实现动画播放。代码如下：//添加进地图map.addLayers([animatorVector]);//要素添加animatorVector.addFeatures(features);//动态播放animatorVector.animator.start();3.1高性能海量数据显示方法第一种方式，使用SuperMap.Layer.Vector图层添加海量数据，设置图层对象的renderers属性值为canvas2。SuperMap.Layer.Vector图层是客户端绘制各种几何对象的承载容器，由于不同浏览器所采用的绘制技术不尽相同，因此该图层对象Renderers属性提供多种绘制对象的渲染方式，如SVG、VML、Canvas、Canvas2，其中Canvas、Canvas2是基于HTML5的特性所提供的一组渲染方式，用于海量对象标绘的快速呈现。Canvas和Canvas2使用说明1）选用支持Html5Canvas的浏览器；2）Canvas2是对Canvas在性能上的优化，Canvas2只绘制发生变化的瓦片，减少了重绘次数，提高了绘制速度，而且对于数量在10000以上的矢量要素，采用分块显示，增强了用户体验效果；3）Canvas、Canvas2可以添加、删除要素，但是不支持编辑操作。要实现对要素的编辑，建议用SVG、VML两种渲染方式。3.1高性能海量数据的显示方法实例：实现全国建设银行分行的分布情况的查询及展示，使用的是模拟数据，实现思路用QueryBySQLService查询到对应的行点，然后将查询结果展示在SuperMap.Layer.Vector，设置Renderers用canvas2方式渲染；3.1高性能海量数据的显示方法Canvas2渲染方式实现，主要代码如下：tempLayer=newSuperMap.Layer.Vector(VectorLayer,{renderers:[Canvas2]});3.2高性能海量数据显示方式针对海量点数据提升显示效率的方法主要是利用麻点图。麻点图对象--SuperMap.GOIs：服务端将点数据生成一个临时的图层，客户端通过动态图层的方式展现出来，从而达到高效率渲染大数据量点的目的，事件通过utfgrid实现辅助麻点图上的数据进行信息展示是通过SuperMap.Control.GOIs麻点图控件来实现的3.2高性能海量数据显示方法开发方法：第一步：创建一个麻点图对象，指定点数据，添加初始化麻点图事件，具体实现代码如下://创建一个麻点图对象myGOIs=newSuperMap.GOIs({url:url,datasetName:datasetName,style:newSuperMap.REST.ServerStyle({markerSymbolID:907942,markerSize:4}),pixcell:16});myGOIs.events.on({initialized:GOIsInitialized});3.2高性能海量数据显示方法第二步，在初始化函数中，添加麻点图中的图层，添加麻点图控件，具体实现代码如下:functionGOIsInitialized(){varlayers=myGOIs.getLayers();map.addLayers(layers);control=newSuperMap.Control.GOIs(layers,{onClick:function(evt){varlonlat=evt.loc;varname=evt.data.NAME;openInfoWin(lonlat,name);},highlightIcon:newSuperMap.Icon('images/circle.png',newSuperMap.Size(16,16),newSuperMap.Pixel(-8,-8)),isHighlight:true});map.addControl(control);}3.2高性能海量数据显示方法麻点图展示效果如上图。4鼠标样式鼠标样式的定义，cursor：设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状;对应的接口类是SuperMap.Feature.Vector.style类中的cursor属性值，那么在设定style时指定对应的cursor类别，就能使得对象在聚焦的时候，鼠标当前是什么的样式。常用cursor光标说明1）div{cursor:default}默认正常鼠标指针2）div{cursor:hand}和div{cursor:text}文本选择效果3）div{cursor:move}移动选择效果4）div{cursor:pointer}手指形状链接选择效果4鼠标样式实例代码如下：//初始化vector要素，在设置style样式时，直接设定鼠标移动上去的样式varpoint2=newSuperMap.Geometry.Point(-100,-39.3);varpointlayer2=newSuperMap.Featur