对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> </> ); } }