iClient展示流数据

最新推荐文章于 2024-01-29 10:19:48 发布

原创最新推荐文章于 2024-01-29 10:19:48 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

文章标签：

#数据流

WebGIS 专栏收录该内容

142 篇文章

订阅专栏

作者：LX

一、背景

前面的系列文章中给大家介绍了流数据的接入，以及流数据分析应用等，但是对于流数据的可视化效果展示这不部分内容并未做过多的介绍，很多小伙伴在实际应用中不知道如何把服务端的流数据在WEB端展示出来，因此本文将在上一篇文章《流数据分析之地理围栏应用》的基础之上做一下前端流数据可视化的介绍。

二、开发准备

iServer流数据服务：按照《流数据分析之地理围栏应用》一文配置好流服务。
iClient开发包：9D及以上版本

三、iClient对接流数据服务（以iClient for Openlayes为例）

1、引入iClient的js库

<script type="text/javascript" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/openlayers/include-openlayers.js"></script>

2、定义一幅地图作为底图

 var mapJSONObj = serviceResult.result;
 var map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults({attributionOptions: {collapsed: false}})
                    .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [0, 0],
                zoom: 3,
                projection: 'EPSG:4326'
            }),
            overlays: [overlay]
        });
 var layer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(urlQuery, mapJSONObj))
        });
 map.addLayer(layer);

3、定义数据流图层源
订阅SuperMap iServer 数据流服务，获取流数据，与 ol.layer.Vector 结合使用实现SuperMap iServer 数据流上图。

//定义流服务的url
var urlDataFlow ="ws://localhost:8800/iserver/services/dataflow/dataflow";
//定义数据流图层源
var source = new ol.source.DataFlow({
				ws: urlDataFlow,
				idField:"id",// 要素属性中表示唯一标识的字段
				wrapX:false
			});

4、定义流数据渲染的样式
因为流数据中设置了地理围栏，获取的数据中包含围栏相关的状态信息，所以分别设置style，用于区别是在围栏内还是在围栏外。

var style=function (e) {
		//e.get("geoWithin")获取飞机是在围栏内还是在围栏外的状态
			if(e.get("geoWithin")){
                         e.setStyle(new ol.style.Style({
                             image: new ol.style.Icon({
                                 src:"img/planeRed.png",  //在围栏内的显示红色的飞机
                                 rotateWithView:true
						rotation: e.get("direction"),
                                 size:[16,16],
                                 crossOrigin: 'anonymous'
                             })
                         }));
				}else{
				e.setStyle(new ol.style.Style({
                             image: new ol.style.Icon({
                                 src:"img/plane.png", //在围栏外的显示灰色的飞机
                                 rotateWithView:true,
						rotation: e.get("direction"),
                                 size:[16,16],
                                 crossOrigin: 'anonymous'
                             })
                         }));
				}
                      };

5、将流数据按照设定的style渲染到矢量图层上

var resultLayer = new ol.layer.Vector({
				source: source,
                style: style
			});
map.addLayer(resultLayer);//添加到地图上

可以看到效果：
在这里插入图片描述
6、显示地理围栏
将地理围栏数据也展示在地图上，以明确的区分数据在围栏内外的情况

