mcfxkh-Web/src/views/Home/MapCtrl/mapstyle/realsklayerQ2.js

import clone from "clone";
import { SkRealPromise } from "../../../../models/_/real";
import { parseGeoJSON } from "../../../../utils/tools";
import { InfoPopNames } from "../../InfoPops";
import BaseLayer from "./baselayer";


const SourceName = '实时水库q2';


const ShapeStyle = {
  id: SourceName,
  type: 'symbol',
  source: SourceName,
  layout: {
    'icon-allow-overlap': true,
    'text-allow-overlap': true,
    'icon-image': '水库-超汛限',
    'icon-size': [
      'interpolate', ['linear'], ['zoom'],
      10, 0.8,
      14, 0.8,
    ],

    'text-allow-overlap': true,
    'text-size': [
      'interpolate', ['linear'], ['zoom'],
      10, 10,
      14, 14,
    ],
    'text-font': ['Roboto Black'],
    'text-field': [
      'step',
      ['zoom'],
      '',
      12, ['get', 'stnm']
    ],
    'text-anchor': 'top',
    'text-offset': [0, 1],

    'visibility': 'none',
  },
  paint: {
    'text-color': '#fff'
  }
};

export default class RealSkLayerQ2 extends BaseLayer {

  static LayerName = 'RealSkLayerQ2';

  static SourceName = SourceName;

  getStyle() {
    const ret = clone(ShapeStyle);
    this._setStyleVisibility(ret);
    return ret;
  }

  getName() {
    return RealSkLayerQ2.LayerName;
  }

  getSubLayers() {
    return [ShapeStyle.id];
  }

  getRefreshInterval() {
    return 60 * 1000;
  }


  async doRefreshLayer(mapCtrl) {
    const ms = mapCtrl.getSource(SourceName);

    let data = [{
        "stcd": "716129061",
        "type": "sk",
        "hasRz": true,
        "stnm": "仰天窝水库",
        "adcd": "421181201000",
        "wscd": null,
        "importancy": 0,
        "lgtd": 115.106667,
        "lttd": 31.126389,
        "elev": 0,
        "damel": 325.08,
        "dsflz": 324.18,
        "fsltdz": 323.5,
        "ddz": 319.5,
        "zcxsw": 323.5,
        "drpTm": "2025-04-11T05:00:00.000Z",
        "today": 0,
        "h1": 0,
        "h3": 0,
        "h6": 0,
        "h12": 0,
        "h24": 0,
        "h48": 0,
        "drpState": 2,
        "rz": 328.16,
        "w": 0.132,
        "a_fsltdz": 4.660000000000025,
        "rzTm": "2025-04-11T05:00:00.000Z",
        "rzWarning": 1,
        "rzState": 2,
        "pic": [
            {
                "stcd": "716129061",
                "tm": "2023-03-12T06:05:00.000Z",
                "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129061/20230312140500.jpg"
            },
            {
                "stcd": "716129061",
                "tm": "2023-03-12T07:25:00.000Z",
                "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129062/20230312152500.jpg"
            }
        ],
        "aRz": 4.66,
        "strarz": "4.66"
    }];
    if (Array.isArray(data)) {
      data.forEach(o => {
        const strarz = o.rz - o.fsltdz;
        if (!isNaN(strarz)) {
          o.strarz = strarz.toFixed(2);
        }
      });
    }
    
    ms.setData(parseGeoJSON(data));
    return true;
  }


  getFeatureTip(record) {
    return record.stnm;
  }

  featureClicked(properties, dispatch) {
    if (properties.stnm === '小玉潭水库') {
      /*
      dispatch.runtime.setInfoDlg({
        layerId: 'Three', properties: properties
      });
      */

      window.open('http://www.baidu.com')
    } else {
      dispatch.runtime.setFeaturePop({
        type: InfoPopNames.RealSkPop,
        properties,
        coordinates: [properties.lgtd, properties.lttd],
        offsetPop: true,
      });
    }

  }
}