gis

src/components/GISMap/index.jsx

@@ -0,0 +1,50 @@
+import { useRef } from "react";
+import useMap from './map';
+import { useMarker, startAnimation, pauseAnimation, resumeAnimation, stopAnimation } from './marker';
+import './style.less';
+
+export default (props) => {
+  const { lineArr } = props
+  const container = useRef()
+  const { amapRef, map } = useMap(container);
+  // var lineArr = [
+  //   [116.478935, 39.997761],
+  //   [116.478939, 39.997825],
+  //   [116.478912, 39.998549],
+  //   [116.478912, 39.998549],
+  //   [116.478998, 39.998555],
+  //   [116.478998, 39.998555],
+  //   [116.479282, 39.99856],
+  //   [116.479658, 39.998528],
+  //   [116.480151, 39.998453],
+  //   [116.480784, 39.998302],
+  //   [116.480784, 39.998302],
+  //   [116.481149, 39.998184],
+  //   [116.481573, 39.997997],
+  //   [116.481863, 39.997846],
+  //   [116.482072, 39.997718],
+  //   [116.482362, 39.997718],
+  //   [116.483633, 39.998935],
+  //   [116.48367, 39.998968],
+  //   [116.484648, 39.999861],
+  // ];
+  useMarker(amapRef, map, lineArr);
+
+  return (
+    <>
+      <div ref={container} id="container" style={{ height: '700px', position: 'relative' }} >
+        <div className="input-card">
+          <h4>轨迹回放控制</h4>
+          <div className="input-item">
+            <input type="button" className="btn" value="开始动画" id="start" onClick={startAnimation} />
+            <input type="button" className="btn" value="暂停动画" id="pause" onClick={pauseAnimation} />
+          </div>
+          <div className="input-item">
+            <input type="button" className="btn" value="继续动画" id="resume" onClick={resumeAnimation} />
+            <input type="button" className="btn" value="停止动画" id="stop" onClick={stopAnimation} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/GISMap/map.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef, useState } from 'react';
+import loader from '@/components/AMap/loader';
+
+const plugins = ['AMap.MoveAnimation'];
+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, {
+          zoom: 17,
+          resizeEnable: true,
+          center: [112.093131, 32.692095],
+        });
+
+        //
+        setMap(mapInst);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, [containerRef]);
+
+  return { amapRef, map };
+};

src/components/GISMap/marker.js

@@ -0,0 +1,73 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+
+let marker, lineArr;
+export function useMarker(amapRef, map, lujing) {
+  useMemo(() => {
+    if (!amapRef.current) return;
+    marker = new amapRef.current.Marker({
+      icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
+      offset: new amapRef.current.Pixel(0, 0),
+    });
+  }, [map]);
+
+  useEffect(() => {
+    if (!amapRef.current || !marker || !lujing || lujing.length == 0) {
+      return;
+    }
+    lineArr = lujing;
+    //https://lbs.amap.com/api/jsapi-v2/documentation#marker
+    // 动态添加地图和marker的定位
+    console.log(marker);
+    marker.setPosition(lineArr[0]);
+    marker.setMap(map);
+    console.log(marker);
+    var polyline = new amapRef.current.Polyline({
+      map: map,
+      path: lineArr,
+      showDir: true,
+      strokeColor: '#28F', //线颜色
+      // strokeOpacity: 1,     //线透明度
+      strokeWeight: 6, //线宽
+      // strokeStyle: "solid"  //线样式
+    });
+
+    var passedPolyline = new amapRef.current.Polyline({
+      map: map,
+      strokeColor: '#AF5', //线颜色
+      strokeWeight: 6, //线宽
+    });
+    //给marker添加监控
+    marker.on('moving', function (e) {
+      passedPolyline.setPath(e.passedPath);
+      //marker运动时将marker置位地图中心
+      map.setCenter(e.target.getPosition(), true);
+    });
+    //地图跟随marker移动
+    map.setFitView();
+  }, [map, amapRef, lujing]);
+}
+export function startAnimation() {
+  if (marker) {
+    marker.moveAlong(lineArr, {
+      // 每一段的时长
+      duration: 500, //可根据实际采集时间间隔设置
+      // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+      autoRotation: true,
+    });
+  }
+}
+export function pauseAnimation() {
+  if (marker) {
+    marker.pauseMove();
+  }
+}
+export function resumeAnimation() {
+  if (marker) {
+    marker.resumeMove();
+  }
+}
+export function stopAnimation() {
+  if (marker) {
+    marker.stopMove();
+  }
+}