var geojsonObject ={"type":"FeatureCollection","features":[{"geometry":{"coordinates":[[[156.7332893115310,26.36535141562460],[156.5767659210803,29.95032645335299],[156.1083869872410,33.50801766637715],[155.3317171565144,37.01134887637329],[154.2526673552785,40.43365761746411],[152.8794498040687,43.74889805368339],[151.2225155176213,46.93183920351460],[149.2944747663404,49.95825696289511],[147.1100011045259,52.80511846527503],[144.6857196957657,55.45075737563927],[142.0400807854014,57.87503878439951],[139.1932192830215,60.05951244621396],[136.1668015236410,61.98755319749492],[132.9838603738098,63.64448748394234],[129.6686199375905,65.01770503515206],[126.2463111964997,66.09675483638796],[122.7429799865036,66.87342466711453],[119.1852887734794,67.34180360095390],[115.6003137357510,67.49832699140460],[112.0153386980227,67.34180360095391],[108.4576474849985,66.87342466711455],[104.9543162750024,66.09675483638797],[101.5320075339115,65.01770503515208],[98.21676709769226,63.64448748394236],[95.03382594786105,61.98755319749495],[92.00740818848053,60.05951244621399],[89.16054668610062,57.87503878439955],[86.51490777573636,55.45075737563931],[84.09062636697612,52.80511846527507],[81.90615270516167,49.95825696289516],[79.97811195388070,46.93183920351466],[78.32117766743329,43.74889805368346],[76.94796011622356,40.43365761746418],[75.86891031498766,37.01134887637337],[75.09224048426108,33.50801766637724],[74.62386155042171,29.95032645335308],[74.46733815997101,26.36535141562469],[74.62386155042168,22.78037637789631],[75.09224048426106,19.22268516487215],[75.86891031498760,15.71935395487602],[76.94796011622350,12.29704521378520],[78.32117766743320,8.981804777565916],[79.97811195388061,5.798863627734704],[81.90615270516156,2.772445868354190],[84.09062636697601,-0.07441563402573337],[86.51490777573623,-2.720054544389981],[89.16054668610047,-5.144335953150240],[92.00740818848038,-7.328809614964687],[95.03382594786089,-9.256850366245661],[98.21676709769210,-10.91378465269309],[101.5320075339114,-12.28700220390282],[104.9543162750022,-13.36605200513873],[108.4576474849983,-14.14272183586531],[112.0153386980225,-14.61110076970469],[115.6003137357509,-14.76762416015540],[119.1852887734792,-14.61110076970472],[122.7429799865034,-14.14272183586537],[126.2463111964995,-13.36605200513881],[129.6686199375903,-12.28700220390293],[132.9838603738097,-10.91378465269322],[136.1668015236409,-9.256850366245818],[139.1932192830214,-7.328809614964865],[142.0400807854013,-5.144335953150442],[144.6857196957655,-2.720054544390209],[147.1100011045258,-0.07441563402598561],[149.2944747663402,2.772445868353923],[151.2225155176212,5.798863627734420],[152.8794498040687,8.981804777565618],[154.2526673552784,12.29704521378489],[155.3317171565143,15.71935395487570],[156.1083869872409,19.22268516487183],[156.5767659210803,22.78037637789599],[156.7332893115310,26.36535141562459]]],"type":"Polygon"},"properties":{"NAME":"WWW","UserID":0},"type":"Feature"}]};
var vectorSource = new ol.source.Vector({
                features: (new ol.format.GeoJSON()).readFeatures(geojsonObject),
                wrapX: false
            });
var fenceLayer = new ol.layer.Vector({
                source: vectorSource
            });
map.addLayer(fenceLayer);

