react-amap海量点优化

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

1. import React, { Component } from "react";
2. import { Map, Markers, Polygon, InfoWindow } from 'react-amap'
3. import {
4.   Form,
5.   Switch,
6.   message,
7. } from "antd";
8. import ActionsForm from "components/RoutePanel/ActionsForm";
9. import { MAP_AMAP_KEY, MAP_AMAP_VERSION } from 'constants/config'
10. import {
11.   API_FETCH_ZONES_DEPT_POINT,
12. } from 'constants/api'
13. import fetch from 'common/fetch'
14. import styles from "./amap.css";
15. import { debounce } from 'lodash';
17. const polygonType = {
18.   main: 'main',
19.   adjacent: 'adjacent',
20.   normal: 'normal',
21. }
23. // 获取区域样式
24. const getPolygonStyle = (pt) => {
25.   switch (pt) {
26.     case polygonType.main:
27.       return {
28.         fillColor: '#DC2626',
29.         fillOpacity: 0.5,
30.         strokeOpacity: 0.5,
31.         strokeWeight: 2,
32.         strokeColor: '#DC2626',
33.       }
34.     case polygonType.adjacent:
35.       return {
36.         fillColor: '#34D399',
37.         fillOpacity: 0.5,
38.         strokeOpacity: 1,
39.         strokeWeight: 1,
40.         strokeColor: '#34D399',
41.       }
42.     case polygonType.normal:
43.     default:
44.       return {
45.         fillColor: '#333333',
46.         fillOpacity: 0.3,
47.         strokeOpacity: 0.5,
48.         strokeWeight: 1,
49.         strokeColor: '#333333',
50.       }
51.   }
52. }
54. export class ZoneNeighborhoodMap extends Component {
55.   constructor(props) {
56.     super(props)
58.     this.map = null; // 地图实例
59.     this.mapEvents = {
60.       created: (mapInstance) => {
61.         this.map = mapInstance;
62.         this.map.on('zoomend', this.handleZoom);
63.       },
64.       close: () => {
65.         this.map = null;
66.         if (this.map) {
67.           this.map.off('zoomend', this.handleZoom);
68.         }
69.       }
70.     };
72.     this.state = {
73.       infoWindowPosition: null,
74.       infoWindowTitle: '',
75.       polygonActive: false,
76.       pointReferShow: true, //运输点参考
77.       pointReferData: [],
78.       areaReferShow: true, //已绘制参考
79.       areaReferData: [],
80.       locTypes: [],
81.       data: props.data,
84.       // infoWindowPosition: {
85.       //   longitude: 120,
86.       //   latitude: 30,
87.       // },
88.       infoWindowVisible: false,
89.       infoWindowData: {
90.         id: "",
91.         desc: "",
92.       },
94.       infoWindow: {
95.         position: {
96.           longitude: 120,
97.           latitude: 30,
98.         },
99.         visible: false,
100.         data: null,
101.       },
102.       useCluster:false
103.     }
104.     this.markerEvents = {
105.       created: (e) => {},
106.       mouseover: (e) => {
107.         const position = e.target.getPosition();
108.         this.setState({
109.           infoWindow: {
110.             position: {
111.               longitude: position.lng,
112.               latitude: position.lat,
113.             },
114.             visible: true,
115.             data: e.target.getExtData(),
116.           },
117.         });
118.       },
119.       mouseout: (e) => {
120.         this.setState({
121.           infoWindow: {
122.             position: {
123.               longitude: 120,
124.               latitude: 30,
125.             },
126.             visible: false,
127.             data: null,
128.           },
129.         });
130.       },
131.     };
132.   }
133.   
134.   componentWillUnmount() {
135.     if (this.map) {
136.       this.map.destroy();
137.     }
138.   }
140.   componentWillUnmount() {
141.     if (this.map) {
142.       this.map.destroy()
143.     }
144.   }
145.   
146.   // 缩放事件处理函数
147.   handleZoom = () => {
148.     const zoomLevel = this.map.getZoom();
149.     console.log('zoomLevel',zoomLevel)
150.     if (zoomLevel > 8) {
151.       this.setState({ useCluster: false });
152.     } else {
153.       this.setState({ useCluster: true });
154.     }
155.   };
157.   setFitViewWithZoneId(zoneId) {
158.     const fitOverlays = []
159.     this.map.getAllOverlays().forEach(polygon => {
160.       if (polygon.getExtData().zoneId === zoneId) {
161.         fitOverlays.push(polygon)
162.       }
163.     })
165.     if (fitOverlays.length) {
166.       this.map.setFitView(fitOverlays, false, undefined, this.map.getZoom())
167.     }
168.   }
170.   renderPolygons() {
171.     const { mainZoneId, polygons, toggleAdjacentZone, adjacentZoneIds } = this.props
173.     const l = polygons.length
175.     const _polygons = []
177.     for (let i = 0; i < l; i++) {
178.       const detail = polygons[i]
179.       if (detail.geoArea && detail.geoArea.length) {
180.         let _polygonType = polygonType.normal
181.         if (detail.zoneId === mainZoneId) {
182.           _polygonType = polygonType.main
183.         } else if (adjacentZoneIds.includes(detail.zoneId)) {
184.           _polygonType = polygonType.adjacent
185.         }
187.         detail.geoArea.forEach((path, pathId) => {
188.           _polygons.push(
189.             <Polygon
190.               path={path}
191.               key={`${detail.id}:${pathId}`}
192.               style={getPolygonStyle(_polygonType)}
193.               events={{
194.                 click: () => {
195.                   if (detail.zoneId === mainZoneId) {
196.                     return
197.                   }
198.                   toggleAdjacentZone(detail.zoneId)
199.                 },
200.                 mousemove: (e) => {
201.                   this.setState(() => ({
202.                     infoWindowPosition: e.lnglat,
203.                     infoWindowTitle: detail.zoneDesc
204.                   }))
205.                 },
206.                 mouseout: () => {
207.                   this.setState(() => ({
208.                     infoWindowPosition: null
209.                   }))
210.                 }
211.               }}
212.               extData={{ zoneId: detail.zoneId }}
213.             />
214.           )
215.         })
216.       }
217.     }
219.     return _polygons
220.   }
222.   renderInfoWindow() {
223.     const { infoWindowPosition, infoWindowTitle } = this.state
224.     if (!infoWindowPosition) {
225.       return null
226.     }
228.     return <InfoWindow
229.       position={{
230.         longitude: infoWindowPosition.lng,
231.         latitude: infoWindowPosition.lat,
232.       }}
233.       isCustom={true}
234.       content={`<div style="pointer-events: none;background: #fff;border:1px solid silver;padding: 4px 8px;">${infoWindowTitle}</div>`}
235.       offset={[2,-10]}
236.       visible
237.     />
238.   }
239.   getPoint = ()=>{
240.     fetch(API_FETCH_ZONES_DEPT_POINT, {
241.       method: 'POST',
242.       headers: {
243.         'Accept': 'application/json',
244.         'Content-Type': 'application/json'
245.       },
246.       body: JSON.stringify({ deptId:this.props.deptId })
247.     }).then((response) => {
248.       if (response.ok) {
249.         return response.json();
250.       }
251.       throw new Error("Bad response from server");
252.     })
253.     .then((json) => {
254.       if(json.data instanceof Array){
255.         if (!json.data.length) {
256.           message.info("没有可显示的运输地点");
257.         }else{
258.           if(json.data.length > 500){
259.             this.setState({
260.               useCluster: true,
261.             })
262.           }
263.           json.data.forEach(d=>d.position= { longitude: d.longitude, latitude: d.latitude })
264.           this.setState({pointReferData:json.data},()=>{
265.            if (!this.map) return; // 如果地图实例未初始化，则不执行
266.             this.map.setFitView();
267.           })
268.         }
269.       }
270.     })
271.     .catch(e=>{})
272.   }
273.   renderInfo = () => {
274.     const { position, visible, data } = this.state.infoWindow;
275.     const {locTypes} = this.state
276.     if (!data) {
277.       return null;
278.     }
279.     const locTypeItem = locTypes.find(t=>t.domVal==data.locType)
280.     const tds = (
281.       <div  className={styles.info}>
282.         <div className='inforow'>
283.           <span>运输地点代码</span>
284.           <span>{data.locId}</span>
285.         </div>
286.         <div className='inforow'>
287.           <span>运输地点描述</span>
288.           <span>{data.locDesc}</span>
289.         </div>
290.         <div className='inforow'>
291.           <span>类型</span>
292.           <span>{locTypeItem?locTypeItem.domValDesc:data.locType}</span>
293.         </div>
294.         <div className='inforow'>
295.           <span>城市</span>
296.           <span>{data.city}</span>
297.         </div>
298.         <div className='inforow'>
299.           <span>省份</span>
300.           <span>{data.province}</span>
301.         </div>
302.         <div className='inforow'>
303.           <span>国家</span>
304.           <span>{data.country}</span>
305.         </div>
306.         <div className='inforow'>
307.           <span>经度</span>
308.           <span>{data.longitude}</span>
309.         </div>
310.         <div className='inforow'>
311.           <span>纬度</span>
312.           <span>{data.latitude}</span>
313.         </div>
314.         <div className='inforow'>
315.           <span>地址</span>
316.           <span>{data.addr}</span>
317.         </div>
318.         <div className='inforow'>
319.           <span>限行区域</span>
320.          <span>{data.udzDesc1}({data.udz1})</span>
321.         </div>
322.         <div className='inforow'>
323.           <span>业务区域</span>
324.          <span>{data.udzDesc2}({data.udz2})</span>
325.         </div>
326.       </div>
327.     );
328.     return (
329.       <InfoWindow
330.         position={position}
331.         visible={visible}
332.         isCustom={true}
333.         offset={[2, 2]}
334.       >
335.         {tds}
336.       </InfoWindow>
337.     );
338.   };
339.   pointRender = (extData) => {
340.     return (
341.       <div
342.         style={{
343.           color: "#4e72b8",
344.           width: "8px",
345.           height: "8px",
346.           borderRadius: "50%",
347.           background: "#4169E1",
348.           textAlign: "center",
349.         }}
350.       />
351.     );
352.   };
353.   initPointReferData = () => {
354.     if (!this.state.pointReferShow) {
355.       this.setState({
356.         pointReferData: [],
357.       });
358.     } else {
359.       this.getPoint()
360.     }
361.   };
362.   componentDidMount() {
363.     this.initPointReferData();
364.   }
365.   // 运输点参考
366.   // changePointReferShow = (checked) => {
367.   //   this.setState({ pointReferShow: checked }, () => {
368.   //     this.initPointReferData();
369.   //   });
370.   // };
371.   changePointReferShow = debounce((checked) => {
372.     this.setState({ pointReferShow: checked }, () => {
373.       this.initPointReferData();
374.     });
375.   }, 300); // 300ms 的防抖延迟
376.   render() {
377.     const {
378.       polygonActive,
379.       pointReferShow,
380.       data,
381.       pointReferData,
382.       areaReferData,
383.       areaReferShow,
384.     } = this.state;
385.     const option = {
386.       amapkey: MAP_AMAP_KEY,
387.       version: MAP_AMAP_VERSION,
388.       mapStyle: 'amap://styles/whitesmoke',
389.       // loading: this.renderLoading(),
390.       status: {
391.         resizeEnable: true,
392.       },
393.       plugins: ['ToolBar', 'Scale'],
394.       events: this.mapEvents,
395.     }
397.     return (
398.       <div style={{ width: "100%", height: "100vh", position: "relative" }}>
399.         <ActionsForm>
400.             <Form layout="inline">
401.               <Form.Item>
402.                 <Switch
403.                   checkedChildren="显示地点"
404.                   unCheckedChildren="显示地点"
405.                   checked={pointReferShow}
406.                   onChange={this.changePointReferShow}
407.                 />
408.               </Form.Item>
409.             </Form>
410.         </ActionsForm>
411.         <Map {...option}>
412.           <Markers
413.           markers={pointReferData}
414.           offset={[0,0]}
415.           render={this.pointRender}
416.           events={this.markerEvents}
417.           useCluster={this.state.useCluster}
418.         />
419.         {this.renderPolygons()}
420.         {this.renderInfoWindow()}
421.         {this.renderInfo()}
422.     </Map>
423.       </div>
424.     );
425.   }
426. }