src/components/GISMap/style.less

@@ -0,0 +1,92 @@
+html {
+  font-size: 12px;
+}
+
+.input-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border-radius: .25rem;
+  width: 22rem;
+  border-width: 0;
+  border-radius: 0.4rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+  position: absolute;
+  z-index: 9;
+  bottom: 1rem;
+  right: 1rem;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 0.75rem 1.25rem;
+}
+
+h4 {
+  font-family: inherit;
+  line-height: 1.8;
+  font-weight: 300;
+  color: inherit;
+  font-size: 1.1rem;
+  margin-top: 0;
+  margin-bottom: .5rem
+}
+
+.input-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 3rem;
+}
+
+.input-item:last-child {
+  margin-bottom: 0;
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  font-size: 1rem;
+  margin-right: 1.2rem;
+  width: 9rem;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  background-color: transparent;
+  background-image: none;
+  color: #25A5F7;
+  border-color: #25A5F7;
+  padding: .25rem .5rem;
+  line-height: 1.5;
+  border-radius: 1rem;
+  -webkit-appearance: button;
+  cursor:pointer;
+}
+
+.btn:hover {
+  color: #fff;
+  background-color: #25A5F7;
+  border-color: #25A5F7;
+  text-decoration: none
+}
+
+.btn:focus {
+  outline: 0;
+  box-shadow: none;
+}
+
+.input-card .btn:last-child{
+  margin-right: 0;
+}

src/pages/Machinery/GIS/detail.jsx

@@ -1,9 +1,11 @@
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { Card, Button, Descriptions } from 'antd';
 import { useEffect, useState } from 'react';
-import { getJobDetail } from '@/services/job'
+import { getJobDetail, getJobGISDetail } from '@/services/job'
 import moment from 'moment';
 import { history } from 'umi';
