Highways4Good/web/client/src/sections/fillion/components/gis/patrolGis.js

import React from 'react'
import PropTypes from 'prop-types'
import { useEffect } from 'react';
import { useState } from 'react';
import { DatePicker } from 'antd';
import Bounds from './bounds';
import moment from 'moment';
import { getReportList } from '../../actions/patrol'
const { RangePicker } = DatePicker;
function PatrolGis(props) {
    const { reportList, userId, dispatch } = props;
    const [mapComplete, setMapComplete] = useState(false);
    const [mapObj, setMapObj] = useState();
    const [dateRange, setDateRange] = useState([moment().add(-6, 'day'),
    moment()]);
    let markers = [];
    let PATH = [];

    useEffect(() => {
        if (AMap) loadMap();
        return () => {
            if (window.local_) {
                window.local_ = null
            }
            if (mapObj)
                mapObj.clearMap();
        }
    }, [true])

    useEffect(() => {
        if (mapObj) {
            mapObj.remove(markers);
            mapObj.remove(PATH);
        }
        let query = { userId, reportType: 'patrol' }
        if (userId) {
            if ((dateRange && dateRange instanceof Array)) {
                query.startTime = moment(dateRange[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
                query.endTime = moment(dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
            } else {
                query.startTime = moment().add(-6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
                query.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
            }
            dispatch(getReportList(query));
        } else {
            query.isTop = true;
            dispatch(getReportList(query));
        }
    }, [userId, dateRange])

    useEffect(() => {
        if (reportList && mapObj) {
            mapObj.clearMap();
            renderMarkers();
            if (userId)
                renderPath();
        }
    }, [reportList, mapObj, userId])

    const loadMap = () => {
        const map = new AMap.Map("amapId", {
            resizeEnable: true,
            center: [115.99255, 28.503617],//地图中心点，初始定位加载显示楼块
            zoom: 8,//地图显示的缩放级别
            zooms: [8, 18],
            pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
            viewMode: '3D', // 地图模式
            mapStyle: 'amap://styles/light',
        });

        //主题样式
        // var styleName = defaultStyleName;
        // map.setMapStyle(styleName);

        let windowOnload = false;
        map.on('complete', function () {
            console.log("map-complete")
            if (!window.local_) {
                window.local_ = new Loca.Container({ map });
                setMapObj(map);
            }
        });
        window.onload = function () {
            console.log("window.onload")
            windowOnload = true;
        }
    };

    const renderMarkers = () => {
        const map = mapObj;
        if (reportList && reportList instanceof Array) {
            reportList.map(item => {
                const { longitude, latitude, user } = item;
                if (!longitude || !latitude) {
                    return;
                }
                const imageURL = '/assets/images/worker.png'
                let icon = new AMap.Icon({
                    size: new AMap.Size(24, 24),    // 图标尺寸
                    image: imageURL,  // Icon的图像
                    rotation: 270,
                    // imageOffset: new AMap.Pixel(-14, -14),  // 图像相对展示区域的偏移量，适于雪碧图等
                    imageSize: new AMap.Size(24, 24)   // 根据所设置的大小拉伸或压缩图片
                });
                let marker = new AMap.Marker({
                    position: new AMap.LngLat(longitude, latitude),
                    icon: icon,
                    offset: new AMap.Pixel(-12, -12),
                    // extData: {
                    //     name: user.name || '',
                    // }
                });
                // marker.setTitle(s.name);
                markers.push(marker);
                map.add(marker);
            })
        }
    }

    const renderPath = () => {
        const map = mapObj;
        if (reportList && reportList instanceof Array) {
            let list = reportList
            list.sort((a, b) => {
                const timeA = moment(a.time).valueOf();
                const timeB = moment(b.time).valueOf();
                return timeA - timeB;
            })
            let path = []
            list.map(item => {
                const { longitude, latitude, } = item;
                if (longitude && latitude)
                    path.push([item.longitude, item.latitude])
            });
            PATH = path;
            var polyline1 = new AMap.Polyline({
                map: map,
                path: path,            // 设置线覆盖物路径
                showDir: true,
                strokeColor: '#3366bb',   // 线颜色
                strokeWeight: 7          // 线宽
            });
        }
    }

    return (
        <div style={{ width: '100%', backgroundColor: '#101824', height: '100%', minHeight: 700, position: 'relative' }}>
            <div id='amapId' style={{ width: '100%', height: '100%', background: "#101824", minHeight: 700 }} />
            <div style={{ position: 'absolute', top: 8, left: 20, display: userId ? 'block' : 'none' }}>
                <RangePicker
                    onChange={(date, dateString) => { setDateRange(dateString) }}
                    defaultValue={dateRange}
                />
            </div>
            {mapObj ? <Bounds map={mapObj} /> : ''}
        </div >
    )
}

PatrolGis.propTypes = {}

export default PatrolGis