对arcGis动态渲染标记点优化

import React from 'react';
import './index.less';
import { mapContext } from 'contexts/map';
import { Checkbox } from 'antd';
import esriConfig from 'gisConfig/esri.config';
import esriLoader from 'esri-loader';
import stations from './station';

const stationOptions = [
    { label: '雨量站', value: '0' },
    { label: '水位站', value: '1' },
    { label: '水质站', value: '2' },
];
const { arcgisOption } = esriConfig;
const GraphicLayer = ['rainLayer', 'waterLevelLayer', 'waterQualityLayer'];
const varName = ['rainGraphicLayer', 'waterLevelGraphicLayer', 'waterQualityGraphicLayer'];
export default class CheckLayer extends React.Component {
    mapView;
    map;
    popContent;
    constructor(props) {
        super(props);
    }
    static contextType = mapContext;
    state = {
        // 当前展示的测站类别
        currentStationSttp: ['0', '1', '2'],
        isClickTools: false,
        popupVisible: false,
        stationData: [],
    };

    rainGraphicLayer;
    waterLevelGraphicLayer;
    waterQualityGraphicLayer;

    componentDidMount() {
        this.mapView = this.context.mapView;
        this.map = this.context.map;
        PubSub.subscribe('isModalOpen', (msg: any, data: any) => {
            const item = { msg, data };
            this.setState({
                isClickTools: item.data.isClickTools,
            });
        });
        esriLoader
            .loadModules(['esri/Graphic', 'esri/layers/GraphicsLayer'], arcgisOption)
            .then(([Graphic, GraphicsLayer]) => {
                //雨量图层
                // this.rainGraphicLayer = this.map.findLayerById('rainLayer');
                // if (this.rainGraphicLayer) {
                //     this.map.remove(this.rainGraphicLayer);
                // }
                // const rainGraphicLayer = new GraphicsLayer({
                //     id: 'rainLayer',
                // });
                // this.map.add(rainGraphicLayer, 150);
                // this.rainGraphicLayer.removeAll();
                GraphicLayer.map((item, index) => {
                    const graphicsLayer = new GraphicsLayer({
                        id: item,
                    });
                    this.map.add(graphicsLayer, 150 + index);
                });

                //水位图层
                // this.waterLevelGraphicLayer = this.map.findLayerById('waterLevelLayer');
                // if (this.waterLevelGraphicLayer) {
                //     this.map.remove(this.waterLevelGraphicLayer);
                // }
                // const waterLevelGraphicLayer = new GraphicsLayer({
                //     id: 'waterLevelLayer',
                // });
                // this.map.add(waterLevelGraphicLayer, 151);
                // this.waterLevelGraphicLayer.removeAll();
                //水质图层
                // this.waterQualityGraphicLayer = this.map.findLayerById('waterQualityLayer');
                // if (this.waterQualityGraphicLayer) {
                //     this.map.remove(this.waterQualityGraphicLayer);
                // }
                // const waterQualityGraphicLayer = new GraphicsLayer({
                //     id: 'waterQualityLayer',
                // });
                // this.map.add(waterQualityGraphicLayer, 152);
                //  this.waterQualityGraphicLayer.removeAll();

                stations.forEach((item) => {
                    let imgPath = '';
                    switch (item.type) {
                        case '0':
                            imgPath = require(`@assets/images/rainfall_station_default.png`);
                            break;
                        case '1': {
                            if (item.isWarn === '1') {
                                imgPath = require(`@assets/images/ground_water_station_default_warn.png`);
                            } else {
                                imgPath = require(`@assets/images/ground_water_station_default.png`);
                            }
                            break;
                        }
                        case '2':
                            imgPath = require(`@assets/images/spring_station_default.png`);
                            break;
                        default:
                            break;
                    }

                    const symbol = {
                        type: 'picture-marker',
                        url: imgPath,
                        width: '72px',
                        height: '88px',
                    };

                    const point = {
                        type: 'point',
                        longitude: item.x,
                        latitude: item.y,
                    };
                    const graphic = new Graphic({
                        geometry: point,
                        symbol: symbol,
                        attributes: item,
                        popupTemplate: {
                            title: '{typeName}',
                            content: this.popContent,
                        },
                    });

                    const rainGraphic = this.map.findLayerById(GraphicLayer[item.type]);
                    rainGraphic.add(graphic);
                    // switch (item.type) {
                    //     case '0':
                    //          rainGraphicLayer.add(graphic);
                    //         break;
                    //     case '1':
                    //         waterLevelGraphicLayer.add(graphic);
                    //         break;
                    //     case '2':
                    //         waterQualityGraphicLayer.add(graphic);
                    //         break;
                    //     default:
                    //         break;
                    // }
                });
                this.mapView.popup.dockOptions = {
                    buttonEnabled: false,
                };
                this.mapView.popup.collapseEnabled = false;
                this.mapView.on('click', (event) => {
                    PubSub.publish('openPopup', {
                        isOpen: false,
                    });
                    this.mapView.hitTest(event).then((response) => {
                        if (response.results.length) {
                            // 获取每个图形上的ID
                            const attributesData = response.results[0].graphic.attributes;
                            // const graphicRes = response.results.filter((result) => {
                            //     return (
                            //         result.graphic.layer === rainGraphicLayer ||
                            //         result.graphic.layer === waterLevelGraphicLayer ||
                            //         result.graphic.layer === waterQualityGraphicLayer
                            //     );
                            // });
                            // if (graphicRes.length) {
                            this.setState({
                                popupVisible: true,
                                stationData: attributesData ? [attributesData] : [],
                            });
                            PubSub.publish('openPopup', {
                                //  isOpen: this.state.isClickTools ? false : true,
                                isOpen: true,
                                title: '测站详情',
                                X: event.x,
                                Y: event.y,
                                //    type: graphicRes.attributes.type,
                                data: attributesData ? [attributesData] : [],
                            });
                            // }
                        }
                    });
                });

                // this.mapView.on('pointer-enter', (event) => {
                //     this.mapView.hitTest(event).then((response) => {
                //         if (response.results.length) {
                //             const graphic = response.results.filter((result) => {
                //                 return (
                //                     result.graphic.layer === this.rainGraphicLayer ||
                //                     result.graphic.layer === this.waterLevelGraphicLayer ||
                //                     result.graphic.layer === this.waterQualityGraphicLayer
                //                 );
                //             })[0].graphic;
                //             if (graphic) {
                //                 alert(graphic.attributes.name);
                //                 console.log(graphic);
                //             }
                //         }
                //     });
                // });
            });
    }

