fuyuhang
/
Project_yhfu
mirror of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!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/ol/include-ol.js"></script>
        <style>
            .ol-popup {
                position: absolute;
                background-color: white;
                -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
                filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
                padding: 15px;
                border-radius: 10px;
                border: 1px solid #cccccc;
                bottom: 12px;
                left: -50px;
                min-width: 210px;
            }

            .ol-popup:after,
            .ol-popup:before {
                top: 100%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
            }

            .ol-popup:after {
                border-top-color: white;
                border-width: 10px;
                left: 48px;
                margin-left: -10px;
            }

            .ol-popup:before {
                border-top-color: #cccccc;
                border-width: 11px;
                left: 48px;
                margin-left: -11px;
            }
        </style>
    </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>
        <div id="popup" class="ol-popup">
            <div id="popup-content"></div>
        </div>
        <script type="text/javascript">
            var container = document.getElementById("popup");
            var content = document.getElementById("popup-content");
            var overlay = new ol.Overlay({
                element: container,
                autoPan: true,
                autoPanAnimation: {
                    duration: 250
                }
            });
            var resultLayer,
                urlQuery = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/China_4326",
                wsHost = "wss:\//" + (window.isLocal ? document.location.hostname + ":8800" : "iclsvrws.supermap.io");
            var urlDataFlow = wsHost + "/iserver/services/dataflowTest/dataflow";
            var timer, featureResult, dataFlowBroadcast, source;
            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: [116.443571, 39.887549],
                        zoom: 12,
                        projection: "EPSG:4326",
                        multiWorld: true
                    }),
                    overlays: [overlay]
                });
                //添加底图
                var layer = new ol.layer.Tile({
                    source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(urlQuery, mapJSONObj))
                });
                map.addLayer(layer);

                SuperMap.SecurityManager.registerToken(urlDataFlow, window.exampleToken);

                //添加dataflow
                var source = new ol.source.DataFlow({
                    ws: urlDataFlow
                });
                source.on("dataupdated", function(e) {
                    var feature = e.value.data;
                    content.innerHTML = feature.get("time");
                    overlay.setPosition(feature.getGeometry().getCoordinates());
                });
                resultLayer = new ol.layer.Vector({
                    source: source,
                    style: new ol.style.Style({
                        image: new ol.style.Circle({
                            fill: new ol.style.Fill({
                                color: "rgba(255,0,0,0.9)"
                            }),
                            radius: 6
                        })
                    })
                });

                //模拟实时数据 start
                //查询一个线数据，每两秒将一个点通过dataFlowService广播给iSevrer的dataflow服务
                query();
                function query() {
                    var param = new SuperMap.QueryBySQLParameters({
                        queryParams: {
                            name: "Main_Road_L@China#1",
                            attributeFilter: "SMID = 1755"
                        }
                    });
                    new ol.supermap.QueryService(urlQuery).queryBySQL(param, function(serviceResult) {
                        featureResult = serviceResult;
                        dataFlowBroadcast = new ol.supermap.DataFlowService(urlDataFlow).initBroadcast();
                        dataFlowBroadcast.on("broadcastSocketConnected", function(e) {
                            timer = window.setInterval("broadcast()", 2000);
                        });
                        map.addLayer(resultLayer);
                    });
                }
            });
            var count = 200;
            function broadcast() {
                if (count >= featureResult.result.recordsets[0].features.features[0].geometry.coordinates.length) {
                    window.clearInterval(timer);
                    return;
                }
                var point = featureResult.result.recordsets[0].features.features[0].geometry.coordinates[count];
                var feature = {
                    geometry: {
                        coordinates: [point[0], point[1]],
                        type: "Point"
                    },
                    type: "Feature",
                    properties: {
                        id: 1,
                        time: new Date()
                    }
                };
                dataFlowBroadcast.broadcast(feature);
                count += 3;
            }
            //模拟实时数据 end
        </script>
    </body>
</html>