+import getCoordinate from '@/utils/mapTogcj02'
+import GISMap from '@/components/GISMap';
 
 const goBack = () => {
   history.goBack();
@@ -15,11 +17,23 @@ export default (props) => {
   const { location } = props;
   const { id } = location.query;
   const [workInfo, setWorkInfo] = useState()
-
+  const [nlocationList, setNewLocationList] = useState()
   useEffect(() => {
     if (id) {
       getJobDetail(id).then((res) => {
         setWorkInfo(res)
+        getJobGISDetail({ jobId: id }).then((gisRes => {
+          let list, newlocation
+          list = gisRes.map(item => {
+            newlocation = getCoordinate(item.lng, item.lat);
+            return [newlocation.longitude, newlocation.latitude]
+          })
+          setNewLocationList(list)
+        })).catch(err => {
+          console.log(err.message);
+        })
+      }).catch(err => {
+        console.log(err.message);
       })
     }
   }, [id])
@@ -27,16 +41,20 @@ export default (props) => {
     <PageHeaderWrapper extra={[<Button key={id} type="default" onClick={() => goBack()}>
       返回
     </Button>]}>
-      <Card style={{ minHeight: '700px' }}>
-        <Descriptions style={{ margin: '0 32px' }}>
+      <Card title='作业详情'>
+        <Descriptions labelStyle={{ justifyContent: 'flex-end', minWidth: '5em' }} >
           <Descriptions.Item label="订单号">{workInfo?.orderNo}</Descriptions.Item>
           <Descriptions.Item label="合作社">{workInfo?.orgName}</Descriptions.Item>
           <Descriptions.Item label="农机">{workInfo?.machineryName}</Descriptions.Item>
           <Descriptions.Item label="农机手">{workInfo?.workerName}</Descriptions.Item>
-          <Descriptions.Item label="作业面积">{workInfo?.area}</Descriptions.Item>
+          <Descriptions.Item label="作业面积">{workInfo?.area}亩</Descriptions.Item>
           <Descriptions.Item label="作业时间">{formatterTime(workInfo?.startDate)}~{formatterTime(workInfo?.endDate)}</Descriptions.Item>
+          <Descriptions.Item label="作业地址">{workInfo?.address}</Descriptions.Item>
         </Descriptions>
       </Card>
+      <Card style={{ minHeight: '700px', marginTop: '32px' }}>
+        <GISMap lineArr={nlocationList} />
+      </Card>
     </PageHeaderWrapper>
   );
 };

src/pages/Machinery/GIS/index.jsx

@@ -23,7 +23,6 @@ export default (props) => {
   }
   const onCancel = () => {
     setEditModal(false)
-    console.log(666);
   }
   useEffect(() => {
     getCooperativeList({ pageSize: 999 }).then((res) => {

src/services/job.js

@@ -13,3 +13,10 @@ export const getJobList = (params) => request('/work-job', { params });
  * @returns
  */
 export const getJobDetail = (id) => request(`/work-job/${id}`);
+
+/**
+ * 查询作业GIS
+ * @param {*} params
+ * @returns
+ */
+export const getJobGISDetail = (params) => request(`/machinery-gps`, { params });

src/utils/mapTogcj02.js

@@ -0,0 +1,66 @@
+//纬度转换
+function transformLatitude(x, y) {
+  let num = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
+  num += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0;
+  num += ((20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin((y / 3.0) * Math.PI)) * 2.0) / 3.0;
+  num +=
+    ((160.0 * Math.sin((y / 12.0) * Math.PI) + 320 * Math.sin((y * Math.PI) / 30.0)) * 2.0) / 3.0;
+  return num;
+}
+//经度转换
+function transformLongitude(x, y) {
+  let num = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
+  num += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0;
+  num += ((20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin((x / 3.0) * Math.PI)) * 2.0) / 3.0;
+  num +=
+    ((150.0 * Math.sin((x / 12.0) * Math.PI) + 300.0 * Math.sin((x / 30.0) * Math.PI)) * 2.0) / 3.0;
+  return num;
+}
+// 坐标转换
+function calculation(longitude, latitude) {
+  let a = 6378245.0; // 卫星椭球坐标投影到平面地图坐标系的投影因子。
+  let ee = 0.00669342162296594323; // 椭球的偏心率。
+  let lat = transformLatitude(longitude - 105.0, latitude - 35.0);
+  let lng = transformLongitude(longitude - 105.0, latitude - 35.0);
+  let radLat = (latitude / 180.0) * Math.PI;
+  let magic = Math.sin(radLat);
+  magic = 1 - ee * magic * magic;
+  let sqrtMagic = Math.sqrt(magic);
+  lat = (lat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * Math.PI);
+  lng = (lng * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * Math.PI);
+  return {
+    longitude: lng,
+    latitude: lat,
+  };
+}
+// 判断是否为国外坐标
+function isOutOfChina(longitude, latitude) {
+  if (longitude < 72.004 || longitude > 137.8347) {
+    return true;
+  }
+  if (latitude < 0.8293 || latitude > 55.8271) {
+    return true;
+  }
+  return false;
+}
+// GPS坐标 转 高德坐标
+function getCoordinate(long, lat) {
+  let longitude = Number(long);
+  let latitude = Number(lat);
+  if (isOutOfChina(longitude, latitude)) {
+    //国外
+    return {
+      longitude: longitude,
+      latitude: latitude,
+    };
+  } else {
+    //国内
+    let obj = calculation(longitude, latitude);
+    return {
+      longitude: longitude + obj.longitude,
+      latitude: latitude + obj.latitude,
+    };
+  }
+}
+
+export default getCoordinate;