同步代码

2024-06-19 15:19:42 +08:00 · 2024-06-19 15:19:42 +08:00 · 4abe7c1ae5
commit 4abe7c1ae5
parent 28b6e6941f
4 changed files with 316 additions and 100 deletions
--- a/src/index.less
+++ b/src/index.less
@ -680,6 +680,12 @@ body {
  .ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
    color: inherit;
  }
+  .cursor-crosshair{
+    cursor: crosshair !important;
+  }
+  .pointer-events-none{
+    pointer-events: none;
+  }
  #root .ant-select-selector  {
    border-radius: 6px;
    border: none;
@ -732,6 +738,47 @@ body {
  }

 // marker popup
+.popup-x{
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  padding-right: 12.5%;  
+  font-size: 30px;
+  border: 0;
+  background-color: #FFFFFF;
+  // background-color: red;
+  position: absolute;
+  top: 1%;
+  left: 87%;
+}
+.popup-coat{
+  margin-bottom: 25px;
+}
+// 弹框样式
+.l7-popup .l7-popup-content{
+  pointer-events: auto;
+  min-width: 300px;
+  min-height: 210px;
+}
+.l7-popup.l7-popup-anchor-bottom{
+    min-width: 300px;
+    min-height: 210px;
+}
+// 弹框右上的关闭按钮
+.l7-popup .l7-popup-content .l7-popup-close-button{
+  position: static !important;
+  float: right;
+}
+// 右下角的两个按钮外的div
+.button-div{
+  width: 110px;
+  // display: flex;
+  // justify-content: space-between;
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  margin-left: 100%;
+}
 .popup-title {
  width: 100%;
  font-size: 14px;
@ -742,7 +789,7 @@ body {
 }
 .popup-title-border{
  display: inline-block;
-  width: 5px;
+  width: 2px;
  height: 16px;
  background: #2F66F2;
  border-radius: 0px 0px 0px 0px;
@ -785,3 +832,17 @@ body {
 .popup-del:hover {
  color: #f57272;
 }
+// 删除警告框
+.delete-alert{
+  width: 300px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+#custom-pop{
+  // display: none !important;
+}
+.l7-marker-container2 .l7-popup{
+  pointer-events: all !important;
+}
--- a/src/pages/BaseMap/LayerData/index.js
+++ b/src/pages/BaseMap/LayerData/index.js
@ -28,11 +28,13 @@ class LayerData extends React.Component {
                note: '',
            },
            selectLayerList: [],
+            selectLayerIdList: [],
        }
    }

    // 获取基础图层菜单栏，获取列表数据
    getBasicLayerMenu = (adcode) => {
+
        return getBasicLayerMenuApi({adcode: adcode}).then((e) => {
            let basicLayeData = e.data;
            // MenuData
@ -48,6 +50,7 @@ class LayerData extends React.Component {
            this.setState ({
                menuData: menuDataList,
            })
+            this.changeSelectStatus(menuDataList);
        });
    }
    
@ -86,27 +89,6 @@ class LayerData extends React.Component {
        })
    }
    // 选中图层
