# 数据流图层

<script>
  var wsHost = "ws:\//" + (window.isLocal ? document.location.hostname + ":8800" : "iclsvrws.supermap.io");

  // 模拟 dataflow 实时数据
  var featureResult, dataFlowBroadcast, timer;
  function broadcast() {
      var features = [];
      for (var index = 0; index < featureResult.length; index++) {
          var count = parseInt(Math.random() * featureResult.length);
          var geometry = featureResult[count].geometry;
          var feature = {
              geometry: geometry,
              type: "Feature",
              properties: { id: index + 1, time: new Date() }
          };
          features.push(feature);
      }
      dataFlowBroadcast.broadcast(features);
  }

  function query() {
      var param = new SuperMap.QueryBySQLParameters({
          queryParams: { name: "Capitals@World#3", attributeFilter: "SMID > 0" }
      });
      var queryService = new mapboxgl.supermap.QueryService(
          host + "/iserver/services/map-world/rest/maps/World"
      ).queryBySQL(param, function(serviceResult) {
          featureResult = serviceResult.result.recordsets[0].features.features;
          dataFlowBroadcast = new mapboxgl.supermap.DataFlowService(
              wsHost + "/iserver/services/dataflowTest/dataflow"
          ).initBroadcast();
          dataFlowBroadcast.on("broadcastSocketConnected", function(e) {
              timer = window.setInterval(broadcast, 2000);
          });
      });
  }
  query();

  new Vue({
    el: '#main',
    data() {
      return {
        dataFlowUrl: wsHost + "/iserver/services/dataflowTest/dataflow",
        layerStyle: {
            circle: new SuperMap.Components.commontypes.CircleStyle({
                "circle-color": "#3fb1e3",
                "circle-radius": 6
            })
        },
        mapOptions: {
          container: 'map', // container id
          style: {
            version: 8,
            sources: {
              'raster-tiles': {
                type: 'raster',
                tiles: [
                    'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}',
                ],
                tileSize: 256,
              },
            },
            layers: [
              {
                id: 'simple-tiles',
                type: 'raster',
                source: 'raster-tiles',
                minzoom: 0,
                maxzoom: 22,
              },
            ],
          },
          center: [120.143, 30.236],
          zoom: 0
        },
      };
    }
  });
</script>