feats

src/components/GeoMap/CarsMarker.js

 import videoStartImg from '@/assets/images/screen/map-video-start.png';
 import videoStopImg from '@/assets/images/screen/map-video-stop.png';
 
-
-
-export default (AMap, map, opts = {}) => {
+export default function getCarsMarker(AMap, map, opts = {}) {
   const marker = new AMap.Marker({
-    map,
     icon: markerImg,
     anchor: 'top-center',
     offset: new AMap.Pixel(0, 0),
     ...opts,
   });
 
-  let show = false;
-
-  // 
-  const { carsName, carsRural } = opts?.extData;
+  //
+  const { machineryId, name, orgName } = opts?.extData;
 
   marker.setLabel({
     direction: 'top',
     offset: new AMap.Pixel(0, 0),
     content: `
-    <div class="SquareBox-box-carsMarker" onclick="openVideo()">
+    <div class="SquareBox-box-carsMarker" onclick="openVideo('${machineryId}')">
     <div class="border_corner-carsMarker border_corner_left_top-left" ></div>
     <div class="border_corner-carsMarker border_corner_right_top-right" ></div>
     <div class="border_corner-carsMarker border_corner_left_bottom-left" ></div>
 
       <div  class="map-button-border">
       
-        <div class="carsName">名称：${carsName}</div>
+        <div class="carsName">名称：${name}</div>
         <div class="map-button-border-carsRural carsName">
-        <div >归属：${carsRural}</div>
+        <div >归属：${orgName}</div>
         <span> \>> </span>
         </div>
   
   </div> `,
   });
 
-
-  // marker.on('click', () => {
-  //   if (show) {
-  //     marker.setLabel({ content: '' });
-  //     show = false;
-  //     return;
-  //   }
-
-
-  //   if (!content) {
-  //     marker.setLabel({ content: '' });
-  //   } else {
-  //     marker.setLabel({
-  //       direction: 'top',
-  //       offset: new AMap.Pixel(0, 0),
-  //       content: `<div class='geo-map-marker-label' ><div class='geo-map-marker-label-text'>${ruralName}</div></div>`,
-  //     });
-  //   }
-
-  //   show = true;
-  // });
-
   return marker;
-};
+}

src/components/GeoMap/RuralMarker.js

 import ruralMarkerImg from '@/assets/images/screen/map-rural.png';
 
-
-
-
-export default (AMap, map, opts = {}) => {
+export default function getRuralMarker(AMap, map, opts = {}) {
   const marker = new AMap.Marker({
-    map,
     icon: ruralMarkerImg,
     anchor: 'top-center',
     offset: new AMap.Pixel(0, 0),
     ...opts,
   });
 
-  let show = false;
-
   // 合作社数据
-  const { ruralName, ruralAddress, ruralNumber, ruralPhone, } = opts?.extData;
+  const { name, address, machineNum, phone } = opts?.extData;
 
   marker.setLabel({
     direction: 'top',
     offset: new AMap.Pixel(0, 0),
     content: `
     <div class='geo-map-rural-box' >
-      <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>名 称</span>：${ruralName}</div>
-      <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>地 址</span>：${ruralAddress}</div>
-      <div class="borderBox">农机数量：${ruralNumber}</div>
-      <div class="borderBox">联系电话：${ruralPhone}</div>
+      <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>名 称</span>：${name}</div>
+      <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>地 址</span>：${address}</div>
+      <div class="borderBox">农机数量：${machineNum} 辆</div>
+      <div class="borderBox">联系电话：${phone}</div>
     </div>`,
   });
 
-
-  // marker.on('click', () => {
-  //   if (show) {
-  //     marker.setLabel({ content: '' });
-  //     show = false;
-  //     return;
-  //   }
-
-
-  //   if (!content) {
-  //     marker.setLabel({ content: '' });
-  //   } else {
-  //     marker.setLabel({
-  //       direction: 'top',
-  //       offset: new AMap.Pixel(0, 0),
-  //       content: `<div class='geo-map-marker-label' ><div class='geo-map-marker-label-text'>${ruralName}</div></div>`,
-  //     });
-  //   }
-
-  //   show = true;
-  // });
-
   return marker;
-};
+}

src/components/GeoMap/index.jsx

-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Modal, Button } from 'antd';
-import loader from '@/components/AMap/loader';
-import getMarker from './marker';
-import getRuralMarker from './RuralMarker';
-import getCarsMarker from './CarsMarker';
-
-import geoPolygon from './geoPolygon';
+import useMap from './map';
+import { useMarker, useMarkerVisible } from './marker';
 import Styles from './style.less';
 import RadioGroup from '../ScreenBox/Radio/RadioGroup';
 
