html网站更新,公共空间设计网站,宝坻网站建设公司,网站的建设包括前言#xff1a;高版本的react-amap 支持MassMarkers 组件用于一次性添加大量的标记点。本次优化的海量点是在低版本react-amap的基础上。官方推荐使用聚合useCluster属性来优化海量点的渲染。
直接附上代码#xff1a;
import React, { Component } from react高版本的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 stylepointer-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(dd.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(tt.domValdata.locType)const tds (div className{styles.info}div classNameinforowspan运输地点代码/spanspan{data.locId}/span/divdiv classNameinforowspan运输地点描述/spanspan{data.locDesc}/span/divdiv classNameinforowspan类型/spanspan{locTypeItem?locTypeItem.domValDesc:data.locType}/span/divdiv classNameinforowspan城市/spanspan{data.city}/span/divdiv classNameinforowspan省份/spanspan{data.province}/span/divdiv classNameinforowspan国家/spanspan{data.country}/span/divdiv classNameinforowspan经度/spanspan{data.longitude}/span/divdiv classNameinforowspan纬度/spanspan{data.latitude}/span/divdiv classNameinforowspan地址/spanspan{data.addr}/span/divdiv classNameinforowspan限行区域/spanspan{data.udzDesc1}({data.udz1})/span/divdiv classNameinforowspan业务区域/spanspan{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 }}ActionsFormForm layoutinlineForm.ItemSwitchcheckedChildren显示地点unCheckedChildren显示地点checked{pointReferShow}onChange{this.changePointReferShow}//Form.Item/Form/ActionsFormMap {...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/fetchimport {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(dd.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 stylepointer-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(tt.domValdata.locType)const tds (div className{pstyles.pinfo}div classNameinforowspan运输地点代码/spanspan{data.locId}/span/divdiv classNameinforowspan运输地点描述/spanspan{data.locDesc}/span/divdiv classNameinforowspan类型/spanspan{locTypeItem?locTypeItem.domValDesc:data.locType}/span/divdiv classNameinforowspan城市/spanspan{data.city}/span/divdiv classNameinforowspan省份/spanspan{data.province}/span/divdiv classNameinforowspan国家/spanspan{data.country}/span/divdiv classNameinforowspan经度/spanspan{data.longitude}/span/divdiv classNameinforowspan纬度/spanspan{data.latitude}/span/divdiv classNameinforowspan地址/spanspan{data.addr}/span/divdiv classNameinforowspan限行区域/spanspan{data.udzDesc1}({data.udz1})/span/divdiv classNameinforowspan业务区域/spanspan{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?keye17fafe279209e4b3a303cc907347277keywords${adcode}subdistrict0extensionsall).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 layoutinlineForm.ItemPopconfirmtitle{ZoneCascaderadcode{adcode}onChange{this.handleChangeAdcode}/}icon{Tooltip title选择行政区划。此操作将首先清空已有围栏已选择的行政区划围栏不允许编辑Icon typequestion-circle-o //Tooltip}onCancel{this.handleAdcodeCancle}onConfirm{this.handleAdcodeConfirm}Button typeprimary行政区划选择{isGroup}/Button/Popconfirm/Form.ItemForm.ItemSwitchdisabled{mapEditable N}checkedChildren调整unCheckedChildren调整checked{polygonActive}onChange{this.togglePolygon}//Form.ItemForm.ItemSwitchdisabled{mapEditable N}checkedChildren新增unCheckedChildren新增checked{isDrawingPolygon}onChange{this.toggleDrawPolygon}//Form.ItemForm.ItemDropdownoverlay{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.ItemForm.ItemButton onClick{onCancle}取消/Button/Form.ItemForm.ItemButton typeprimary onClick{this.handleFinished}完成/Button/Form.ItemForm.ItemSwitchcheckedChildren显示地点unCheckedChildren显示地点checked{pointReferShow}onChange{this.changePointReferShow}//Form.ItemForm.ItemSwitchcheckedChildren显示其他区域unCheckedChildren显示其他区域checked{areaReferShow}onChange{this.changeAreaReferShow}//Form.ItemForm.ItemSwitchcheckedChildren显示区域名称unCheckedChildren隐藏区域名称checked{showLabels}onChange{this.toggleLabels}//Form.Item/Form) : (Form layoutinlineForm.ItemButton typeprimary onClick{onCancle}关闭/Button/Form.Item/Form)}/ActionsFormMap {...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;
