map/src/pages/BaseMap/index.js

import React from 'react';
import { Select, Input, Card, Col, Row, Button, message, Modal, Spin } from 'antd';
import axios from 'axios';
import LayerData from './LayerData';
import { AimOutlined } from '@ant-design/icons';
import Guide from '../../components/Guide/index.ts';
import icon2 from '../../assets/icon/position_icon2.png';
import Header from '../../components/Header/index.js';

import { GaodeMap ,Scene, PointLayer, Heatmap, PolygonLayer } from '@antv/l7';

import styles from './index.less';

const { Option } = Select;
const AMap = window.AMap;
let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});

const nullSearchAddress = () => {
    message.error('地址信息为空');
};

const errorSearchAddress = () => {
    message.error('地址搜索信息异常，请联系开发人员');
};

const successSearchAddress = () => {
    message.success('已成功进行地图定位');
};

class BaseMap extends React.Component{

    constructor(){
        super();
        this.state = {
            map: null,
            // 地图中心
            center: {
                // title: '石家庄',longitude: 114.502461,latitude: 38.045474
            },
            provinceList: [],// 省
            provinceAdcode: '',//选中的省
            provinceLabel: '',//选中的省
            cityList: [],//市
            cityAdcode:'',//选中的市
            cityLabel: '',
            districtList: [],//区
            districtAdcode:'',//选中的区
            zoom: 4,
            inputExplainKey: 0,
            inputExplainValue: "请输入地址详情信息",
            inputContent: '',
            heatMapList: [],
            loading: false,
        }
    }
    startLoading = () => {
        this.setState({
            loading: true,
        });
    }
    stopLoading = () => {
        this.setState({
            loading: false,
        });
    }
    // 钩子，打开执行
    componentDidMount = () => {
        this.getAllProvince();
        this.createMap();
    } 
    // 创建地图
    createMap = () => {
        const scene = new Scene({
            id: 'container',
            map: new GaodeMap({
                pitch: 20,
                style: 'light',
                center: [ 116.405285, 39.904989 ],
                zoom: 3
            })
        });
        this.setState({
            map: scene
        });
    }

    //根据cityname、adcode、citycode设置地图位置
    gotoCity = (data) => {
        let zoom = data.zoom || 10;
        let lng = data.len || 116.405285;
        let lat = data.lat || 39.904989;
        this.state.map.setZoomAndCenter(zoom, [lng, lat]);
    }

    // 获取图层明细点位数据/热力图数据
    getLayerPoints = (layerId, selected, nodeType) => {
        if (selected) {
            this.startLoading();
            return axios.get('/api/basicMap/getLayerPoints', {
                params: {
                    adcode: this.state.districtAdcode || this.state.cityAdcode || this.state.provinceAdcode,
                    layerId: layerId
                }
            }).then((e) => {
                let layerPointsData = e.data.data;
                layerPointsData = layerPointsData.map((item) => {
                    item.lng = item.location.split(',')[0];
                    item.lat = item.location.split(',')[1];
                    item.value = 15;
                    return item;
                });
                if (nodeType === 1) {
                    this.setMarkers(layerPointsData, layerId);
                } else if (nodeType === 4) {
                    this.setHeatMap(layerPointsData, layerId);
                }
            }).then(() => {
                this.stopLoading();
            });
        } else {
            let self = this;
            let getLayers = self.state.map.getLayers();
            for (let i = 0; i < getLayers.length; i++) {
                if (getLayers[i].name == layerId) {
                    self.state.map.removeLayer(getLayers[i]);
                }
            }
            self.hideHeatMap(layerId);
        }
    }
     // 隐藏热力图
    hideHeatMap = (layerId) => {
        let heatMapList = this.state.heatMapList
        for (let i = 0; i < heatMapList.length; i++) {
            if (heatMapList[i].og.data[0].id === layerId || layerId === undefined || layerId === null || layerId === '') {
                heatMapList[i].hide();
            }
        }
    }
    // 在地图上设置点位 【经度，纬度】
    setMarkers = (data, layerId) => {
        let self = this;
        let map = this.state.map;
        let LabelsData = data || [];
        let logoImage = data.length > 0 && data[0].logoImage;
        // map.addImage( 'blueIcon',logoImage,);
        map.addImage('yellowIcon', icon2,);
        map.addImage( 'greenIcon','https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',);
        const pointLayer = new PointLayer({name: layerId})
            .source(LabelsData, {
                parser: {
                    type: 'json',
                    x: 'lng',
                    y: 'lat',
                }
            })
            .shape('yellowIcon')
            .size(20)
            // .color('mag', mag => {
            //     return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
            // })
            .active(true)
            .style({
                opacity: 1,
                strokeWidth: 3
            });
        map.addLayer(pointLayer);
    }