-const plugins = [];
-
 export default (props) => {
-  const { machineTypeList } = props;
+  const { machineTypeList, orgList, machineList } = props;
 
   const container = useRef();
-  const amapRef = useRef();
-  const [map, setMap] = useState();
-
+  const currentMachineRef = useRef();
+  const [machineType, setMachineType] = useState('t0');
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [machineType, setMachineType] = useState();
 
+  // 修改地图的默认样式
   useEffect(() => {
-    loader(plugins).then((AMap) => {
-      amapRef.current = AMap;
-      const mapInst = new AMap.Map(container.current, {
-        mapStyle: 'amap://styles/669a7d8709a9bab0945747a1a1db3327',
-        // mapStyle: 'amap://styles/blue',
-        zoom: 10,
-        resizeEnable: true,
-        center: [112.092716, 32.681642],
-      });
+    const t = setInterval(() => {
+      const el = document.querySelector('.amap-ctrl-zoomin');
+      if (el) {
+        clearInterval(t);
+        el.style.color = '#fff';
+        document.querySelector('.amap-ctrl-zoomout').style.color = '#fff';
+      }
+    }, 500);
+
+    return () => clearInterval(t);
+  }, []);
 
-      // 遮罩层;
-      geoPolygon(AMap, mapInst);
+  // 构造地图
+  const { amapRef, map } = useMap(container);
 
-      //
-      setMap(mapInst);
-    });
+  // 把合作社跟农机合并到一起, 合作社的 typeId 设置为 t0
+  const list = useMemo(() => {
+    // org 没有 typeId, 因此所有 org 的节点都会带有 typeId = 't0'
+    return (orgList || []).map((item) => ({ typeId: 't0', ...item })).concat(machineList || []);
+  }, [orgList, machineList]);
 
-    window.openVideo = function () {
-      console.log(' window.foo 全局方法');
-      setIsModalVisible(true);
-    };
-
-    return () => (window.openVideo = undefined);
-  }, []);
+  // 生成所有的 marker
+  const markerListRef = useMarker(amapRef, map, list);
+  // 监听选择
+  useMarkerVisible(map, markerListRef, machineType);
 