复制代码

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

1. import React, { Component } from "react";
2. import PropTypes from "prop-types";
3. import Immutable from 'seamless-immutable';
4. import {
5.   Map,
6.   Polygon,
7.   Markers,
8.   PolyEditor,
9.   MouseTool,
10.   InfoWindow,
11. } from "react-amap";
12. import {
13.   Form,
14.   Button,
15.   Switch,
16.   Tooltip,
17.   Modal,
18.   message,
19.   Menu,
20.   Dropdown,
21.   Popconfirm,
22.   Icon,
23. } from "antd";
24. import isomorphicFetch from "isomorphic-fetch";
25. import {
26.   API_FETCH_DOMAIN,
27.   API_FETCH_ZONES_DEPT_POINT,
28.   API_FETCH_ZONES_GROUP
29. } from 'constants/api'
30. import fetch from 'common/fetch'
32. import {
33.   MAP_AMAP_KEY,
34.   MAP_AMAP_DRIVING_KEY,
35.   MAP_AMAP_VERSION,
36. } from "constants/config";
37. import ActionsForm from "components/RoutePanel/ActionsForm";
38. import ZoneCascader from "components/PcaCascader/ZoneCascader";
39. import pstyles from "./polygons.scss";
42. // 获取封闭polygon(首尾点坐标一致)
43. const _getClosedPolygon = (paths) => {
44.   if (Array.isArray(paths) && paths.length > 2) {
45.     const firstLocation = paths[0];
46.     const lastLocation = paths[paths.length - 1];
47.     if (
48.       firstLocation[0] === lastLocation[0] &&
49.       firstLocation[1] === lastLocation[1]
50.     ) {
51.       return paths;
52.     } else {
53.       return [...paths, firstLocation];
54.     }
55.   } else {
56.     return [];
57.   }
58. };
60. class PolygonEdit extends Component {
61.   constructor(props) {
62.     super(props);
63.     this.state = {
64.       polygonActive: false,
65.       pointReferShow: true, //运输点参考
66.       pointReferData: [],
67.       areaReferShow: false, //已绘制参考
68.       areaReferData: [],
69.       locTypes: [],
70.       data: props.data,
71.       mapEditable: props.mapEditable,
73.       deleteMenuVisible: false,
74.       hoverItemData: [],
76.       adcode: "",
77.       province: "",
78.       provinceCode:"",
79.       city: "",
80.       cityCode:"",
81.       area: "",
82.       street: "",
83.       polyline: "",
85.       infoWindowPosition: {
86.         longitude: 120,
87.         latitude: 30,
88.       },
89.       infoWindowVisible: false,
90.       infoWindowData: {
91.         id: "",
92.         desc: "",
93.       },
95.       infoWindow: {
96.         position: {
97.           longitude: 120,
98.           latitude: 30,
99.         },
100.         visible: false,
101.         data: null,
102.       },
103.       showLabels: true, // 默认显示悬浮名称
104.       useCluster:false
105.     };
107.     const _this = this;
108.     this.amap = null; // 地图
109.     this.mouseTool = null; // 鼠标工具
110.     this.amapEvents = {
111.       created: (mapInstance) => {
112.         _this.amap = mapInstance;
113.         _this.amap.on('zoomend', this.handleZoom);
114.       },
115.       close: () => {
116.         _this.amap = null;
117.         if (_this.amap) {
118.           _this.amap.off('zoomend', this.handleZoom);
119.         }
120.       },
121.     };
122.     this.polyEditorEvents = {
123.       created: (ins) => {
124.         _this.amap.setFitView();
125.       },
126.       addnode: () => {},
127.       adjust: ({ lnglat, pixel, type, target } = option) => {},
128.       removenode: () => {},
129.       end: ({ type, target }) => {
130.         this.polyEditorEnd(target, type);
131.       },
132.     };
133.     this.polygonEvents = {
134.       created: (ins) => {
135.         _this.amap.setFitView();
136.       },
137.     };
138.     this.toolEvents = {
139.       created: (tool) => {
140.         _this.mouseTool = tool;
141.       },
142.       draw({ obj }) {
143.         _this.drawWhat(obj);
144.       },
145.     };
146.     this.markerEvents = {
147.       created: (e) => {},
148.       mouseover: (e) => {
149.         const position = e.target.getPosition();
150.         this.setState({
151.           infoWindow: {
152.             position: {
153.               longitude: position.lng,
154.               latitude: position.lat,
155.             },
156.             visible: true,
157.             data: e.target.getExtData(),
158.           },
159.         });
160.       },
161.       mouseout: (e) => {
162.         this.setState({
163.           infoWindow: {
164.             position: {
165.               longitude: 120,
166.               latitude: 30,
167.             },
168.             visible: false,
169.             data: null,
170.           },
171.         });
172.       },
173.     };
174.   }
176.   componentWillUnmount() {
177.     if (this.amap) {
178.       this.amap.destroy();
179.     }
180.   }
182.   componentDidMount() {
183.     if(this.props.isGroup){
184.       this.initPointReferData();
185.       this.initAreaReferData()
186.     }
187.     this.getLocType()
188.   }
189.    // 缩放事件处理函数
190.   handleZoom = () => {
191.     const zoomLevel = this.amap.getZoom();
192.     console.log('zoomLevel', zoomLevel);
193.     console.log('this.state.pointReferData.length', this.state.pointReferData.length);
194.   
195.     // 判断点的数量是否小于1000，以及当前缩放等级
196.     if (this.state.pointReferData.length > 1000 && zoomLevel < 10) {
197.       this.setState({ useCluster: true });
198.     } else {
199.       this.setState({ useCluster: false });
200.     }
201.   };
202.   getPoint = ()=>{
203.     fetch(API_FETCH_ZONES_DEPT_POINT, {
204.       method: 'POST',
205.       headers: {
206.         'Accept': 'application/json',
207.         'Content-Type': 'application/json'
208.       },
209.       body: JSON.stringify({ deptId:this.props.deptId })
210.     }).then((response) => {
211.       if (response.ok) {
212.         return response.json();
213.       }
214.       throw new Error("Bad response from server");
215.     })
216.     .then((json) => {
217.       if(json.data instanceof Array){
218.         if (!json.data.length) {
219.           message.info("没有可显示的运输地点");
220.         }else{
221.           json.data.forEach(d=>d.position= { longitude: d.longitude, latitude: d.latitude })
222.           this.setState({pointReferData:json.data},()=>{
223.             if (!this.amap) return; // 如果地图实例未初始化，则不执行
224.             this.amap.setFitView();
225.           })
226.         }
227.       }
228.     })
229.     .catch(e=>{})
230.   }
231.   renderPolygons = () => {
232.     const { areaReferShow, areaReferData } = this.state;
234.     const GROUP_KEY = {
235.       unConfiguredGroups: 'unConfiguredGroups',
236.       configuredGroups: 'configuredGroups'
237.     }
238.     const prepareGroups = (groups) => {
239.       const _groups = Immutable
240.         .asMutable(groups, { deep: true })
241.         .map(group => ({
242.           ...group,
243.           zoneDetail: (group.zoneDetail || []).map(detail => {
244.             return {
245.               ...detail,
246.               geoArea: JSON.parse(detail.geoArea)
247.             }
248.           })
249.         }))
250.       return {
251.         groups,
252.         [GROUP_KEY.unConfiguredGroups]: _groups
253.           .filter(group => !group.lines.length)
254.           .map(group => ({
255.             ...group,
256.             lines: []
257.           })),
258.         [GROUP_KEY.configuredGroups]: _groups.filter(group => group.lines.length),
259.         zoneOptions: _groups.map(group => ({
260.           value: group.zoneId,
261.           label: group.zoneDesc,
262.         })),
263.         polygons: _groups.reduce((polygons, group) => {
264.           polygons.push(...group.zoneDetail.map(zoneDetail => ({ ...zoneDetail, zoneDesc: group.zoneDesc }))) // flat zoneDetail
265.      
266.           return polygons
267.         }, [])
268.       }
269.     }
271.     const newData = prepareGroups(areaReferData)
272.     const polygons = newData.polygons
273.     const l = polygons.length
274.     const _polygons = []
275.     for (let i = 0; i < l; i++) {
276.       const detail = polygons[i]
277.       if (detail.geoArea && Array.isArray(detail.geoArea) && detail.geoArea.length) {
278.         detail.geoArea.forEach((path, pathId) => {
279.           _polygons.push(
280.             <Polygon
281.               path={path}
282.               key={`${detail.id}:${pathId}`}
283.               style={{
284.                 fillColor: '#333333',
285.                 fillOpacity: 0.3,
286.                 strokeOpacity: 0.5,
287.                 strokeWeight: 1,
288.                 strokeColor: '#333333',
289.               }}
290.               events={{
291.                 mousemove: (e) => {
292.                   this.setState(() => ({
293.                     infoWindowPosition: e.lnglat,
294.                     infoWindowTitle: detail.zoneDesc
295.                   }))
296.                 },
297.                 mouseout: () => {
298.                   this.setState(() => ({
299.                     infoWindowPosition: null
300.                   }))
301.                 }
302.               }}
303.               extData={{ zoneId: detail.zoneId }}
304.             />
305.           )
306.         })
307.       }else{
308.         console.log('detail.geoArea',detail.geoArea)
309.       }
310.     }
311.   return _polygons
312.   
313.   }
314.   getArea = ()=>{
315.     fetch(API_FETCH_ZONES_GROUP, {
316.       method: 'POST',
317.       credentials: 'include',
318.       headers: {
319.         'Accept': 'application/json',
320.         'Content-Type': 'application/json'
321.       },
322.       body: JSON.stringify({ branchId:this.props.branchId,deptId:this.props.deptId})
323.     }).then((response) => {
324.       if (response.ok) {
325.         return response.json();
326.       }
327.       throw new Error("Bad response from server");
328.     })
329.     .then((json) => {
330.       if(json.data && json.data.data instanceof Array){
331.         if (!json.data.data.length) {
332.           message.info("没有可显示的区域");
333.         }else{
335.           this.setState({areaReferData:json.data.data})
337.         }
338.       }
339.     })
340.     .catch(e=>{
341.       console.log('e',e)
342.     })
343.   }
344.   renderInfoWindow() {
345.     const { infoWindowPosition, infoWindowTitle, showLabels } = this.state
346.     if(showLabels){
347.       if (!infoWindowPosition) {
348.         return null
349.       }
351.       return <InfoWindow
352.         position={{
353.           longitude: infoWindowPosition.lng,
354.           latitude: infoWindowPosition.lat,
355.         }}
356.         isCustom={true}
357.         content={`<div style="pointer-events: none;background: #fff;border:1px solid silver;padding: 4px 8px;">${infoWindowTitle}</div>`}
358.         offset={[2,2]}
359.         visible
360.       />
361.     }
362.   }
363.   initPointReferData = () => {
364.     if (!this.state.pointReferShow) {
365.       this.setState({
366.         pointReferData: [],
367.       });
368.     } else {
369.       this.getPoint()
370.     }
371.   };
372.   initAreaReferData = () => {
373.     if (!this.state.areaReferShow) {
374.       this.setState({
375.         areaReferData: [],
376.       });
377.     } else {
378.       this.getArea()
379.     }
380.   };
382.   renderLoading = () => {
383.     const loadingStyle = {
384.       position: "relative",
385.       height: "100%",
386.       width: "100%",
387.       display: "flex",
388.       justifyContent: "center",
389.       alignItems: "center",
390.     };
391.     return <div style={loadingStyle}>Loading Map...</div>;
392.   };
394.   // 运输点参考
395.   changePointReferShow = (checked) => {
396.     this.setState({ pointReferShow: checked }, () => {
397.       this.initPointReferData();
398.     });
399.   };
401.   // 已绘制区域参考
402.   changeAreaReferShow = (checked) => {
403.     this.setState({ areaReferShow: checked }, () => {
404.       this.initAreaReferData();
405.     });
406.   };
407.    // 是否悬浮显示名称
408.   toggleLabels = (checked) => {
409.     this.setState({ showLabels: checked });
410.   };
412.   pointRender = (extData) => {
413.     return (
414.       <div
415.         style={{
416.           color: "#4e72b8",
417.           width: "8px",
418.           height: "8px",
419.           borderRadius: "50%",
420.           background: "#4169E1",
421.           textAlign: "center",
422.         }}
423.       />
424.     );
425.   };
427.   getLocType=()=>{
428.     fetch(`${API_FETCH_DOMAIN}LOCATION_TYPE`,{
429.       credentials: 'include'
430.     })
431.     .then((response) => {
432.       if (response.ok) {
433.         return response.json();
434.       }
435.       throw new Error("Bad response from server");
436.     })
437.     .then((json) => {
438.       if(json.data instanceof Array){
439.         this.setState({locTypes:json.data})
440.       }
441.     })
442.     .catch(e=>{})
443.   }
444.   renderInfo = () => {
445.     const { position, visible, data } = this.state.infoWindow;
446.     const {locTypes} = this.state
447.     if (!data) {
448.       return null;
449.     }
450.     const locTypeItem = locTypes.find(t=>t.domVal==data.locType)
451.     const tds = (
452.       <div  className={pstyles.pinfo}>
453.         <div className='inforow'>
454.           <span>运输地点代码</span>
455.           <span>{data.locId}</span>
456.         </div>
457.         <div className='inforow'>
458.           <span>运输地点描述</span>
459.           <span>{data.locDesc}</span>
460.         </div>
461.         <div className='inforow'>
462.           <span>类型</span>
463.           <span>{locTypeItem?locTypeItem.domValDesc:data.locType}</span>
464.         </div>
465.         <div className='inforow'>
466.           <span>城市</span>
467.           <span>{data.city}</span>
468.         </div>
469.         <div className='inforow'>
470.           <span>省份</span>
471.           <span>{data.province}</span>
472.         </div>
473.         <div className='inforow'>
474.           <span>国家</span>
475.           <span>{data.country}</span>
476.         </div>
477.         <div className='inforow'>
478.           <span>经度</span>
479.           <span>{data.longitude}</span>
480.         </div>
481.         <div className='inforow'>
482.           <span>纬度</span>
483.           <span>{data.latitude}</span>
484.         </div>
485.         <div className='inforow'>
486.           <span>地址</span>
487.           <span>{data.addr}</span>
488.         </div>
489.         <div className='inforow'>
490.           <span>限行区域</span>
491.          <span>{data.udzDesc1}({data.udz1})</span>
492.         </div>
493.         <div className='inforow'>
494.           <span>业务区域</span>
495.          <span>{data.udzDesc2}({data.udz2})</span>
496.         </div>
497.       </div>
498.     );
499.     return (
500.       <InfoWindow
501.         position={position}
502.         visible={visible}
503.         isCustom={true}
504.         offset={[2, 2]}
505.       >
506.         {tds}
507.       </InfoWindow>
508.     );
509.   };
510.   // polygon edit switch
511.   togglePolygon = (checked, e) => {
512.     if (checked) {
513.       // open edit and close add if it is drawing
514.       if (this.mouseTool) {
515.         this.mouseTool.close();
516.       }
517.       this.setState({ polygonActive: true, isDrawingPolygon: false });
518.     } else {
519.       // close edit
520.       this.setState({ polygonActive: false });
521.     }
522.   };
524.   // polygon add switch
525.   toggleDrawPolygon = (checked, e) => {
526.     if (checked) {
527.       if (this.mouseTool) {
528.         this.mouseTool.polygon();
529.         this.setState({ isDrawingPolygon: true });
530.         message.success("鼠标左键双击或右键单击完成当前多边形！");
531.       }
532.     } else {
533.       if (this.mouseTool) {
534.         this.mouseTool.close();
535.         this.setState({ isDrawingPolygon: false });
536.       }
537.     }
538.   };
540.   // finish polygon draw
541.   drawWhat = (obj) => {
542.     const paths = obj.getPath();
543.     let data = this.state.data.slice();
544.     const pathData = paths.map((item) => [item.lng, item.lat]);
545.     if (pathData.length > 2) {
546.       if (this.amap) {
547.         this.amap.remove(obj);
548.       }
549.       data.push(_getClosedPolygon(pathData));
550.       this.setState({ data });
551.       message.success(
552.         `您成功绘制了一个${
553.           paths.length
554.         }边形，可继续绘制或点击结束多边形绘制按钮`
555.       );
556.     }
557.   };
559.   // polygon editor end
560.   polyEditorEnd = (target, type) => {
561.     const paths = target.getPath();
562.     let isSinglePath = false; // 是否是单围栏
563.     const pathData = paths.map((item, index) => {
564.       if (Array.isArray(item)) {
565.         const itemPaths = item.map((element) => [element.lng, element.lat]);
566.         return _getClosedPolygon(itemPaths);
567.       } else {
568.         isSinglePath = true;
569.         return [item.lng, item.lat];
570.       }
571.     });
572.     this.setState({
573.       data: isSinglePath ? [_getClosedPolygon(pathData)] : pathData,
574.     });
575.   };
577.   // 多边形删除下拉菜单
578.   deleteMenuVisibleChange = (flag) => {
579.     this.setState({ deleteMenuVisible: flag });
580.   };
581.   // 删除多边形
582.   handleMenuClick = (e) => {
583.     this.handleDeletePath(e.key);
584.   };
585.   handleDeletePath = (key) => {
586.     const path = [...this.state.data];
587.     path.splice(key, 1);
588.     this.setState({ data: path, deleteMenuVisible: false });
589.   };
590.   handleMenuHover = (key) => {
591.     this.setState({ hoverItemData: this.state.data[key] });
592.   };
594.   handleChangeAdcode = ({ adcode, province, city, area, street,provinceCode,cityCode }) => {
595.     this.setState({ adcode, province, city, area, street,provinceCode, cityCode});
596.   };
598.   handleAdcodeCancle = () => {
599.     this.setState({
600.       adcode: "",
601.       province: "",
602.       provinceCode:"",
603.       city: "",
604.       cityCode:"",
605.       area: "",
606.       street: "",
607.     });
608.   };
610.   handleAdcodeConfirm = () => {
611.     const { adcode, provinceCode, cityCode, area, street, mapEditable } = this.state;
612.     if (adcode) {
613.       this.setState({
614.         mapEditable: "N",
615.         adcode: "",
616.         polygonActive: false,
617.         isDrawingPolygon: false,
618.       });
619.       if (street) {
620.         isomorphicFetch(`/city-tiles/${provinceCode}_${cityCode}.json`)
621.           .then((response) => {
622.             if (response.ok) {
623.               return response.json();
624.             }
625.             throw new Error("Bad response from server");
626.           })
627.           .then((json) => {
628.             if (json.status === "0") {
629.               throw new Error("No districts from server");
630.             }
631.             try {
632.               const streetItemData = json.features.find(
633.                 (s) => s.properties.subdistrict == street
634.               ).geometry.coordinates;
635.               if (this.mouseTool) {
636.                 this.mouseTool.close();
637.               }
638.               this.setState({
639.                 data: streetItemData, // some data
640.               });
641.               if (this.amap) {
642.                 this.amap.setFitView();
643.               }
644.             } catch (e) {
645.               message.error("获取行政区划数据失败！");
646.             }
647.             // const polyline = (json.districts && json.districts[0]) ? json.districts[0].polyline : [];
648.             // const data = polyline.split('|').map(block => block.split(';').map(pointer => pointer.split(',').map(lnglat => Number(lnglat))));
649.             // if (this.mouseTool){
650.             //   this.mouseTool.close();
651.             // }
652.             // this.setState({
653.             //   data: data, // some data
654.             // })
655.             // if (this.amap) {
656.             //   this.amap.setFitView();
657.             // }
658.           })
659.           .catch((error) => {
660.             message.error("获取行政区划数据失败！");
661.             this.setState({
662.               mapEditable: "Y",
663.               province: "",
664.               provinceCode:"",
665.               city: "",
666.               cityCode:"",
667.               area: "",
668.               street: "",
669.               data: [],
670.             });
671.           });
672.       } else {
673.         // fetch polyline data
674.         isomorphicFetch(
675.           `//restapi.amap.com/v3/config/district?key=e17fafe279209e4b3a303cc907347277&keywords=${adcode}&subdistrict=0&extensions=all`
676.         )
677.           .then((response) => {
678.             if (response.ok) {
679.               return response.json();
680.             }
681.             throw new Error("Bad response from server");
682.           })
683.           .then((json) => {
684.             if (json.status === "0") {
685.               throw new Error("No districts from server");
686.             }
687.             const polyline =
688.               json.districts && json.districts[0]
689.                 ? json.districts[0].polyline
690.                 : [];
691.             const data = polyline
692.               .split("|")
693.               .map((block) =>
694.                 block
695.                   .split(";")
696.                   .map((pointer) =>
697.                     pointer.split(",").map((lnglat) => Number(lnglat))
698.                   )
699.               );
700.             if (this.mouseTool) {
701.               this.mouseTool.close();
702.             }
703.             this.setState({
704.               data: data, // some data
705.             });
706.             if (this.amap) {
707.               this.amap.setFitView();
708.             }
709.           })
710.           .catch((error) => {
711.             message.error("获取行政区划数据失败！");
712.             this.setState({
713.               mapEditable: "Y",
714.               province: "",
715.               provinceCode:"",
716.               city: "",
717.               cityCode:"",
718.               area: "",
719.               street: "",
720.               data: [],
721.             });
722.           });
723.       }
724.     } else {
725.       if (mapEditable === "N") {
726.         this.setState({
727.           mapEditable: "Y",
728.           adcode: "",
729.           province: "",
730.           provinceCode:"",
731.           city: "",
732.           cityCode:"",
733.           area: "",
734.           street: "",
735.           data: [],
736.         });
737.       }
738.     }
739.   };
741.   handleFinished = () => {
742.     const {
743.       polygonActive,
744.       data,
745.       adcode,
746.       province,
747.       city,
748.       area,
749.       street,
750.       mapEditable,
751.     } = this.state;
752.     let result = {
753.       geoArea:
754.         Array.isArray(data) && data.length > 0 ? JSON.stringify(data) : null,
755.       mapEditable,
756.     };
757.     if (mapEditable === "N") {
758.       Object.assign(result, {
759.         country: "中国",
760.         state: province,
761.         city,
762.         district: area,
763.         subdistrict: street,
764.       });
765.     }
766.     if (polygonActive) {
767.       this.setState({ polygonActive: false });
768.       Modal.confirm({
769.         title: "您的多边形调整还未结束，是否结束?",
770.         onOk: () => {
771.           this.props.onConfirm(result);
772.         },
773.         onCancel: () => {
774.           this.setState({ polygonActive: true });
775.         },
776.       });
777.     } else {
778.       this.props.onConfirm(result);
779.     }
780.   };
782.   render() {
783.     const {
784.       polygonActive,
785.       isDrawingPolygon,
786.       pointReferShow,
787.       data,
788.       pointReferData,
789.       areaReferData,
790.       areaReferShow,
791.       deleteMenuVisible,
792.       hoverItemData,
793.       adcode,
794.       mapEditable,
795.       infoWindowPosition,
796.       infoWindowVisible,
797.       infoWindowData,
798.       showLabels,
799.       useCluster
800.     } = this.state;
801.     const { onCancle, isGroup } = this.props;
802.     const option = {
803.       amapkey: MAP_AMAP_KEY,
804.       version: MAP_AMAP_VERSION,
805.       mapStyle: "amap://styles/whitesmoke",
806.       loading: this.renderLoading(),
807.       status: {
808.         resizeEnable: true,
809.       },
810.       plugins: ["ToolBar", "Scale"],
811.       events: this.amapEvents,
812.     };
813.     return (
814.       <div style={{ width: "100%", height: "100vh", position: "relative" }}>
815.         <ActionsForm>
816.           {isGroup ? (
817.             <Form layout="inline">
818.               <Form.Item>
819.                 <Popconfirm
820.                   title={
821.                     <ZoneCascader
822.                       adcode={adcode}
823.                       onChange={this.handleChangeAdcode}
824.                     />
825.                   }
826.                   icon={
827.                     <Tooltip title="选择行政区划。此操作将首先清空已有围栏，已选择的行政区划围栏不允许编辑">
828.                       <Icon type="question-circle-o" />
829.                     </Tooltip>
830.                   }
831.                   onCancel={this.handleAdcodeCancle}
832.                   onConfirm={this.handleAdcodeConfirm}
833.                 >
834.                   <Button type="primary">行政区划选择{isGroup}</Button>
835.                 </Popconfirm>
836.               </Form.Item>
837.               <Form.Item>
838.                 <Switch
839.                   disabled={mapEditable === "N"}
840.                   checkedChildren="调整"
841.                   unCheckedChildren="调整"
842.                   checked={polygonActive}
843.                   onChange={this.togglePolygon}
844.                 />
845.               </Form.Item>
846.               <Form.Item>
847.                 <Switch
848.                   disabled={mapEditable === "N"}
849.                   checkedChildren="新增"
850.                   unCheckedChildren="新增"
851.                   checked={isDrawingPolygon}
852.                   onChange={this.toggleDrawPolygon}
853.                 />
854.               </Form.Item>
855.               <Form.Item>
856.                 <Dropdown
857.                   overlay={
858.                     <Menu onClick={this.handleMenuClick}>
859.                       {data &&
860.                         data.length > 0 &&
861.                         data.map((item, index) => (
862.                           <Menu.Item key={index}>
863.                             <span
864.                               onMouseOver={() => this.handleMenuHover(index)}
865.                             >{`${index + 1} 删除`}</span>
866.                           </Menu.Item>
867.                         ))}
868.                     </Menu>
869.                   }
870.                   onVisibleChange={this.deleteMenuVisibleChange}
871.                   visible={deleteMenuVisible}
872.                   disabled={mapEditable === "N"}
873.                 >
874.                   <Button>删除</Button>
875.                 </Dropdown>
876.               </Form.Item>
877.               <Form.Item>
878.                 <Button onClick={onCancle}>取消</Button>
879.               </Form.Item>
880.               <Form.Item>
881.                 <Button type="primary" onClick={this.handleFinished}>
882.                   完成
883.                 </Button>
884.               </Form.Item>
885.               <Form.Item>
886.                 <Switch
887.                   checkedChildren="显示地点"
888.                   unCheckedChildren="显示地点"
889.                   checked={pointReferShow}
890.                   onChange={this.changePointReferShow}
891.                 />
892.               </Form.Item>
893.               <Form.Item>
894.                 <Switch
895.                   checkedChildren="显示其他区域"
896.                   unCheckedChildren="显示其他区域"
897.                   checked={areaReferShow}
898.                   onChange={this.changeAreaReferShow}
899.                 />
900.               </Form.Item>
901.               <Form.Item>
902.                 <Switch
903.                   checkedChildren="显示区域名称"
904.                   unCheckedChildren="隐藏区域名称"
905.                   checked={showLabels}
906.                   onChange={this.toggleLabels}
907.                 />
908.               </Form.Item>
909.             </Form>
910.           ) : (
911.             <Form layout="inline">
912.               <Form.Item>
913.                 <Button type="primary" onClick={onCancle}>
914.                   关闭
915.                 </Button>
916.               </Form.Item>
917.             </Form>
918.           )}
919.         </ActionsForm>
920.         <Map {...option}>
921.           <Markers
922.             markers={pointReferData}
923.             offset={[0,0]}
924.             render={this.pointRender}
925.             events={this.markerEvents}
926.             useCluster={useCluster}
927.           />
928.           {isGroup && <MouseTool events={this.toolEvents} />}
929.           {isGroup ? (
930.             <Polygon
931.               path={data}
932.               style={{ fillOpacity: 0.3, strokeOpacity: 0.5, strokeWeight: 1 }}
933.               events={this.polygonEvents}
934.             >
935.               <PolyEditor
936.                 active={
937.                   polygonActive && data.length > 0 && data.flat().length <= 100
938.                 }
939.                 events={this.polyEditorEvents}
940.               />
941.             </Polygon>
942.           ) : (
943.             data.map((item, index) => (
944.               <Polygon
945.                 events={this.polygonEvents}
946.                 key={index}
947.                 path={item}
948.                 style={{
949.                   fillOpacity: 0.3,
950.                   strokeOpacity: 0.5,
951.                   strokeWeight: 1,
952.                 }}
953.               />
954.             ))
955.           )}
956.           <Polygon
957.             visible={deleteMenuVisible}
958.             path={[hoverItemData]}
959.             zIndex={100}
960.             style={{
961.               fillColor: "red",
962.               fillOpacity: 0.3,
963.               strokeOpacity: 0.5,
964.               strokeWeight: 1,
965.             }}
966.           />
967.           {this.renderInfo()}
968.           {this.renderPolygons()}
969.           {this.renderInfoWindow()}
970.         </Map>
971.       </div>
972.     );
973.   }
974. }
976. PolygonEdit.propTypes = {
977.   isGroup: PropTypes.bool, // 是：data 为单个 polygon 数据；否： data 为多个 polygon 数据
978.   data: PropTypes.array,
979.   onCancle: PropTypes.func,
980.   onConfirm: PropTypes.func,
981. };
982. PolygonEdit.defaultProps = {
983.   isGroup: true,
984.   data: [],
985.   onCancle: () => {},
986.   onConfirm: () => {},
987. };
989. export default PolygonEdit;

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。