    // 点击点显示详细信息
    markerClick = (e) => {
        infoWindow.setContent(e.target.content);
        infoWindow.open(this.state.map, e.target.getPosition());
    }

    // 在地图上设置热力图 【经度，纬度】
    setHeatMap = (data, layerId) => {
        let self = this;
        let map = this.state.map;
        let LabelsData = data || [];
        let heatLayer = new Heatmap({nmae: layerId})
        .source(LabelsData)
        .shape('heatmap')
        .size('mag', [ 0, 1.0 ]) // weight映射通道
        .style({
          intensity: 2,
          radius: 20,
          rampColors: {
            colors: [
              '#FF4818',
              '#F7B74A',
              '#FFF598',
              '#91EABC',
              '#2EA9A1',
              '#206C7C'
            ].reverse(),
            positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
          }
        });
        map.addLayer(heatLayer);

        // 加载热力图插件
        // var heatmap;
        // var points = [];
        //  LabelsData.forEach(function (item) {
        //     points.push(
        //         {
        //             "lng": Number(item.location.split(',')[0]),
        //             "lat": Number(item.location.split(',')[1]),
        //             "count": item.weight,
        //             "id": layerId,
        //         }
        //     )
        //  })
        // map.plugin(["AMap.Heatmap"],function(){
        //     // 在地图对象叠加热力图
        //     heatmap = new AMap.Heatmap(map, {
        //         radius: 25,          //热力图的每个点的半径大小   [0,+∞)
        //         opacity: [0, 0.8],          //热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
        //         gradient:{          //热力图的颜色渐变区间。   {JSON}:key 插值的位置, 0-1;  value颜色值 
        //             0.5: 'blue',
        //             0.65: 'rgb(117,211,248)',
        //             0.7: 'rgb(0, 255, 0)',
        //             0.9: '#ffea00',
        //             1.0: 'red'
        //         },
        //     });
        //     // 设置热力图数据集
        //     heatmap.setDataSet({data:points,max:100});
        // });
        // this.setState((state) => {
        //     state.heatMapList.push(heatmap);
        // });
    }
    // 获取围栏图层数据
    getLayerShapes = (layerId, selected, adcode) => {
        if (selected) {
            return axios.get('/api/basicMap/getLayerShapes', {
                params: {
                    adcode: adcode || this.state.districtAdcode || this.state.cityAdcode || this.state.provinceAdcode,
                    layerId: layerId
                }
            }).then((e) => {
                let positionBorderData = e.data.data;
                this.setPolygon(positionBorderData, layerId);
            });
        } else {
            this.state.map.removeAllLayer();
        }
    }
    // 在地图上设置围栏、面
    setPolygon = (d, layerId) => {
        let self = this;
        let map = this.state.map;
        let data = d || [];
        let overlayList = [];
        const layer = new PolygonLayer({})
        .source(data)
        .shape('extrude')
        .size('h20', [ 100, 120, 160, 200, 260, 500 ])
        .color('h20', [
          '#816CAD',
          '#A67FB5',
          '#C997C7',
          '#DEB8D4',
          '#F5D4E6',
          '#FAE4F1',
          '#FFF3FC'
        ]);
        map.addLayer(layer);
        // paths.forEach(function(path) {
        //     if(path.type === "ENVELOPE"){
        //         var tmp1 = path.positionRectangle[0]
        //         var tmp2 = path.positionRectangle[1]
        //         var southWest = new AMap.LngLat(tmp1[0], tmp1[1])
        //         var northEast = new AMap.LngLat(tmp2[0], tmp2[1])
        //         var bound = new AMap.Bounds(southWest,northEast);
        //         var rectangle = new AMap.Rectangle({
        //             id: layerId,
        //             bounds: bound,
        //             strokeColor: path.borderColor,
        //             strokeWeight: 1,
        //             strokeOpacity: path.borderOpacity,
        //             fillOpacity: path.opacity,
        //             fillColor: path.themeColor,
        //             zIndex: 50,
        //         });
        //         overlayList.push(rectangle);
        //     }else if(path.type === "POLYGON"){
        //         var polygon = new AMap.Polygon({
        //             id: layerId,
        //             path: path.positionBorder,
        //             strokeColor: path.borderColor,
        //             strokeWeight: 1,
        //             strokeOpacity: path.borderOpacity,
        //             fillOpacity: path.opacity,
        //             fillColor: path.themeColor,
        //             zIndex: 50,
        //         });
        //         overlayList.push(polygon);
        //     }
        // });
        
        // let overlay = new AMap.OverlayGroup(overlayList);
        // map.add(overlay)

        // 缩放地图到合适的视野级别
        // map.setFitView([ polygon ])
    }

