react-amap海量点优化

前言：高版本的react-amap 支持MassMarkers 组件用于一次性添加大量的标记点。本次优化的海量点是在低版本react-amap的基础上。官方推荐使用聚合useCluster属性来优化海量点的渲染。

直接附上代码：

import React, { Component } from "react";
import { Map, Markers, Polygon, InfoWindow } from 'react-amap'
import {Form,Switch,message,
} from "antd";
import ActionsForm from "components/RoutePanel/ActionsForm";
import { MAP_AMAP_KEY, MAP_AMAP_VERSION } from 'constants/config'
import {API_FETCH_ZONES_DEPT_POINT,
} from 'constants/api'
import fetch from 'common/fetch'
import styles from "./amap.css";
import { debounce } from 'lodash';const polygonType = {main: 'main',adjacent: 'adjacent',normal: 'normal',
}// 获取区域样式
const getPolygonStyle = (pt) => {switch (pt) {case polygonType.main: return {fillColor: '#DC2626',fillOpacity: 0.5,strokeOpacity: 0.5,strokeWeight: 2,strokeColor: '#DC2626',}case polygonType.adjacent:return {fillColor: '#34D399',fillOpacity: 0.5,strokeOpacity: 1,strokeWeight: 1,strokeColor: '#34D399',}case polygonType.normal:default:return {fillColor: '#333333',fillOpacity: 0.3,strokeOpacity: 0.5,strokeWeight: 1,strokeColor: '#333333',}}
}export class ZoneNeighborhoodMap extends Component {constructor(props) {super(props)this.map = null; // 地图实例this.mapEvents = {created: (mapInstance) => {this.map = mapInstance;this.map.on('zoomend', this.handleZoom);},close: () => {this.map = null;if (this.map) {this.map.off('zoomend', this.handleZoom);}}};this.state = {infoWindowPosition: null,infoWindowTitle: '',polygonActive: false,pointReferShow: true, //运输点参考pointReferData: [],areaReferShow: true, //已绘制参考areaReferData: [],locTypes: [],data: props.data,// infoWindowPosition: {//   longitude: 120,//   latitude: 30,// },infoWindowVisible: false,infoWindowData: {id: "",desc: "",},infoWindow: {position: {longitude: 120,latitude: 30,},visible: false,data: null,},useCluster:false}this.markerEvents = {created: (e) => {},mouseover: (e) => {const position = e.target.getPosition();this.setState({infoWindow: {position: {longitude: position.lng,latitude: position.lat,},visible: true,data: e.target.getExtData(),},});},mouseout: (e) => {this.setState({infoWindow: {position: {longitude: 120,latitude: 30,},visible: false,data: null,},});},};}componentWillUnmount() {if (this.map) {this.map.destroy();}}componentWillUnmount() {if (this.map) {this.map.destroy()}}// 缩放事件处理函数handleZoom = () => {const zoomLevel = this.map.getZoom();console.log('zoomLevel',zoomLevel)if (zoomLevel > 8) {this.setState({ useCluster: false });} else {this.setState({ useCluster: true });}};setFitViewWithZoneId(zoneId) {const fitOverlays = []this.map.getAllOverlays().forEach(polygon => {if (polygon.getExtData().zoneId === zoneId) {fitOverlays.push(polygon)}})if (fitOverlays.length) {this.map.setFitView(fitOverlays, false, undefined, this.map.getZoom())}}renderPolygons() {const { mainZoneId, polygons, toggleAdjacentZone, adjacentZoneIds } = this.propsconst l = polygons.lengthconst _polygons = []for (let i = 0; i < l; i++) {const detail = polygons[i]if (detail.geoArea && detail.geoArea.length) {let _polygonType = polygonType.normalif (detail.zoneId === mainZoneId) {_polygonType = polygonType.main} else if (adjacentZoneIds.includes(detail.zoneId)) {_polygonType = polygonType.adjacent}detail.geoArea.forEach((path, pathId) => {_polygons.push(<Polygon path={path}key={`${detail.id}:${pathId}`}style={getPolygonStyle(_polygonType)}events={{click: () => {if (detail.zoneId === mainZoneId) {return}toggleAdjacentZone(detail.zoneId)},mousemove: (e) => {this.setState(() => ({infoWindowPosition: e.lnglat,infoWindowTitle: detail.zoneDesc}))},mouseout: () => {this.setState(() => ({infoWindowPosition: null}))}}}extData={{ zoneId: detail.zoneId }}/>)})}}return _polygons}renderInfoWindow() {const { infoWindowPosition, infoWindowTitle } = this.stateif (!infoWindowPosition) {return null}return <InfoWindowposition={{longitude: infoWindowPosition.lng,latitude: infoWindowPosition.lat,}}isCustom={true}content={`<div style="pointer-events: none;background: #fff;border:1px solid silver;padding: 4px 8px;">${infoWindowTitle}</div>`}offset={[2,-10]}visible/>}getPoint = ()=>{fetch(API_FETCH_ZONES_DEPT_POINT, {method: 'POST',headers: {'Accept': 'application/json','Content-Type': 'application/json'},body: JSON.stringify({ deptId:this.props.deptId })}).then((response) => {if (response.ok) {return response.json();}throw new Error("Bad response from server");}).then((json) => {if(json.data instanceof Array){if (!json.data.length) {message.info("没有可显示的运输地点");}else{if(json.data.length > 500){this.setState({useCluster: true,})}json.data.forEach(d=>d.position= { longitude: d.longitude, latitude: d.latitude })this.setState({pointReferData:json.data},()=>{if (!this.map) return; // 如果地图实例未初始化，则不执行this.map.setFitView();})}}}).catch(e=>{})}renderInfo = () => {const { position, visible, data } = this.state.infoWindow;const {locTypes} = this.stateif (!data) {return null;}const locTypeItem = locTypes.find(t=>t.domVal==data.locType)const tds = (<div  className={styles.info}><div className='inforow'><span>运输地点代码</span><span>{data.locId}</span></div><div className='inforow'><span>运输地点描述</span><span>{data.locDesc}</span></div><div className='inforow'><span>类型</span><span>{locTypeItem?locTypeItem.domValDesc:data.locType}</span></div><div className='inforow'><span>城市</span><span>{data.city}</span></div><div className='inforow'><span>省份</span><span>{data.province}</span></div><div className='inforow'><span>国家</span><span>{data.country}</span></div><div className='inforow'><span>经度</span><span>{data.longitude}</span></div><div className='inforow'><span>纬度</span><span>{data.latitude}</span></div><div className='inforow'><span>地址</span><span>{data.addr}</span></div><div className='inforow'><span>限行区域</span><span>{data.udzDesc1}({data.udz1})</span></div><div className='inforow'><span>业务区域</span><span>{data.udzDesc2}({data.udz2})</span></div></div>);return (<InfoWindowposition={position}visible={visible}isCustom={true}offset={[2, 2]}>{tds}</InfoWindow>);};pointRender = (extData) => {return (<divstyle={{color: "#4e72b8",width: "8px",height: "8px",borderRadius: "50%",background: "#4169E1",textAlign: "center",}}/>);};initPointReferData = () => {if (!this.state.pointReferShow) {this.setState({pointReferData: [],});} else {this.getPoint()}};componentDidMount() {this.initPointReferData();}// 运输点参考// changePointReferShow = (checked) => {//   this.setState({ pointReferShow: checked }, () => {//     this.initPointReferData();//   });// };changePointReferShow = debounce((checked) => {this.setState({ pointReferShow: checked }, () => {this.initPointReferData();});}, 300); // 300ms 的防抖延迟render() {const {polygonActive,pointReferShow,data,pointReferData,areaReferData,areaReferShow,} = this.state;const option = {amapkey: MAP_AMAP_KEY,version: MAP_AMAP_VERSION,mapStyle: 'amap://styles/whitesmoke',// loading: this.renderLoading(),status: {resizeEnable: true,},plugins: ['ToolBar', 'Scale'],events: this.mapEvents,}return (<div style={{ width: "100%", height: "100vh", position: "relative" }}><ActionsForm><Form layout="inline"><Form.Item><SwitchcheckedChildren="显示地点"unCheckedChildren="显示地点"checked={pointReferShow}onChange={this.changePointReferShow}/></Form.Item></Form></ActionsForm><Map {...option}><Markersmarkers={pointReferData}offset={[0,0]}render={this.pointRender}events={this.markerEvents}useCluster={this.state.useCluster}/>{this.renderPolygons()}{this.renderInfoWindow()}{this.renderInfo()}</Map></div>);}
}

希望点的数量少于1000时直接展示所有点，不聚合

import React, { Component } from "react";
import PropTypes from "prop-types";
import Immutable from 'seamless-immutable';
import {Map,Polygon,Markers,PolyEditor,MouseTool,InfoWindow,
} from "react-amap";
import {Form,Button,Switch,Tooltip,Modal,message,Menu,Dropdown,Popconfirm,Icon,
} from "antd";
import isomorphicFetch from "isomorphic-fetch";
import {API_FETCH_DOMAIN,API_FETCH_ZONES_DEPT_POINT,API_FETCH_ZONES_GROUP
} from 'constants/api'
import fetch from 'common/fetch'import {MAP_AMAP_KEY,MAP_AMAP_DRIVING_KEY,MAP_AMAP_VERSION,
} from "constants/config";
import ActionsForm from "components/RoutePanel/ActionsForm";
import ZoneCascader from "components/PcaCascader/ZoneCascader";
import pstyles from "./polygons.scss";// 获取封闭polygon(首尾点坐标一致)
const _getClosedPolygon = (paths) => {if (Array.isArray(paths) && paths.length > 2) {const firstLocation = paths[0];const lastLocation = paths[paths.length - 1];if (firstLocation[0] === lastLocation[0] &&firstLocation[1] === lastLocation[1]) {return paths;} else {return [...paths, firstLocation];}} else {return [];}
};class PolygonEdit extends Component {constructor(props) {super(props);this.state = {polygonActive: false,pointReferShow: true, //运输点参考pointReferData: [],areaReferShow: false, //已绘制参考areaReferData: [],locTypes: [],data: props.data,mapEditable: props.mapEditable,deleteMenuVisible: false,hoverItemData: [],adcode: "",province: "",provinceCode:"",city: "",cityCode:"",area: "",street: "",polyline: "",infoWindowPosition: {longitude: 120,latitude: 30,},infoWindowVisible: false,infoWindowData: {id: "",desc: "",},infoWindow: {position: {longitude: 120,latitude: 30,},visible: false,data: null,},showLabels: true, // 默认显示悬浮名称useCluster:false};const _this = this;this.amap = null; // 地图this.mouseTool = null; // 鼠标工具this.amapEvents = {created: (mapInstance) => {_this.amap = mapInstance;_this.amap.on('zoomend', this.handleZoom);},close: () => {_this.amap = null;if (_this.amap) {_this.amap.off('zoomend', this.handleZoom);}},};this.polyEditorEvents = {created: (ins) => {_this.amap.setFitView();},addnode: () => {},adjust: ({ lnglat, pixel, type, target } = option) => {},removenode: () => {},end: ({ type, target }) => {this.polyEditorEnd(target, type);},};this.polygonEvents = {created: (ins) => {_this.amap.setFitView();},};this.toolEvents = {created: (tool) => {_this.mouseTool = tool;},draw({ obj }) {_this.drawWhat(obj);},};this.markerEvents = {created: (e) => {},mouseover: (e) => {const position = e.target.getPosition();this.setState({infoWindow: {position: {longitude: position.lng,latitude: position.lat,},visible: true,data: e.target.getExtData(),},});},mouseout: (e) => {this.setState({infoWindow: {position: {longitude: 120,latitude: 30,},visible: false,data: null,},});},};}componentWillUnmount() {if (this.amap) {this.amap.destroy();}}componentDidMount() {if(this.props.isGroup){this.initPointReferData();this.initAreaReferData()}this.getLocType()}// 缩放事件处理函数handleZoom = () => {const zoomLevel = this.amap.getZoom();console.log('zoomLevel', zoomLevel);console.log('this.state.pointReferData.length', this.state.pointReferData.length);// 判断点的数量是否小于1000，以及当前缩放等级if (this.state.pointReferData.length > 1000 && zoomLevel < 10) {this.setState({ useCluster: true });} else {this.setState({ useCluster: false });}};getPoint = ()=>{fetch(API_FETCH_ZONES_DEPT_POINT, {method: 'POST',headers: {'Accept': 'application/json','Content-Type': 'application/json'},body: JSON.stringify({ deptId:this.props.deptId })}).then((response) => {if (response.ok) {return response.json();}throw new Error("Bad response from server");}).then((json) => {if(json.data instanceof Array){if (!json.data.length) {message.info("没有可显示的运输地点");}else{json.data.forEach(d=>d.position= { longitude: d.longitude, latitude: d.latitude })this.setState({pointReferData:json.data},()=>{if (!this.amap) return; // 如果地图实例未初始化，则不执行this.amap.setFitView();})}}}).catch(e=>{})}renderPolygons = () => {const { areaReferShow, areaReferData } = this.state;const GROUP_KEY = {unConfiguredGroups: 'unConfiguredGroups',configuredGroups: 'configuredGroups'}const prepareGroups = (groups) => {const _groups = Immutable.asMutable(groups, { deep: true }).map(group => ({...group,zoneDetail: (group.zoneDetail || []).map(detail => {return {...detail,geoArea: JSON.parse(detail.geoArea)}})}))return {groups,[GROUP_KEY.unConfiguredGroups]: _groups.filter(group => !group.lines.length).map(group => ({...group,lines: []})),[GROUP_KEY.configuredGroups]: _groups.filter(group => group.lines.length),zoneOptions: _groups.map(group => ({value: group.zoneId,label: group.zoneDesc,})),polygons: _groups.reduce((polygons, group) => {polygons.push(...group.zoneDetail.map(zoneDetail => ({ ...zoneDetail, zoneDesc: group.zoneDesc }))) // flat zoneDetailreturn polygons}, [])}}const newData = prepareGroups(areaReferData)const polygons = newData.polygonsconst l = polygons.lengthconst _polygons = []for (let i = 0; i < l; i++) {const detail = polygons[i]if (detail.geoArea && Array.isArray(detail.geoArea) && detail.geoArea.length) {detail.geoArea.forEach((path, pathId) => {_polygons.push(<Polygon path={path}key={`${detail.id}:${pathId}`}style={{fillColor: '#333333',fillOpacity: 0.3,strokeOpacity: 0.5,strokeWeight: 1,strokeColor: '#333333',}}events={{mousemove: (e) => {this.setState(() => ({infoWindowPosition: e.lnglat,infoWindowTitle: detail.zoneDesc}))},mouseout: () => {this.setState(() => ({infoWindowPosition: null}))}}}extData={{ zoneId: detail.zoneId }}/>)})}else{console.log('detail.geoArea',detail.geoArea)}}return _polygons}getArea = ()=>{fetch(API_FETCH_ZONES_GROUP, {method: 'POST',credentials: 'include',headers: {'Accept': 'application/json','Content-Type': 'application/json'},body: JSON.stringify({ branchId:this.props.branchId,deptId:this.props.deptId})}).then((response) => {if (response.ok) {return response.json();}throw new Error("Bad response from server");}).then((json) => {if(json.data && json.data.data instanceof Array){if (!json.data.data.length) {message.info("没有可显示的区域");}else{this.setState({areaReferData:json.data.data})}}}).catch(e=>{console.log('e',e)})}renderInfoWindow() {const { infoWindowPosition, infoWindowTitle, showLabels } = this.stateif(showLabels){if (!infoWindowPosition) {return null}return <InfoWindowposition={{longitude: infoWindowPosition.lng,latitude: infoWindowPosition.lat,}}isCustom={true}content={`<div style="pointer-events: none;background: #fff;border:1px solid silver;padding: 4px 8px;">${infoWindowTitle}</div>`}offset={[2,2]}visible/>}}initPointReferData = () => {if (!this.state.pointReferShow) {this.setState({pointReferData: [],});} else {this.getPoint()}};initAreaReferData = () => {if (!this.state.areaReferShow) {this.setState({areaReferData: [],});} else {this.getArea()}};renderLoading = () => {const loadingStyle = {position: "relative",height: "100%",width: "100%",display: "flex",justifyContent: "center",alignItems: "center",};return <div style={loadingStyle}>Loading Map...</div>;};// 运输点参考changePointReferShow = (checked) => {this.setState({ pointReferShow: checked }, () => {this.initPointReferData();});};// 已绘制区域参考changeAreaReferShow = (checked) => {this.setState({ areaReferShow: checked }, () => {this.initAreaReferData();});};// 是否悬浮显示名称toggleLabels = (checked) => {this.setState({ showLabels: checked });};pointRender = (extData) => {return (<divstyle={{color: "#4e72b8",width: "8px",height: "8px",borderRadius: "50%",background: "#4169E1",textAlign: "center",}}/>);};getLocType=()=>{fetch(`${API_FETCH_DOMAIN}LOCATION_TYPE`,{credentials: 'include'}).then((response) => {if (response.ok) {return response.json();}throw new Error("Bad response from server");}).then((json) => {if(json.data instanceof Array){this.setState({locTypes:json.data})}}).catch(e=>{})}renderInfo = () => {const { position, visible, data } = this.state.infoWindow;const {locTypes} = this.stateif (!data) {return null;}const locTypeItem = locTypes.find(t=>t.domVal==data.locType)const tds = (<div  className={pstyles.pinfo}><div className='inforow'><span>运输地点代码</span><span>{data.locId}</span></div><div className='inforow'><span>运输地点描述</span><span>{data.locDesc}</span></div><div className='inforow'><span>类型</span><span>{locTypeItem?locTypeItem.domValDesc:data.locType}</span></div><div className='inforow'><span>城市</span><span>{data.city}</span></div><div className='inforow'><span>省份</span><span>{data.province}</span></div><div className='inforow'><span>国家</span><span>{data.country}</span></div><div className='inforow'><span>经度</span><span>{data.longitude}</span></div><div className='inforow'><span>纬度</span><span>{data.latitude}</span></div><div className='inforow'><span>地址</span><span>{data.addr}</span></div><div className='inforow'><span>限行区域</span><span>{data.udzDesc1}({data.udz1})</span></div><div className='inforow'><span>业务区域</span><span>{data.udzDesc2}({data.udz2})</span></div></div>);return (<InfoWindowposition={position}visible={visible}isCustom={true}offset={[2, 2]}>{tds}</InfoWindow>);};// polygon edit switchtogglePolygon = (checked, e) => {if (checked) {// open edit and close add if it is drawingif (this.mouseTool) {this.mouseTool.close();}this.setState({ polygonActive: true, isDrawingPolygon: false });} else {// close editthis.setState({ polygonActive: false });}};// polygon add switchtoggleDrawPolygon = (checked, e) => {if (checked) {if (this.mouseTool) {this.mouseTool.polygon();this.setState({ isDrawingPolygon: true });message.success("鼠标左键双击或右键单击完成当前多边形！");}} else {if (this.mouseTool) {this.mouseTool.close();this.setState({ isDrawingPolygon: false });}}};// finish polygon drawdrawWhat = (obj) => {const paths = obj.getPath();let data = this.state.data.slice();const pathData = paths.map((item) => [item.lng, item.lat]);if (pathData.length > 2) {if (this.amap) {this.amap.remove(obj);}data.push(_getClosedPolygon(pathData));this.setState({ data });message.success(`您成功绘制了一个${paths.length}边形，可继续绘制或点击结束多边形绘制按钮`);}};// polygon editor endpolyEditorEnd = (target, type) => {const paths = target.getPath();let isSinglePath = false; // 是否是单围栏const pathData = paths.map((item, index) => {if (Array.isArray(item)) {const itemPaths = item.map((element) => [element.lng, element.lat]);return _getClosedPolygon(itemPaths);} else {isSinglePath = true;return [item.lng, item.lat];}});this.setState({data: isSinglePath ? [_getClosedPolygon(pathData)] : pathData,});};// 多边形删除下拉菜单deleteMenuVisibleChange = (flag) => {this.setState({ deleteMenuVisible: flag });};// 删除多边形handleMenuClick = (e) => {this.handleDeletePath(e.key);};handleDeletePath = (key) => {const path = [...this.state.data];path.splice(key, 1);this.setState({ data: path, deleteMenuVisible: false });};handleMenuHover = (key) => {this.setState({ hoverItemData: this.state.data[key] });};handleChangeAdcode = ({ adcode, province, city, area, street,provinceCode,cityCode }) => {this.setState({ adcode, province, city, area, street,provinceCode, cityCode});};handleAdcodeCancle = () => {this.setState({adcode: "",province: "",provinceCode:"",city: "",cityCode:"",area: "",street: "",});};handleAdcodeConfirm = () => {const { adcode, provinceCode, cityCode, area, street, mapEditable } = this.state;if (adcode) {this.setState({mapEditable: "N",adcode: "",polygonActive: false,isDrawingPolygon: false,});if (street) {isomorphicFetch(`/city-tiles/${provinceCode}_${cityCode}.json`).then((response) => {if (response.ok) {return response.json();}throw new Error("Bad response from server");}).then((json) => {if (json.status === "0") {throw new Error("No districts from server");}try {const streetItemData = json.features.find((s) => s.properties.subdistrict == street).geometry.coordinates;if (this.mouseTool) {this.mouseTool.close();}this.setState({data: streetItemData, // some data});if (this.amap) {this.amap.setFitView();}} catch (e) {message.error("获取行政区划数据失败！");}// const polyline = (json.districts && json.districts[0]) ? json.districts[0].polyline : [];// const data = polyline.split('|').map(block => block.split(';').map(pointer => pointer.split(',').map(lnglat => Number(lnglat))));// if (this.mouseTool){//   this.mouseTool.close();// }// this.setState({//   data: data, // some data// })// if (this.amap) {//   this.amap.setFitView();// }}).catch((error) => {message.error("获取行政区划数据失败！");this.setState({mapEditable: "Y",province: "",provinceCode:"",city: "",cityCode:"",area: "",street: "",data: [],});});} else {// fetch polyline dataisomorphicFetch(`//restapi.amap.com/v3/config/district?key=e17fafe279209e4b3a303cc907347277&keywords=${adcode}&subdistrict=0&extensions=all`).then((response) => {if (response.ok) {return response.json();}throw new Error("Bad response from server");}).then((json) => {if (json.status === "0") {throw new Error("No districts from server");}const polyline =json.districts && json.districts[0]? json.districts[0].polyline: [];const data = polyline.split("|").map((block) =>block.split(";").map((pointer) =>pointer.split(",").map((lnglat) => Number(lnglat))));if (this.mouseTool) {this.mouseTool.close();}this.setState({data: data, // some data});if (this.amap) {this.amap.setFitView();}}).catch((error) => {message.error("获取行政区划数据失败！");this.setState({mapEditable: "Y",province: "",provinceCode:"",city: "",cityCode:"",area: "",street: "",data: [],});});}} else {if (mapEditable === "N") {this.setState({mapEditable: "Y",adcode: "",province: "",provinceCode:"",city: "",cityCode:"",area: "",street: "",data: [],});}}};handleFinished = () => {const {polygonActive,data,adcode,province,city,area,street,mapEditable,} = this.state;let result = {geoArea:Array.isArray(data) && data.length > 0 ? JSON.stringify(data) : null,mapEditable,};if (mapEditable === "N") {Object.assign(result, {country: "中国",state: province,city,district: area,subdistrict: street,});}if (polygonActive) {this.setState({ polygonActive: false });Modal.confirm({title: "您的多边形调整还未结束，是否结束?",onOk: () => {this.props.onConfirm(result);},onCancel: () => {this.setState({ polygonActive: true });},});} else {this.props.onConfirm(result);}};render() {const {polygonActive,isDrawingPolygon,pointReferShow,data,pointReferData,areaReferData,areaReferShow,deleteMenuVisible,hoverItemData,adcode,mapEditable,infoWindowPosition,infoWindowVisible,infoWindowData,showLabels,useCluster} = this.state;const { onCancle, isGroup } = this.props;const option = {amapkey: MAP_AMAP_KEY,version: MAP_AMAP_VERSION,mapStyle: "amap://styles/whitesmoke",loading: this.renderLoading(),status: {resizeEnable: true,},plugins: ["ToolBar", "Scale"],events: this.amapEvents,};return (<div style={{ width: "100%", height: "100vh", position: "relative" }}><ActionsForm>{isGroup ? (<Form layout="inline"><Form.Item><Popconfirmtitle={<ZoneCascaderadcode={adcode}onChange={this.handleChangeAdcode}/>}icon={<Tooltip title="选择行政区划。此操作将首先清空已有围栏，已选择的行政区划围栏不允许编辑"><Icon type="question-circle-o" /></Tooltip>}onCancel={this.handleAdcodeCancle}onConfirm={this.handleAdcodeConfirm}><Button type="primary">行政区划选择{isGroup}</Button></Popconfirm></Form.Item><Form.Item><Switchdisabled={mapEditable === "N"}checkedChildren="调整"unCheckedChildren="调整"checked={polygonActive}onChange={this.togglePolygon}/></Form.Item><Form.Item><Switchdisabled={mapEditable === "N"}checkedChildren="新增"unCheckedChildren="新增"checked={isDrawingPolygon}onChange={this.toggleDrawPolygon}/></Form.Item><Form.Item><Dropdownoverlay={<Menu onClick={this.handleMenuClick}>{data &&data.length > 0 &&data.map((item, index) => (<Menu.Item key={index}><spanonMouseOver={() => this.handleMenuHover(index)}>{`${index + 1} 删除`}</span></Menu.Item>))}</Menu>}onVisibleChange={this.deleteMenuVisibleChange}visible={deleteMenuVisible}disabled={mapEditable === "N"}><Button>删除</Button></Dropdown></Form.Item><Form.Item><Button onClick={onCancle}>取消</Button></Form.Item><Form.Item><Button type="primary" onClick={this.handleFinished}>完成</Button></Form.Item><Form.Item><SwitchcheckedChildren="显示地点"unCheckedChildren="显示地点"checked={pointReferShow}onChange={this.changePointReferShow}/></Form.Item><Form.Item><SwitchcheckedChildren="显示其他区域"unCheckedChildren="显示其他区域"checked={areaReferShow}onChange={this.changeAreaReferShow}/></Form.Item><Form.Item><SwitchcheckedChildren="显示区域名称"unCheckedChildren="隐藏区域名称"checked={showLabels}onChange={this.toggleLabels}/></Form.Item></Form>) : (<Form layout="inline"><Form.Item><Button type="primary" onClick={onCancle}>关闭</Button></Form.Item></Form>)}</ActionsForm><Map {...option}><Markersmarkers={pointReferData}offset={[0,0]}render={this.pointRender}events={this.markerEvents}useCluster={useCluster}/>{isGroup && <MouseTool events={this.toolEvents} />}{isGroup ? (<Polygonpath={data}style={{ fillOpacity: 0.3, strokeOpacity: 0.5, strokeWeight: 1 }}events={this.polygonEvents}><PolyEditoractive={polygonActive && data.length > 0 && data.flat().length <= 100}events={this.polyEditorEvents}/></Polygon>) : (data.map((item, index) => (<Polygonevents={this.polygonEvents}key={index}path={item}style={{fillOpacity: 0.3,strokeOpacity: 0.5,strokeWeight: 1,}}/>)))}<Polygonvisible={deleteMenuVisible}path={[hoverItemData]}zIndex={100}style={{fillColor: "red",fillOpacity: 0.3,strokeOpacity: 0.5,strokeWeight: 1,}}/>{this.renderInfo()}{this.renderPolygons()}{this.renderInfoWindow()}</Map></div>);}
}PolygonEdit.propTypes = {isGroup: PropTypes.bool, // 是：data 为单个 polygon 数据；否： data 为多个 polygon 数据data: PropTypes.array,onCancle: PropTypes.func,onConfirm: PropTypes.func,
};
PolygonEdit.defaultProps = {isGroup: true,data: [],onCancle: () => {},onConfirm: () => {},
};export default PolygonEdit;