同步代码

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;
+}

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 = () => {
+    changeSelectStatus = (menuData) => {
-        for (let n in this.state.selectLayerList) {
+        let selectLayerIdList = this.state.selectLayerIdList;
-            // 修改选中状态
+        this.setState({
-            let menuData = this.state.menuData;
+            selectLayerIdList: []
-            this.setState({menuData:[]})
+        })
-            for (let i in menuData) {
+        if (selectLayerIdList.length <= 0) return;
-                for (let j in menuData[i].children) {
+        // 修改选中状态
-                    if (this.state.selectLayerList[n].value === menuData[i].children[j].key.split('-')[1]) {
+        for(let i in menuData){
-                        let iconList = menuData[i].children[j].icon[0];
+            for(let j in menuData[i].children){
-                        menuData[i].children[j].icon = [];
+                for(let m in selectLayerIdList){
-                        menuData[i].children[j].icon.push(iconList);
+                    if(selectLayerIdList[m].split('-')[1] === menuData[i].children[j].key.split('-')[1]){
-                        menuData[i].children[j].icon.push(<EyeOutlined className='eye' key={new Date().getTime()} />);
+                        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'}

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(`
+                .setHTML(popHtml.innerHTML)
-                <div>
+                // console.log('edit-button', document.getElementsByClassName('edit-button')[0]);
-                    <div class="popup-title"><span class="popup-title-border"></span>详情信息</div>
+                popup.on('hide', () => {
-                    <div class="popup-name">名称：${LabelsData[i].pointName}</div>
+                    document.getElementById('marker' + i).style.width = '26px';
-                    <div class="popup-address">地址：${LabelsData[i].address || ''}</div>
+                    document.getElementById('marker' + i).style.height = '26px';
-                    <div class="popup-memo">备注：${LabelsData[i].memo || ''}</div>
+                });
-                </div>`);
+                popup.on('open', () => {
-                this.state.map.addPopup(popup)
+                    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';
+        // this.state.map.map.setDefaultCursor('crosshair');  将默认鼠标样式改为十字，地图内有元素会变为手指
-        // console.log('sence:', getElementsByClassName('l7-scene') );
+        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.disableDrawPoint();
-        this.state.map.setMapStatus({
+    }
+
+    // 取消点位创建
+    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>
         )
     }

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;*/}