-    onLayerSelect = (selectedKeys, info) => {
-        let selectLayerList = [];
-        let layerId = info.node.key.split('-')[1];
-        for (let i in info.selectedNodes) {
-            selectLayerList.push({
-                'value': info.selectedNodes[i].key.split('-')[1],
-                'label': info.selectedNodes[i].title,
-                'isCustomize': info.selectedNodes[i].isCustomize,
-            })
-        }
-        this.setState({
-            layerId: layerId,
-            selectLayerList: selectLayerList,
-        })
-        if (info.node.type === 1 || info.node.type === 4) {
-            this.props.getLayerPoints(layerId, info.selected, info.node.type);
-        } else if (info.node.type === 2) {
-            this.props.getLayerShapes(layerId, info.selected);
-        }
-    }
-    // 选中图层
    selectLayer = (e) => {
        // 修改选中状态
        let menuData = this.state.menuData;
@ -132,6 +114,7 @@ class LayerData extends React.Component {

        // 将选中图层写入选中图层列表
        let selectLayerList = [];
+        let selectLayerIdList = [];
        for (let m in e.selectedKeys) {
            selectLayerList.push({
                // key:  0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
@ -139,10 +122,12 @@ class LayerData extends React.Component {
                'label' : e.selectedKeys[m].split('-')[3],
                'isCustomize' : e.selectedKeys[m].split('-')[4],
            })
+            selectLayerIdList.push(e.selectedKeys[m])
        }
        this.setState({
            layerId: layerId,
            selectLayerList: selectLayerList,
+            selectLayerIdList : selectLayerIdList,
            menuData: [...menuData]
        })
    }
@ -171,6 +156,7 @@ class LayerData extends React.Component {

        // 将选中图层写入选中图层列表
        let selectLayerList = [];
+        let selectLayerIdList = [];
        for (let m in e.selectedKeys) {
            selectLayerList.push({
                // key:  0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
@ -178,10 +164,12 @@ class LayerData extends React.Component {
                'label' : e.selectedKeys[m].split('-')[3],
                'isCustomize' : e.selectedKeys[m].split('-')[4],
            })
+            selectLayerIdList.push(e.selectedKeys[m])
        }
        this.setState({
            layerId: layerId,
            selectLayerList: selectLayerList,
+            selectLayerIdList : selectLayerIdList,
            menuData: [...menuData],
        })
    }
@ -277,25 +265,25 @@ class LayerData extends React.Component {
        })
    };
    // 根据已选列表变化
-    changeSelectStatus = () => {
-        for (let n in this.state.selectLayerList) {
-            // 修改选中状态
-            let menuData = this.state.menuData;
-            this.setState({menuData:[]})
-            for (let i in menuData) {
-                for (let j in menuData[i].children) {
-                    if (this.state.selectLayerList[n].value === menuData[i].children[j].key.split('-')[1]) {
-                        let iconList = menuData[i].children[j].icon[0];
-                        menuData[i].children[j].icon = [];
-                        menuData[i].children[j].icon.push(iconList);
-                        menuData[i].children[j].icon.push(<EyeOutlined className='eye' key={new Date().getTime()} />);
+    changeSelectStatus = (menuData) => {
+        let selectLayerIdList = this.state.selectLayerIdList;
+        this.setState({
+            selectLayerIdList: []
+        })
+        if (selectLayerIdList.length <= 0) return;
+        // 修改选中状态
+        for(let i in menuData){
+            for(let j in menuData[i].children){
+                for(let m in selectLayerIdList){
+                    if(selectLayerIdList[m].split('-')[1] === menuData[i].children[j].key.split('-')[1]){
+                        selectLayerIdList[m] = menuData[i].children[j].key;
                    }
                }
            }
-            this.setState({
-                menuData: [...menuData]
-            })
        }
+        this.setState({
+            selectLayerIdList: selectLayerIdList
+        })
    }

    render() {
@ -312,6 +300,7 @@ class LayerData extends React.Component {
                    onSelect={this.selectLayer}
                    items={this.state.menuData}
                    mode='inline'
+                    selectedKeys={this.state.selectLayerIdList}
                />
                <div id='add-layer'>
                    <Button type='primary' id='add-layer-button' className={this.state.menuData.length > 0 ? 'showItem' : 'hideItem'}
--- a/src/pages/BaseMap/index.js
+++ b/src/pages/BaseMap/index.js
@ -5,8 +5,9 @@ import LayerData from './LayerData';
 import { AimOutlined } from '@ant-design/icons';
 import Header from '../../components/Header/index.js';
 import { createPoint, queryUserLayers, getLayerPointsApi, getAllProvinceApi, getCityByProvinceApi, getDistrictByCityApi, getLayerShapesApi, getPointByAddressApi } from '../../api';
+import Pop from './pop'

-import { GaodeMap ,Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup, MouseLocation } from '@antv/l7';
+import { GaodeMap ,Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup, MouseLocation, CanvasLayer } from '@antv/l7';
 // import { DrawPoint, DrawEvent } from '@antv/l7-draw';
 import icon04 from '../../assets/icon/icon04.svg'

@ -60,6 +61,8 @@ class BaseMap extends React.Component{
            pointDrawer: null,
            newPointLocation: '',
            mouseLocation:{},
+            disabled: false,
+            popParameter: {},
        }
    }
    startLoading = () => {
@ -125,6 +128,8 @@ class BaseMap extends React.Component{
                    item.value = 15;
                    return item;
                });
+                console.log('layerPointsData', layerPointsData);
+
                if (nodeType === 1) {
                    // 在地图上添加点位
                    this.setMarkers(layerPointsData, layerId);
@ -161,10 +166,12 @@ class BaseMap extends React.Component{
        let LabelsData = data || [];
        let markerLayer = new MarkerLayer({name: layerId});
        let el, popup, marker, icon;
+        // 设置地图上的点位（图标）
        for (let i = 0; i < LabelsData.length; i++) {
            el = document.createElement('label');
            el.style.width = '26px';
            el.style.height = '26px';
+            el.id = 'marker' + i;
            icon = LabelsData[0].logoImage;
            if (icon && (icon.substr(0, 7) == "http://" || icon.substr(0, 6) == "https:"  || icon.substr(0, 7) == "http:\\\\")) {
                el.style.background = 'url("' + icon + '") no-repeat';
@ -172,24 +179,33 @@ class BaseMap extends React.Component{
            } else {
                el.className = icon;
            }
-            
            marker = new Marker({
-                element: el
+                element: el,
            }).setLnglat({lng: LabelsData[i].lng, lat: LabelsData[i].lat})

+            // 设置弹框（点击事件）
            marker.on('click', (e) => {
+                // 获取弹框内的html
+                this.setState({popParameter: LabelsData[i]});
+                let popHtml = document.getElementById('custom-pop');
+                document.getElementById('marker' + i).style.width = '32px';
+                document.getElementById('marker' + i).style.height = '32px';
                popup = new Popup({
-                    offsets: [0, 30]
+                    offsets: [0, 30],
+                    closeOnClick: true,
+                    autoClose: true,
                })
                .setLnglat(e.lngLat)
-                .setHTML(`
-                <div>
-                    <div class="popup-title"><span class="popup-title-border"></span>详情信息</div>
-                    <div class="popup-name">名称：${LabelsData[i].pointName}</div>
-                    <div class="popup-address">地址：${LabelsData[i].address || ''}</div>
-                    <div class="popup-memo">备注：${LabelsData[i].memo || ''}</div>
-                </div>`);
-                this.state.map.addPopup(popup)
+                .setHTML(popHtml.innerHTML)
+                // console.log('edit-button', document.getElementsByClassName('edit-button')[0]);
+                popup.on('hide', () => {
+                    document.getElementById('marker' + i).style.width = '26px';
+                    document.getElementById('marker' + i).style.height = '26px';
+                });
+                popup.on('open', () => {
+                    document.getElementsByClassName('edit-button')[0].onclick = () => {console.log('edit-button')};
+                });
+                this.state.map.addPopup(popup);
            });

            markerLayer.addMarker(marker);
@ -200,6 +216,10 @@ class BaseMap extends React.Component{
        this.state.map.addMarkerLayer(markerLayer);
    }

+    hidePop = (pop) => {
+        // pop.hide();
+    }
+
    // 在地图上设置热力图 【经度，纬度】
    // setHeatMap = (data, layerId) => {
    //     let self = this;
@ -354,7 +374,6 @@ class BaseMap extends React.Component{
    }
    // 选择省 provinceAdcode:省编码 data:省数据
    onProvinceChange = (provinceAdcode, data) => {
-        console.log("provinceAdcode, data:", provinceAdcode, data)
        var self = this;
        // 清除点位图层
        let getLayers = self.state.markerLayerList;
@ -396,7 +415,6 @@ class BaseMap extends React.Component{
                    'lat': cityData[i].centerCoordinate && cityData[i].centerCoordinate.split(',')[1],
                })
            }
-            // console.log("cityList:", cityList)
            this.setState ({
                cityList: cityList
            })
@ -546,21 +564,24 @@ class BaseMap extends React.Component{
            message.error('请至少选中一个个人图层');
            return false;
        }
-        // 关闭地图双击放大
-        this.state.map.setMapStatus({
-            doubleClickZoom: false
-        })

        // 鼠标变十字
-        // document.getElementsByClassName("l7-scene")[0].style.cursor = 'crosshair';
-        // console.log('sence:', getElementsByClassName('l7-scene') );
+        // this.state.map.map.setDefaultCursor('crosshair');  将默认鼠标样式改为十字，地图内有元素会变为手指
+        document.getElementsByClassName('amap-layer')[0].className = 'amap-layer cursor-crosshair';
+
+
+        // 关闭地图双击放大
+        this.state.map.setMapStatus({
+            doubleClickZoom: false,
+        })

        // 获取点击时鼠标的地图坐标
        const mouseLocation = new MouseLocation();
        this.state.map.addControl(mouseLocation);

        this.setState({
-            // pointDrawer: drawer,
+            // 按键不可用
+            disabled: !this.state.disabled,
            selectLayerList: selectLayerList,
            mouseLocation: mouseLocation,
        });
@ -570,62 +591,52 @@ class BaseMap extends React.Component{
        this.state.map.on('dblclick', this.dblclickEvent); 
        // 右键事件
        this.state.map.on('contextmenu', this.contextmenuEvent);
+        // 键盘事件
+        const that = this;
+        document.onkeydown = function(event){
+            if (event.key === 'Escape') {
+                that.disableDrawPoint();
+                document.onkeydown = null;
+            }
+        };

-        
-
-        // this.state.map.addImage(
-        //     'dingwei',
-        //     'https://gw.alipayobjects.com/mdn/rms_3bf4aa/afts/img/A*JL46TZ_iYB0AAAAAAAAAAAAAARQnAQ',
-        //   );
-        // const drawer = new DrawPoint(this.state.map, {
-        //     style: {
-        //         point: {
-        //             normal: {
-        //                 shape: 'dingwei',
-        //                 size: 8,
-        //             },
-        //             hover: {
-        //                 shape: 'dingwei',
-        //                 size: 10,
-        //             },
-        //             active: {
-        //                 shape: 'dingwei',
-        //                 size: 10,
-        //             },
-        //         }
-        //     },
-        // });
-        // drawer.enable();
-        // drawer.on(DrawEvent.Add, (newPoint) => {
-        //     console.log('newPoint:', newPoint.geometry.coordinates.toString());
-        //     this.showModal(newPoint.geometry.coordinates.toString());
-        // });
-        
    }
    
     // 地图鼠标双击事件
     dblclickEvent = (e) => {
-        // 开启双击地图放大
-        this.state.map.setMapStatus({
-            doubleClickZoom: true
-        })
+        // 开启双击地图放大 不能放在这，会导致弹框的同时放大地图，将开启放大放在弹框关闭事件中
+        
        // 添加点位
        this.showModal(this.state.mouseLocation.location.toString());
        // 鼠标取消十字
+        // this.state.map.map.setDefaultCursor('auto');
+        document.getElementsByClassName('amap-layer')[0].className = 'amap-layer';
        // 删除右键事件监听
        this.state.map.off('contextmenu', this.contextmenuEvent);
        // 删除鼠标经纬度组件
        this.state.map.removeControl(this.state.mouseLocation);
        this.state.mouseLocation = {};
+        // 按键可用
+        this.setState({
+            disabled: !this.state.disabled,
+        });
+        
    }

    // 地图右键事件
    contextmenuEvent = (e) => {
-        // 开启双击地图放大
-        this.state.map.setMapStatus({
+       this.disableDrawPoint();
+    }
+
+    // 取消点位创建
+    disableDrawPoint = () => {
+         // 开启双击地图放大
+         this.state.map.setMapStatus({
            doubleClickZoom: true
        })
        // 鼠标取消十字
+        // this.state.map.map.setDefaultCursor('auto');
+        document.getElementsByClassName('amap-layer')[0].className = 'amap-layer';
        // 删除鼠标经纬度组件
        this.state.map.removeControl(this.state.mouseLocation);
        this.state.mouseLocation = {};
@ -633,6 +644,10 @@ class BaseMap extends React.Component{
        this.state.map.off('dblclick', this.dblclickEvent);
        // 删除右键事件监听
        this.state.map.off('contextmenu', this.contextmenuEvent);
+        // 按键可用
+        this.setState({
+            disabled: !this.state.disabled,
+        });
    }
    
    //弹出框事件
@ -652,7 +667,6 @@ class BaseMap extends React.Component{
        //         newPointLocation: newPointLocation,
        //     });
        // });
-        
        // 关闭双击事件监听事件
        this.state.map.off('dblclick', this.dblclickEvent); 
        this.setState({
@ -661,6 +675,10 @@ class BaseMap extends React.Component{
        });
    };
    handleOk = (values) => {
+         // 开启双击地图放大
+         this.state.map.setMapStatus({
+            doubleClickZoom: true
+        })
        createPoint({ //创建图层
            "layerId": this.state.pointAdd.layerId,
            "name": this.state.pointAdd.name,
@ -671,8 +689,6 @@ class BaseMap extends React.Component{
            "location": this.state.newPointLocation,
            "provinceAdcode": this.state.provinceAdcode,
        }).then((e) => { 
-            // this.state.pointDrawer.removeActiveFeature();
-            // this.state.pointDrawer.disable();
            let layerId = this.state.pointAdd.layerId;
            if (e.success) {
                message.success('点位创建成功!');
@ -682,7 +698,7 @@ class BaseMap extends React.Component{
                }, 1000);//true新增，1点
                let filter = this.state.districtAdcode || this.state.cityAdcode;
                this.refs.getLayerDataFun.getBasicLayerMenu(filter)
-                this.refs.getLayerDataFun.changeSelectStatus();
+                // this.refs.getLayerDataFun.changeSelectStatus();
                this.setState({
                    isModalOpen: false,
                    pointAdd: {},
@ -693,6 +709,10 @@ class BaseMap extends React.Component{
        })
    };
    handleCancel = () => {
+         // 开启双击地图放大
+         this.state.map.setMapStatus({
+            doubleClickZoom: true
+        })
        // this.state.pointDrawer.removeActiveFeature();
        // this.state.pointDrawer.disable();
        this.setState({
@ -747,7 +767,7 @@ class BaseMap extends React.Component{

    render(){   
        return (
-            <div className={styles.basseMap} id='base_map'>
+            <div id='base_map' className={styles.basseMap} >
                <Spin id='spin-show' size='large' spinning={this.state.loading}></Spin>
                <Header></Header>
                {/* 筛选框 */}
@ -800,8 +820,9 @@ class BaseMap extends React.Component{
                    getLayerPoints = {this.getLayerPoints} 
                    getLayerShapes = {this.getLayerShapes}
                />
+
                <div className={styles.btnRightWrap}>
-                    <Button type="primary" className={styles.btnRight} onClick={this.enableDrawPoint}>点位创建</Button>
+                    <Button type="primary" className={styles.btnRight} onClick={this.enableDrawPoint} disabled={this.state.disabled}>点位创建</Button>
                    {/* <Button type='primary' danger className={styles.btnRight} onClick={() => this.state.pointDrawer?.disable()}>停止创建</Button> */}
                    <Modal title="点位创建" 
                    open={this.state.isModalOpen} 
@ -856,6 +877,11 @@ class BaseMap extends React.Component{
                <div className={styles.mapWrap} id='redio-btn-group'>
                    <div style={{width: '100%', height: '100vh'}} id="container" />
                </div>
+                <div className='hideItem'>
+                <Pop popParameter={this.state.popParameter} className='hideItem'></Pop>
+
+                </div>
+
            </div>
        )
    }
--- a/src/pages/BaseMap/pop.js
+++ b/src/pages/BaseMap/pop.js
@ -0,0 +1,140 @@
+import { Alert, Button, Space } from "antd";
+import {deletePoint} from '../../api'
+import { useState } from "react";
+import '../../index.less';
+
+
+function pop(e){
+    const [isAlertOpen, setIsAlertOpen] = useState(false);
+    
+    function deleteChannel(){
+        console.log('delete');
+    }
+
+
+    let memoContent = null;  
+    if(e.popParameter.memo == undefined || e.popParameter.memo == null || e.popParameter.memo == ''){
+        
+    }else{
+        e.popParameter.memo = <div class="popup-memo">备注：{memoContent}</div>;
+    }
+    return(
+        <>
+        <div id='custom-pop' >
+            <div className="popup-coat">
+                <div className="popup-title">
+                    <span className="popup-title-border"></span>
+                    详情信息
+                </div>
+                <div className="popup-name">名称：{e.popParameter.pointName}</div>
+                <div className="popup-address">地址：{e.popParameter.address || ''}</div>
+                {memoContent}
+            </div>
+            <div className="button-div">
+                <Button type="link" 
+                    className="edit-button"
+                    >编辑</Button>
+                <Button type="link" 
+                    danger 
+                    className="delete-button"
+                >删除</Button>
+            </div>
+            <Alert 
+                message="删除后不可恢复，是否确认删除？"
+                type="warning" 
+                showIcon
+                className={isAlertOpen ? 'delete-alert' : 'delete-alert hideItem'}
+                action={        
+                    <Space direction="vertical" >
+                        <Button size="small" type="primary">
+                         Accept
+                        </Button>
+                        <Button size="small" danger ghost>
+                         Decline
+                        </Button>
+                    </Space>}
+            />
+        </div>
+        </>
+    )
+}
+
+export default pop;
+
+ {/* import { Alert, Button, Space } from "antd";
+import {deletePoint} from '../../api'
+import React, { useState } from "react";
+
+
+class pop extends React.Component{
+    constructor(props){
+        super(props);
+        this.state = {
+            isAlertOpen: false,
+            memoContent: null,
+            popParameter:{},
+        }
+    }
+
+
+    componentDidMount = () => {
+        console.log('pop',popParameter);
+        // if(popParameter.memo == undefined || popParameter.memo == null || e.popParameter.memo == ''){
+        
+        // }else{
+        //     memoContent = <div class="popup-memo">备注：{memoContent}</div>;
+        // }
+    }
+
+    clicks = () => {
+        console.log('click');
+    }
+
+    
+    render(){
+        return(
+            <>
+            {/* <div id='custom-pop' >
+            <button onClick={this.clicks}>button</button>
+    
+                <div className="popup-coat">
+                    <div className="popup-title">
+                        <span className="popup-title-border"></span>
+                        详情信息
+                    </div>
+                    <div className="popup-name">名称：{popParameter.pointName}</div>
+                    <div className="popup-address">地址：{popParameter.address || ''}</div>
+                    {memoContent}
+                </div>
+                <div className="button-div">
+                    <Button type="link" 
+                        className="edit-button"
+                        >编辑</Button>
+                    <Button type="link" 
+                        danger 
+                        className="delete-button"
+                    >删除</Button>
+                </div>
+                <Alert 
+                    message="删除后不可恢复，是否确认删除？"
+                    type="warning" 
+                    showIcon
+                    className={this.isAlertOpen ? 'delete-alert' : 'delete-alert hideItem'}
+                    action={        
+                        <Space direction="vertical" >
+                            <Button size="small" type="primary">
+                             Accept
+                            </Button>
+                            <Button size="small" danger ghost>
+                             Decline
+                            </Button>
+                        </Space>}
+                />
+            </div> */}
+//             </>
+//         )
+//     }
+
+// }
+
+// export default pop;*/}