7、最终可视化效果展示：
红色的是在地理围栏内部的飞机
灰色的是在地理围栏外部的飞机
在这里插入图片描述
附上完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_dataFlowService"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript" src="../../dist/openlayers/include-openlayers.js"></script>
</head>	
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript">
    var urlQuery ="http://localhost:8090/iserver/services/map-china400/rest/maps/China_4326";
    var token = "-tDPP6TivAixmhgNik3eLWQnfuUImTou9MpVnUhDs9GAkhDISEZgRqRifQ7Puy9kn2yWggqiNTXXfWGCyS1ibA..";
    var urlDataFlow ="ws://localhost:8800/iserver/services/dataflow/dataflow";
    new ol.supermap.MapService(urlQuery).getMapInfo(function (serviceResult) {
        var mapJSONObj = serviceResult.result;
        var map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults({attributionOptions: {collapsed: false}})
                    .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [0, 0],
                zoom: 3,
                projection: 'EPSG:4326'
            })
        });
        var layer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(urlQuery, mapJSONObj))
        });
        map.addLayer(layer);
        if(!window.isLocal){
            SuperMap.SecurityManager.registerToken(urlDataFlow, token);
        }
        query();
        function query() {
        var source = new ol.source.DataFlow({
				ws: urlDataFlow,
				idField:"id",
				wrapX:false
			});
		var style=function (e) {
							//判断是否在围栏内
							if(e.get("geoWithin")){
                                e.setStyle(new ol.style.Style({
                                    image: new ol.style.Icon({
                                        src:"./planeRed.png", //在围栏内的显示红色的飞机
                                        rotateWithView:true,
										rotation: e.get("direction"),
                                        size:[16,16],
                                        crossOrigin: 'anonymous'
                                    })
                                }));
								}else{
								e.setStyle(new ol.style.Style({
                                    image: new ol.style.Icon({
                                        src:"./plane.png", //在围栏外的显示灰色的飞机
                                        rotateWithView:true,
										rotation: e.get("direction"),
                                        size:[16,16],
                                        crossOrigin: 'anonymous'
                                    })
                                }));
								}
                            };
		var resultLayer = new ol.layer.Vector({
				source: source,
                style: style
			});
		map.addLayer(resultLayer);
			
			 //显示地理围栏
        var geojsonObject ={"type":"FeatureCollection","features":[{"geometry":{"coordinates":[[[156.7332893115310,26.36535141562460],[156.5767659210803,29.95032645335299],[156.1083869872410,33.50801766637715],[155.3317171565144,37.01134887637329],[154.2526673552785,40.43365761746411],[152.8794498040687,43.74889805368339],[151.2225155176213,46.93183920351460],[149.2944747663404,49.95825696289511],[147.1100011045259,52.80511846527503],[144.6857196957657,55.45075737563927],[142.0400807854014,57.87503878439951],[139.1932192830215,60.05951244621396],[136.1668015236410,61.98755319749492],[132.9838603738098,63.64448748394234],[129.6686199375905,65.01770503515206],[126.2463111964997,66.09675483638796],[122.7429799865036,66.87342466711453],[119.1852887734794,67.34180360095390],[115.6003137357510,67.49832699140460],[112.0153386980227,67.34180360095391],[108.4576474849985,66.87342466711455],[104.9543162750024,66.09675483638797],[101.5320075339115,65.01770503515208],[98.21676709769226,63.64448748394236],[95.03382594786105,61.98755319749495],[92.00740818848053,60.05951244621399],[89.16054668610062,57.87503878439955],[86.51490777573636,55.45075737563931],[84.09062636697612,52.80511846527507],[81.90615270516167,49.95825696289516],[79.97811195388070,46.93183920351466],[78.32117766743329,43.74889805368346],[76.94796011622356,40.43365761746418],[75.86891031498766,37.01134887637337],[75.09224048426108,33.50801766637724],[74.62386155042171,29.95032645335308],[74.46733815997101,26.36535141562469],[74.62386155042168,22.78037637789631],[75.09224048426106,19.22268516487215],[75.86891031498760,15.71935395487602],[76.94796011622350,12.29704521378520],[78.32117766743320,8.981804777565916],[79.97811195388061,5.798863627734704],[81.90615270516156,2.772445868354190],[84.09062636697601,-0.07441563402573337],[86.51490777573623,-2.720054544389981],[89.16054668610047,-5.144335953150240],[92.00740818848038,-7.328809614964687],[95.03382594786089,-9.256850366245661],[98.21676709769210,-10.91378465269309],[101.5320075339114,-12.28700220390282],[104.9543162750022,-13.36605200513873],[108.4576474849983,-14.14272183586531],[112.0153386980225,-14.61110076970469],[115.6003137357509,-14.76762416015540],[119.1852887734792,-14.61110076970472],[122.7429799865034,-14.14272183586537],[126.2463111964995,-13.36605200513881],[129.6686199375903,-12.28700220390293],[132.9838603738097,-10.91378465269322],[136.1668015236409,-9.256850366245818],[139.1932192830214,-7.328809614964865],[142.0400807854013,-5.144335953150442],[144.6857196957655,-2.720054544390209],[147.1100011045258,-0.07441563402598561],[149.2944747663402,2.772445868353923],[151.2225155176212,5.798863627734420],[152.8794498040687,8.981804777565618],[154.2526673552784,12.29704521378489],[155.3317171565143,15.71935395487570],[156.1083869872409,19.22268516487183],[156.5767659210803,22.78037637789599],[156.7332893115310,26.36535141562459]]],"type":"Polygon"},"properties":{"NAME":"WWW","UserID":0},"type":"Feature"}]};
         vectorSource = new ol.source.Vector({
                features: (new ol.format.GeoJSON()).readFeatures(geojsonObject),
                wrapX: false
            });
        var fenceLayer = new ol.layer.Vector({
                source: vectorSource
            });
        map.addLayer(fenceLayer);
                  
        }
    });
</script>
</body>
</html>