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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
							<!--********************************************************************
* 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>
</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" src="../../dist/leaflet/include-leaflet.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var wsHost = "wss:\//" + (window.isLocal ? document.location.hostname + ":8800" : "iclsvrws.supermap.io");
        var map,
            urlMap = host + "/iserver/services/map-china400/rest/maps/China",
            urlQuery = host + "/iserver/services/map-china400/rest/maps/China_4326",
            urlDataFlow = wsHost + "/iserver/services/dataflowTest/dataflow";
        map = L.map('map', {
            preferCanvas: true,
            crs: L.CRS.EPSG3857,
            center: [39.88, 116.42],
            maxZoom: 18,
            zoom: 12
        });
        L.supermap.tiledMapLayer(urlMap).addTo(map);

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

        var popup = L.popup({
            offset: L.point(0, 0),
            autoPan: true
        });
        //创建DataFlowLayer，创建DataFlowLayer订阅iServer dataflow服务并将结果加载到地图上
        var dataFlowLayer = L.supermap.dataFlowLayer(urlDataFlow, {
            style: function (feature) {
                return {
                    fillColor: "red",
                    fillOpacity: 1,
                    radius: 6,
                    weight: 0
                };
            }
            //geometry:{coordinates:[[[116.381741960923,39.8765100055449],[116.414681699817,39.8765100055449],[116.414681699817,39.8415115329708],[116.381741960923, 39.8415115329708],[116.381741960923,39.8765100055449]]],type:"Polygon"},
            //excludeField:["id"]
        });
        dataFlowLayer.on('dataupdated', function (result) {
            var feature = result.data;
            popup.setLatLng(L.GeoJSON.coordsToLatLng(feature.geometry.coordinates))
                .setContent(feature.properties.time);
            if (!popup.isOpen()) {
                popup.addTo(map);
            }
        })
        dataFlowLayer.addTo(map);

        
        //模拟实时数据  start
        //查询一个线数据，每两秒将一个点通过dataFlowService广播给iSevrer的dataflow服务
        query();
        var timer, featureResult, dataFlowBroadcast;

        function query() {
            var param = new SuperMap.QueryBySQLParameters({
                queryParams: {
                    name: "Main_Road_L@China#1",
                    attributeFilter: "SMID = 1755"
                }
            });
            L.supermap
                .queryService(urlQuery)
                .queryBySQL(param, function (serviceResult) {
                    featureResult = serviceResult;
                    dataFlowBroadcast = L.supermap.dataFlowService(urlDataFlow).initBroadcast();
                    dataFlowBroadcast.on('broadcastSocketConnected', function (e) {
                        timer = window.setInterval("broadcast()", 2000);
                    })
                });
        }

        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>