    // 获取省
    getAllProvince = () => {
        return axios.get('/api/mapCommon/getAllProvince').then((e) => {
            let provinceData = e.data.data;
            let provinceList = [];
            for (var i in provinceData) {
                provinceList.push({
                    'value': provinceData[i].provinceAdcode,
                    'label': provinceData[i].provinceName,
                    'zoom': 4,
                    'len': provinceData[i].centerCoordinate && provinceData[i].centerCoordinate.split(',')[0],
                    'lat': provinceData[i].centerCoordinate && provinceData[i].centerCoordinate.split(',')[1],
                })
            }
            this.setState ({
                provinceList: provinceList
            })
        });
    }
    // 选择省
    onProvinceChange = (provinceAdcode, data) => {
        var self = this;
        let getLayers = this.state.map.getLayers();
        // let getOverlays = this.state.map.getAllOverlays();
        for (let i = 0; i < getLayers.length; i++) {
            if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
                self.state.map.remove(getLayers[i]);
            } 
        }
        // this.state.map.remove(getOverlays);
        this.getCityByProvince(`${provinceAdcode}`);
        this.hideHeatMap();
        this.setState ({
            provinceAdcode: provinceAdcode ? `${provinceAdcode}` : '',
            provinceLabel: data ? data.label : '',
            zoom: 4,
            districtList: [],//区
            cityAdcode:'',//选中的市
            cityLabel: '',
            districtAdcode: '',
        })
    }
     // 获取市
     getCityByProvince = (provinceAdcode) => {
        return axios.get('/api/mapCommon/getCityByProvince', {
            params: {
                provinceAdcode: provinceAdcode
            }
        }).then((e) => {
            let cityData = e.data.data;
            let cityList = [];
            for (var i in cityData) {
                cityList.push({
                    'value': cityData[i].cityAdcode,
                    'label': cityData[i].cityName,
                    'zoom': 10,
                    'len': cityData[i].centerCoordinate && cityData[i].centerCoordinate.split(',')[0],
                    'lat': cityData[i].centerCoordinate && cityData[i].centerCoordinate.split(',')[1],
                })
            }
            this.setState ({
                cityList: cityList
            })
        });
    }
    //选择市
    onCityChange = (cityAdcode,data) => {
        var self = this;
        let getLayers = this.state.map.getLayers();
        self.startLoading();
        // let getOverlays = this.state.map.getAllOverlays();
        for (let i = 0; i < getLayers.length; i++) {
            if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
                self.state.map.remove(getLayers[i]);
            } 
        }
        // this.state.map.remove(getOverlays);
        this.getDistrictByCity(`${cityAdcode}`);
        this.refs.getLayerDataFun.getBasicLayerMenu(`${cityAdcode}`).then(() => {
            self.stopLoading();
        });
        data && this.gotoCity(data);
        this.hideHeatMap();
    
        this.setState ({
            cityAdcode: cityAdcode ? `${cityAdcode}` : '',
            cityLabel: data ? data.label : '',
            center: data && [parseFloat(data.lat), parseFloat(data.len)],
            zoom: 10,
            districtAdcode: ''
        })
    }
     // 获取区
     getDistrictByCity = (cityAdcode) => {
        return axios.get('/api/mapCommon/getDistrictByCity', {
            params: {
                cityAdcode: cityAdcode
            }
        }).then((e) => {
            let districtData = e.data.data;
            let districtList = [];
            for (var i in districtData) {
                districtList.push({
                    'value': districtData[i].districtAdcode,
                    'label': districtData[i].districtName,
                    'zoom': 13,
                    'len': districtData[i].centerCoordinate && districtData[i].centerCoordinate.split(',')[0],
                    'lat': districtData[i].centerCoordinate && districtData[i].centerCoordinate.split(',')[1],
                })
            }
            this.setState ({
                districtList: districtList
            })
        });
    }
    //选择区
    onDistrictChange = (provinceAdcode,data) => {
        var self = this;
        let getLayers = this.state.map.getLayers();
        self.startLoading()
        // let getOverlays = this.state.map.getAllOverlays();
        for (let i = 0; i < getLayers.length; i++) {
            if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
                self.state.map.remove(getLayers[i]);
            } 
        }
        // this.state.map.remove(getOverlays);
        this.refs.getLayerDataFun.getBasicLayerMenu(`${provinceAdcode}`).then(() => {
            self.stopLoading();
        });
        data && this.gotoCity(data);
        this.hideHeatMap();
        this.setState({
            districtAdcode: provinceAdcode ? `${provinceAdcode}` : '',
            center: data && [parseFloat(data.lat), parseFloat(data.len)],
            zoom: 13,
        })
    }
    onSearchSwitch = (data) => {
        if(data === "1"){
            this.setState({
                inputExplainKey: 1,
                inputExplainValue: "请输入经纬度详情，格式例如：116.405285,39.904989",
                inputContent: ""
            })
        }else{
            this.setState({
                inputExplainKey: 0,
                inputExplainValue: "请输入地址详情信息",
                inputContent: ""
            })
        }
    }
    onSearchMap = () => {
        if(this.state.inputExplainKey === 1){
            let location = this.state.inputContent
            let data = {
                'zoom': 13,
                'len': location.split(',')[0],
                'lat': location.split(',')[1],
            }
            this.gotoCity(data)
            let searchPointMarker = new AMap.Marker({
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [location.split(',')[0], location.split(',')[1]]
            });
            this.state.map.add(searchPointMarker);
            successSearchAddress();
        }else{
            let address = this.state.inputContent
            if(address === "" ||address === null){
                nullSearchAddress();
                return false;
            }else{
                address = this.state.provinceLabel +  this.state.cityLabel + address;
                return axios.get('/api/mapCommon/getPointByAddress', {
                    params: {
                        address: address
                    }
                }).then((e) => {
                    let coordinate = e.data.data;
                    if(coordinate === ""||coordinate === null){
                        errorSearchAddress();
                    }else{
                        let data = {
                            'zoom': 13,
                            'len': coordinate.location.split(',')[0],
                            'lat': coordinate.location.split(',')[1],
                        }
                        this.gotoCity(data)
                        let searchPointMarker = new AMap.Marker({
                            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                            position: [coordinate.location.split(',')[0], coordinate.location.split(',')[1]]
                        });
                        this.state.map.add(searchPointMarker);
                        successSearchAddress();
                    }
                });
            }
        }
    }

    render(){   
        return (
            <div className={styles.basseMap} id='base_map'>
                <Spin id='spin-show' size='large' spinning={this.state.loading}></Spin>
                <Header></Header>
                {/* 筛选框 */}
                <Card className={styles.selectWrap} bordered={false}>
                    <Row>
                        <Col span={12}>
                            <Input.Group compact style={{display:"inline"}}>
                                <label className={styles.labelForm}>行政区域：</label>
                                <Select style={{width: 120, marginLeft: 18}} onChange={this.onProvinceChange} options={this.state.provinceList} value={this.state.provinceAdcode} allowClear/>
                                <Select style={{width: 120, marginLeft: 18}} onChange={this.onCityChange} options={this.state.cityList} value={this.state.cityAdcode} allowClear/>
                                <Select style={{width: 120, marginLeft: 18}} onChange={this.onDistrictChange} options={this.state.districtList} value={this.state.districtAdcode} allowClear/>
                            </Input.Group>
                        </Col>
                        <Col span={12}>
                            <Input.Group compact style={{display:"inline",float:"right"}}>
                                <label className={styles.labelForm}>查询：</label>
                                <Select defaultValue="0" onChange={(e)=>{
                                    this.onSearchSwitch(e);
                                }}>
                                    <Option value="0">地址</Option>
                                    <Option value="1">经纬度</Option>
                                </Select>
                                <Input id="tipinput" style={{width: '60%', height: 32, marginLeft: 18}} placeholder={this.state.inputExplainValue} value={this.state.inputContent} onChange={(e)=>{
                                    this.setState({
                                        inputContent: e.target.value
                                    })
                                }}/>
                                <Button
                                    type="primary"
                                    style={{color: '#2F66F2', backgroundColor: 'white', }}
                                    icon={<AimOutlined />}
                                    onClick={this.onSearchMap}
                                />
                            </Input.Group>
                        </Col>
                    </Row>
                </Card>
                {/* 图层数据显示 */}
                <LayerData ref="getLayerDataFun" getLayerPoints = {this.getLayerPoints} getLayerShapes = {this.getLayerShapes}/>
                <div className={styles.btnRightWrap}>
                    <Button type="primary" className={styles.btnRight}>点位创建</Button>
                    <Button type="primary" className={styles.btnRight}>点位导入</Button>
                </div>
                {/* 地图 */}
                <div className={styles.mapWrap}>
                    <div style={{width: '100%', height: '100vh'}} id="container" />
                </div>
            </div>
        )
    }
}

export default BaseMap