    componentWillUnmount() {
        this.mapView.popup.close();
        const rainGraphicLayer = this.map.findLayerById('rainLayer');
        this.map.remove(rainGraphicLayer);
        const waterLevelGraphicLayer = this.map.findLayerById('waterLevelLayer');
        this.map.remove(waterLevelGraphicLayer);
        const waterQualityGraphicLayer = this.map.findLayerById('waterQualityLayer');
        this.map.remove(waterQualityGraphicLayer);
        // this.map.remove(this.rainGraphicLayer);
    }
    handleRenderCheckout = () => {
        const children = [];
        stationOptions.map((item: any, index: number) =>
            children.push(
                <Checkbox
                    key={index}
                    value={item.value}
                    onClick={this.handleStepOnChange}
                    className={'my-station-checkbox-item'}>
                    {item.label}
                </Checkbox>
            )
        );
        return children;
    };
    /**
     * @description 处理要渲染的测站类别发生变化
     * @memberof GIS
     */
    handleStepOnChange = (sttps: any) => {
        this.setState({
            currentStationSttp: sttps,
        });

        this.map.findLayerById('rainLayer').visible = sttps.indexOf('0') >= 0 ? true : false;
        this.map.findLayerById('waterLevelLayer').visible = sttps.indexOf('1') >= 0 ? true : false;
        this.map.findLayerById('waterQualityLayer').visible = sttps.indexOf('2') >= 0 ? true : false;
    };
    // 查看更多
    seeMoreBtn = () => {
        PubSub.publish('openRightPopup', {
            isOpen: true,
        });
    };
    render() {
        const { stationData } = this.state;

        return (
            <>
                <div className="home-station-manager">
                    <Checkbox.Group
                        options={stationOptions}
                        className={'my-station-checkbox'}
                        value={this.state.currentStationSttp}
                        onChange={this.handleStepOnChange}>
                        {this.handleRenderCheckout()}
                    </Checkbox.Group>
                </div>
                <div
                    style={{ display: this.state.popupVisible ? 'block' : 'none' }}
                    ref={(node) => {
                        this.popContent = node;
                    }}
                    className="popup-container">
                    {/* <h4 className="title">{stationData.length && stationData[0].typeName}</h4> */}

                    <ul className="info-list">
                        <li>监测站:</li>
                        <li>{stationData.length && stationData[0].name}</li>
                    </ul>
                    <ul className="info-list">
                        <li>经度:</li>
                        <li>{stationData.length && stationData[0].x}</li>
                    </ul>
                    <ul className="info-list">
                        <li>纬度:</li>
                        <li>{stationData.length && stationData[0].y}</li>
                    </ul>
                    <a onClick={this.seeMoreBtn} className="seeMore">
                        查看更多
                    </a>
                </div>
            </>
        );
    }
}