tsg-web/src/views/Home/setMapStation/drp.js

import React, { useEffect, useState } from "react";
import {useDispatch, useSelector} from "react-redux";
import { message } from 'antd';
import { Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import Text from "ol/style/Text";
import Feature from "ol/Feature";
import Point from 'ol/geom/Point.js';
import Circle from 'ol/style/Circle';
import Stroke from "ol/style/Stroke";
import FillStyle from "ol/style/Fill";
import { transform } from 'ol/proj';
import { httppost2 } from "../../../utils/request";
import apiurl from "../../../service/apiurl";

export default function SetDrpStation({tms, setTableData}) {
    const dispatch = useDispatch();
    let mapObj = useSelector(s => s.map.map)

    const getData = async (tms) =>{
        const { data, code, msg } = await httppost2(apiurl.home.yq,{
            "stm": tms[0],
            "etm": tms[1]
        })
        if (code !== 200) {
            message.error(msg || '请求失败');
        }
        const list = data.map((i)=>{
          return {
            id : i.stcd,
            ...i,
            drp : i.drp ,//i.v,
          }
        })
        addLayer(list||[],tms||[])
        setTableData(list||[])

    }
    useEffect(()=>{
        getData(tms)

        return ()=>{
            mapObj && mapObj.getLayers().getArray().forEach(layer => {
            if ( layer.values_.name && (layer.values_.name.indexOf('ZHZS_YQ') > -1)) {
                    layer.getSource().clear()
                }
            })
        }
    },[tms])

    const getColor = (val)=>{
        if(val===null){
          return '#8c8c8c'
        }else if(val<0.1){
            return '#ffffff'
        }else if(val>=0.1 && val<10){
            return 'rgb(167, 240, 143)';
        }else if(val>=10 && val<25){
            return 'rgb(64, 215, 255)';
        }else if(val>=25 && val<50){
            return 'rgb(32, 143, 238)';
        }else if(val>=50 && val<100){
            return 'rgb(85, 86, 255)';
        }else if(val>=100 && val<250){
            return 'rgb(191, 90, 252)';
        }else{
            return 'rgb(246, 66, 66)';
        }
    }


    const addLayer = (arr,tms)=>{
        var layer = new VectorLayer({
          // @ts-ignore 
          name:"ZHZS_YQ",
          source: new VectorSource(),
          style: (feature,zIndex) =>{
            const drp = feature.values_.data.drp
            const stnm = feature.values_.data.stnm
              return [new Style({
                image: new Circle({
                  radius: 5,
                  fill: new FillStyle({ color: getColor(drp) }),
                  stroke: new Stroke({ color: getColor(drp), width: 2 })
                }),
                text: new Text({
                  text: zIndex<50?`${stnm}`:'',
                  offsetY: 24,
                  font: '12px 微软雅黑',
                  //backgroundFill: new FillStyle({ color: "rgba(255,255,255,0.5)" }),
                  fill: new FillStyle({ color: "rgba(0,0,0,0.5)"  }),
                  stroke: new Stroke({ color: '#fff', width: 1 }),
                  overflow: true,
                }),
                zIndex: drp===0?0.01:drp*10
              })]
            },
            zIndex:200,
        })
    
        var layerDrp = new VectorLayer({
          // @ts-ignore
          name:"ZHZS_YQ_DRP",
          visible:true,
          source: new VectorSource(),
          style: (feature,zIndex) =>{
            const drp = feature.values_.data.drp
              return [new Style({
                text: new Text({
                  text: drp===null?'-':String(drp),
                  offsetY: 12,
                  font: '12px 微软雅黑',
                  //backgroundFill: new FillStyle({ color: "rgba(255,255,255,0.5)" }),
                  fill: new FillStyle({ color: "rgba(0,0,0,0.5)"  }),
                  stroke: new Stroke({ color: '#fff', width: 1 }),
                  overflow: true,
                })
              })]
            },
            zIndex:200,
        })
    
      
    
        const features = arr.map((item)=>{
          const point2 = transform([item.lgtd, item.lttd], 'EPSG:4326', 'EPSG:3857');
          const feature = new Feature({
            geometry: new Point(point2),
            data:{...item,myParams:tms}
          });
    
          return feature
        })
        features.forEach(feature => layer.getSource().addFeature(feature));
        features.forEach(feature => layerDrp.getSource().addFeature(feature));
        mapObj && mapObj.addLayer(layer);
        mapObj && mapObj.addLayer(layerDrp);
        
        mapObj && mapObj.on('click', function(evt) {
    
          //console.log("271++++",postmessageData);
    
          var feature = mapObj && mapObj.forEachFeatureAtPixel(evt.pixel, function(feature) {
            return feature;
          });
          if (feature) {
            const data = feature.values_.data
            if(data){
              dispatch.runtime.setFeaturePop({
                id: data.stcd,
                data:{...data,myParams:tms},
                type: 'drp',
                lgtd: data.lgtd,
                lttd: data.lttd,
              })
            }
          }
        });
      }

}