+  // 把农机 marker 的点击事件挂载到 window 下面作为全局 function
   useEffect(() => {
-    if (!map) return;
-
-    // 先搞一个 marker demo
-    getMarker(amapRef.current, map, {
-      position: [112.092716, 32.681642],
-      extData: { value: '68辆' },
-    });
+    if (!machineList || !machineList.length) return;
 
-    // 合作社图标定位
-    getRuralMarker(amapRef.current, map, {
-      position: [111.909659, 32.651123],
-      extData: {
-        ruralName: 'ABC合作社',
-        ruralAddress: '南阳市邓州市林扒镇',
-        ruralNumber: '9辆',
-        ruralPhone: '13613949434',
-      },
-    });
+    window.openVideo = function (machineryId) {
+      currentMachineRef.current = machineList.filter((x) => x.machineryId === machineryId)[0];
+      setIsModalVisible(true);
+    };
 
-    // 农机监控
-    getCarsMarker(amapRef.current, map, {
-      position: [112.115574, 32.65235],
-      extData: {
-        carsName: '播种机0001',
-        carsRural: 'ABC合作社',
-      },
-    });
-  }, [map]);
+    return () => (window.openVideo = undefined);
+  }, [machineList]);
 
   return (
     <div className={Styles['geo-map-container']}>
       </div>
 
       <div className={Styles['geo-map-body']}>
+        {/* 渲染地图 */}
         <div ref={container} />
       </div>
 

src/components/GeoMap/map.js

+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import loader from '@/components/AMap/loader';
+import geoPolygon from './geoPolygon';
+
+const plugins = ['AMap.ToolBar'];
+export default (containerRef) => {
+  const amapRef = useRef();
+  const [map, setMap] = useState();
+
+  useEffect(() => {
+    loader(plugins).then((AMap) => {
+      amapRef.current = AMap;
+      const mapInst = new AMap.Map(containerRef.current, {
+        mapStyle: 'amap://styles/669a7d8709a9bab0945747a1a1db3327',
+        // mapStyle: 'amap://styles/blue',
+        zoom: 10,
+        resizeEnable: true,
+        center: [112.092716, 32.681642],
+      });
+
+      // 缩放按钮
+      mapInst.addControl(new AMap.ToolBar());
+
+      // 遮罩层;
+      geoPolygon(AMap, mapInst);
+
+      //
+      setMap(mapInst);
+    });
+  }, []);
+
+  return { amapRef, map };
+};

src/components/GeoMap/marker.js

-import markerImg from '@/assets/images/screen/map-marker.png';
-
-
-export default (AMap, map, opts = {}) => {
-  const marker = new AMap.Marker({
-    map,
-    icon: markerImg,
-    anchor: 'top-center',
-    offset: new AMap.Pixel(0, 0),
-    ...opts,
-  });
-
-  let show = false;
-  const content = opts?.extData?.value;
-
-
-  marker.on('click', () => {
-    if (show) {
-      marker.setLabel({ content: '' });
-      show = false;
-      return;
-    }
-
-
-    if (!content) {
-      marker.setLabel({ content: '' });
-    } else {
-      marker.setLabel({
-        direction: 'top',
-        offset: new AMap.Pixel(0, 0),
-        content: `<div class='geo-map-marker-label' ><div class='geo-map-marker-label-text'>${content}</div></div>`,
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import getRuralMarker from './RuralMarker';
+import getCarsMarker from './CarsMarker';
+
+export function useMarker(amapRef, map, list) {
+  const markerListRef = useRef();
+
+  // 农机列表
+  useEffect(() => {
+    if (!amapRef.current) return;
+
+    if (list && list.length) {
+      markerListRef.current = list.map((item) => {
+        const fnMarker = item.typeId === 't0' ? getRuralMarker : getCarsMarker;
+        return fnMarker(amapRef.current, null, {
+          position: item.lnglat,
+          extData: item,
+        });
       });
     }
-
-    show = true;
-  });
-
-  return marker;
-};
+  }, [map, list]);
+
+  return markerListRef;
+}
+
+export function useMarkerVisible(map, markerListRef, typeId) {
+  useEffect(() => {
+    console.log(typeId, markerListRef.current);
+    if (!map || !markerListRef.current) return;
+
+    markerListRef.current.forEach((marker) => {
+      const item = marker.getExtData();
+      marker.setMap(item.typeId === typeId ? map : null);
+    });
+  }, [map, typeId]);
+}

src/components/GeoMap/style.less

 
   .radio-group {
     position: absolute;
-    top: 5%;
+    top: 8%;
     left: 5%;
     z-index: 1000;
   }
 
   .geo-map-body {
     height: calc(100% - 54px);
-    padding: 0 20px;
+    // padding: 0 20px;
     background-color: #061e3f;
     border-right: 1px solid rgba(61, 129, 240, 0.5);
     border-left: 1px solid rgba(61, 129, 240, 0.5);

src/global.less

   flex: 1;
 }
 
+// 修改大屏地图的 zoom 空间样式
+.amap-toolbar {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.amap-toolbar span:first-child {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
 .amap-marker-label {
   background: transparent;
   border: none;

src/pages/MonitoringScreen/index.jsx

   ]);
 
   const [machineTypeList, setMachineTypeList] = useState([
-    { id: 1, name: '收割机' },
-    { id: 2, name: '播种机' },
-    { id: 3, name: '农药机' },
+    { id: 't0', name: '合作社' },
+    { id: 't1', name: '收割机' },
+    { id: 't2', name: '播种机' },
+    { id: 't3', name: '农药机' },
+  ]);
+
+  const [orgList, setOrgList] = useState([
+    {
+      orgId: 1,
+      name: '合作社1',
+      address: '合作社地址1',
+      phone: '13823838438',
+      machineNum: 12,
+      lnglat: [111.888505, 32.854667],
+    },
+    {
+      orgId: 2,
+      name: '合作社2',
+      address: '合作社地址2',
+      phone: '13823838438',
+      machineNum: 68,
+      lnglat: [111.921464, 32.467361],
+    },
+    {
+      orgId: 3,
+      name: '合作社3',
+      address: '合作社地址3',
+      phone: '13823838438',
+      machineNum: 3,
+      lnglat: [112.367784, 32.815435],
+    },
+    {
+      orgId: 4,
+      name: '合作社4',
+      address: '合作社地址4',
+      phone: '13823838438',
+      machineNum: 42,
+      lnglat: [112.311479, 32.580836],
+    },
+  ]);
+
+  const [machineList, setMachineList] = useState([
+    {
+      machineryId: 'm1',
+      name: '农机1',
+      typeId: 't1',
+      orgName: '合作社1',
+      lnglat: [111.867906, 32.799276],
+    },
+    {
+      machineryId: 'm2',
+      name: '农机2',
+      typeId: 't2',
+      orgName: '合作社1',
+      lnglat: [112.087632, 32.66527],
+    },
+    {
+      machineryId: 'm3',
+      name: '农机3',
+      typeId: 't1',
+      orgName: '合作社2',
+      lnglat: [112.237321, 32.631737],
+    },
+    {
+      machineryId: 'm4',
+      name: '农机4',
+      typeId: 't3',
+      orgName: '合作社2',
+      lnglat: [112.002488, 32.563476],
+    },
+    {
+      machineryId: 'm5',
+      name: '农机5',
+      typeId: 't3',
+      orgName: '合作社3',
+      lnglat: [112.105485, 32.791195],
+    },
   ]);
 
   useEffect(() => {
               <StatisCard color="#F5CC5C" icon="icon3" value={168} title="总预约数（台）" />
               <StatisCard color="#C579FF" icon="icon4" value={1568} title="总服务数（台）" />
             </div>
-            <GeoMap machineTypeList={machineTypeList} />
+            <GeoMap machineTypeList={machineTypeList} orgList={orgList} machineList={machineList} />
           </div>
           <div className={Styles['grail-right']}>
             <div className="flex flex-column full-height">