arcGis react中自定义模板

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';
import ReactDOM from 'react-dom';
import PopupContent from './PopupContent';
const stationOptions = [{ label: '雨量站', value: 0 }, { label: '水位站', value: 1 }, { label: '水质站', value: 2 }];
const { arcgisOption } = esriConfig;
const GraphicLayer = ['rainLayer', 'waterLevelLayer', 'waterQualityLayer'];
export default class CheckLayer extends React.Component {
    mapView;
    map;
    popContent;
    constructor(props) {
        super(props);
    }
    static contextType = mapContext;
    state = {
        // 当前展示的测站类别
        currentStationSttp: [0, 1, 2],
        isClickTools: false,
        stationData: [],
    };
    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', 'esri/geometry/Point'], arcgisOption)
            .then(([Graphic, GraphicsLayer, Point]) => {
                const pt = new Point({
                    latitude: 23.077064040597218,
                    longitude: 112.45067374075929,
                });
                this.mapView.goTo(
                    {
                        target: pt,
                        zoom: 13,
                    },
                    3000
                );
                // 雨量图层, 水位图层， 水质图层创建
                GraphicLayer.map((item, index) => {
                    const graphicsLayer = new GraphicsLayer({
                        id: item,
                    });
                    this.map.add(graphicsLayer, 150 + index);
                });



                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,
                         '72px',
                        height: '88px',
                    };



                    const point = {
                        type: 'point',
                        longitude: item.x,
                        latitude: item.y,
                    };
                    const contentDom = document.createElement('div');
                    contentDom.className = 'popup-container';
                    // PopupContent自定义模板组件 content传给组件的数据
                    ReactDOM.render(<PopupContent content={item} />, contentDom);
                    const graphic = new Graphic({
                        geometry: point,
                        symbol: symbol,
                        attributes: item,
                        popupTemplate: {
                            title: '{typeName}',
                            content: contentDom,
                        },
                    });



                    const rainGraphic = this.map.findLayerById(GraphicLayer[item.type]);
                    rainGraphic.add(graphic);
                });
                this.mapView.popup.dockOptions = {
                    buttonEnabled: false,
                };
                this.mapView.popup.collapseEnabled = false;
                this.mapView.on('click', (event) => {
                    this.mapView.hitTest(event).then((response) => {
                        if (response.results.length) {
                            // 获取每个图形上的ID
                            const attributesData = response.results[0].graphic.attributes;
                            if (attributesData) {
                                this.setState({
                                   
                                    stationData: attributesData ? [attributesData] : [],
                                });
                                PubSub.publish('openPopup', {
                                    isOpen: true,
                                    title: '测站详情',
                                    X: event.x,
                                    Y: event.y,
                                    data: attributesData ? [attributesData] : [],
                                });
                            }
                        }
                    });
                });
            });
    }



    componentWillUnmount() {
        this.mapView.popup.close();
        GraphicLayer.map((item) => {
            const graphicLayers = this.map.findLayerById(item);
            this.map.remove(graphicLayers);
        });
    }
    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,
        });
        GraphicLayer.map((item, index) => {
            const layer = this.map.findLayerById(item);
            layer.visible = sttps.indexOf(index) >= 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>
               
            </>
        );
    }
}