改变图层列表

2024-06-17 17:06:46 +08:00 · 2024-06-17 17:06:46 +08:00 · 281de0492e
commit 281de0492e
parent ce49dfe013
6 changed files with 1778 additions and 109 deletions
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@ -9,6 +9,7 @@ import '../../index.less';
 function Header (e) {
  let setToken = loginStore;
  let navigate = useNavigate();
+  // 退出登录
  let logout = () => {
    passwordLogout().then((e) => {
      if (!e.success) {
@ -19,6 +20,7 @@ function Header (e) {
    })
  }   
  useEffect(() =>{
+    // 获取当前用户信息
    getCurrentUser().then((e) => {
      if (e.success) {
        setToken.setAuthName(e.data.username);
--- a/src/index.less
+++ b/src/index.less
@ -145,19 +145,48 @@ body {
 :where(.css-dev-only-do-not-override-9ntgx0).ant-form-horizontal .ant-form-item-label {
  width: 120px;
 }
+.layer-data-title{
+  width: 100%;
+  padding: 10px 0;
+  text-align: center;
+  background-color:  #FFFFFF;
+  // 内容不被选中
+  -webkit-user-select:none;/*谷歌 /Chrome*/
+	-moz-user-select:none; /*火狐/Firefox*/
+	-ms-user-select:none;    /*IE 10+*/
+	user-select:none;
+}
+.layer-data-title span {
+  margin: 10px 0;
+}
 .layer-data-wrap {
+    overflow: hidden;
    position: fixed;
    top: 190px;
-    width: 220px;
-    z-index: 999;
+    width: 270px;
+    max-height: 450px;
    margin: 2% 4.2%;
    background: rgba(239,240,248,1);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
    opacity: 1;
-    text-align: center;
+    z-index: 999;
  }
-  #add-layer {
+  .layer-data-wrap:hover{
+    overflow-y: auto !important;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+  }
+  .layer-data-wrap:hover::-webkit-scrollbar {
+    display: none; /* Safari and Chrome */
+  }
+  #add-layer{
+    width: 100%;
+    text-align: center;
+    background-color:  #FFFFFF;
+  }
+  #add-layer-button {
+    margin-top: 18px;
    margin-bottom: 18px;
  }
  .ant-modal-content {
@ -173,6 +202,14 @@ body {
  .ant-modal-footer {
    text-align: center !important;
  }
+  .eye{
+    position: absolute;
+    right: 10%;
+  }
+  .ant-menu-item{
+    // position: relative;
+    // left: -25px;
+  }
  #redio-btn-color-group .radio-btn-color {
    width: 30px;
    height: 25px;
@ -224,13 +261,32 @@ body {
    height: 30px;
    border-radius: 0% !important;
  }
+  #layer-icon{
+    width: 20px;
+    height: 20px;
+    position: relative;
+    top: 5px;
+    right: 5px;
+  }
+  .layer-icon2{
+    width: 20px !important;
+    height: 20px !important;
+  }
+  .layer-icon2 span {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    position: relative;
+    left: -5px !important;
+    top: -5px !important;
+  }
  #redio-btn-group {
    width: 100%;
  }
  #redio-btn-group span {
    display: inline-block;
-    width: 100%;
-    height: 100%;
+    width: 20px;
+    height: 20px;
    position: relative;
    left: -2px;
    top: 6px;
@ -592,6 +648,9 @@ body {
  .layer-data-wrap .ant-tree {
    background: none;
  }
+  .layer-data-wrap .menu-coat{
+    height: 100%;
+  }
  .ant-tree-treenode:first-child {
    margin-top: 10px;
  }
@ -663,7 +722,7 @@ body {
    width: 100%;
    height: 100%;
    position: absolute;
-    z-index: 9999;
+    z-index: 999;
  }
  #spin-show > span {
    position: absolute;
--- a/src/pages/BaseMap/LayerData/SetLogoImagePath.js
+++ b/src/pages/BaseMap/LayerData/SetLogoImagePath.js
@ -2,13 +2,14 @@ function SetLogoImagePath (e) {
  let fileName = e.logoImagePath;
  if (fileName.substr(0, 7) == "http://" || fileName.substr(0, 6) == "https:"  || fileName.substr(0, 7) == "http:\\\\") {
    return (
-      <span>
-          <img src={fileName} />
+      <span >
+          <img id="layer-icon" src={fileName} />
      </span>
    );
  } else {
+    console.log('fileName', fileName);
    return (
-      <span id="redio-btn-group">
+      <span id="redio-btn-group" className="layer-icon2">
        <span className={fileName}></span>
      </span>
    );
--- a/src/pages/BaseMap/LayerData/index.js
+++ b/src/pages/BaseMap/LayerData/index.js
@ -1,20 +1,24 @@
 import React from 'react';
-import { Tree, Button, Modal, Form, Input, Radio, message } from 'antd';
+import { Tree, Button, Modal, Form, Input, Radio, message, Menu } from 'antd';
 import axios from 'axios';
 import {
  DownOutlined,
  EyeOutlined,
  EyeInvisibleOutlined,
+  UnderlineOutlined,
+  UnorderedListOutlined,
 } from '@ant-design/icons';
 import SetLogoImagePath from './SetLogoImagePath'
 import { createLayer } from '../../../api';
 import '../../../index.less';
+import { label } from 'three/examples/jsm/nodes/Nodes.js';

 class LayerData extends React.Component {
    constructor () {
        super ();
        this.state = {
            treeData: [],
+            menuData:[], //菜单数据
            layerId: '',
            isModalOpen: false,
            addLayer: {
@ -28,7 +32,7 @@ class LayerData extends React.Component {
        }
    }

-    // 获取基础图层菜单栏
+    // 获取基础图层菜单栏，获取列表数据
    getBasicLayerMenu = (adcode) => {
        return axios.get('/api/basicMap/getBasicLayerMenu', {
            params: {
@ -36,46 +40,55 @@ class LayerData extends React.Component {
            }
        }).then((e) => {
            let basicLayeData = e.data.data;
-            let basicLayeList = [];
-            for (var i in basicLayeData) {
-                basicLayeList.push({
-                    key: basicLayeData[i].id,
-                    title : basicLayeData[i].name,
-                    selectable: false,
-                    children: this.getLayerList(basicLayeData[i].layerList),
+
+            // MenuData
+            let menuDataList = [];
+            for (var m in basicLayeData) {
+                menuDataList.push({
+                    key: basicLayeData[m].id,
+                    label: basicLayeData[m].name,
+                    icon: <UnorderedListOutlined/>,
+                    children: this.getLayerList(basicLayeData[m].layerList),
                })
            }
            this.setState ({
-                treeData: basicLayeList
+                menuData: menuDataList,
            })
        });
    }
+    
+
+    // 获取图层列表
    getLayerList = (layerList, i) => {
        var cLayerList = [];
        for (let i in layerList) {
            cLayerList.push({
-                'key': i + '-' + layerList[i].id + '-' + new Date(),
-                'title': layerList[i].name + '(' + layerList[i].geoUnitAmount + ')',
-                'icon': ({ selected }) => (selected ? [<EyeOutlined key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]
-                     : [<EyeInvisibleOutlined key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath}  key={new Date().getTime() + 1}/>]),
-                'type': layerList[i].type,
-                'isCustomize': layerList[i].isCustomize,
+                // key:  0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
+                key: i + '-' + layerList[i].id + '-' + new Date() + '-' + layerList[i].name + '(' + layerList[i].geoUnitAmount + ')' + '-' + layerList[i].isCustomize,
+                label: layerList[i].name + '(' + layerList[i].geoUnitAmount + ')',
+                // icon 分别为图标和小眼睛（是否显示该图层），后续在选择函数中修改
+                icon:[<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>,<EyeInvisibleOutlined className='eye' key={new Date().getTime()} />],
+                // icon:({ selected }) => (selected ? [<EyeOutlined className='eye' key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]
+                // : [<EyeInvisibleOutlined className='eye' key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath}  key={new Date().getTime() + 1}/>]),
+                typee: layerList[i].type,
+                isCustomize: layerList[i].isCustomize,
            })
        }
        return cLayerList;
    }
+
    //新建点位后修改涂层数量
    changeUnitAmount = (layerId) => {
-        let treeData = this.state.treeData;
-        for (let i in treeData) {
-            for (let j in treeData[i].children) {
-                if (layerId == treeData[i].children[j].key.split('-')[1]) {
-                    treeData[i].children[j].title = 'ooo' ;
+        let menu = this.state.menuData;
+        for (let i in menu) {
+            for (let j in menu[i].children) {
+                if (layerId == menu[i].children[j].key.split('-')[1]) {
+                    menu[i].children[j].title = 'ooo' ;
                }
            }
        }
        this.setState ({
-            treeData: treeData
+            menuData: menu
        })
    }
    // 选中图层
@ -99,6 +112,85 @@ class LayerData extends React.Component {
            this.props.getLayerShapes(layerId, info.selected);
        }
    }
+    // 选中图层
+    selectLayer = (e) => {
+        // 修改选中状态
+        let menuData = this.state.menuData;
+        this.setState({menuData:[]})    // 将图层列表的数据清空（不清空组件不更新数据）
+        for (let i in menuData) {       // 将选中图层的小眼睛改为打开状态（重新写入数据）
+            for (let j in menuData[i].children) {
+                if (e.key === menuData[i].children[j].key) {
+                    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()} />);
+                }
+            }
+        }
+
+        // 改变选择状态并改变地图上的图层
+        let layerId = e.key.split('-')[1];
+        if (e.item.props.typee === 1 || e.item.props.typee === 4) {
+            this.props.getLayerPoints(layerId, true, e.item.props.typee);
+        } else if (e.item.props.typee === 2) {
+            this.props.getLayerShapes(layerId, true);
+        }
+
+        // 将选中图层写入选中图层列表
+        let selectLayerList = [];
+        for (let m in e.selectedKeys) {
+            selectLayerList.push({
+                // key:  0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
+                'value' : e.selectedKeys[m].split('-')[1],
+                'label' : e.selectedKeys[m].split('-')[3],
+                'isCustomize' : e.selectedKeys[m].split('-')[4],
+            })
+        }
+        this.setState({
+            layerId: layerId,
+            selectLayerList: selectLayerList,
+            menuData: [...menuData]
+        })
+    }
+    // 取消选中图层
+    deselectlayer = (e) =>{
+        // 修改选中状态
+        let menuData = this.state.menuData;
+        this.setState({menuData:[]})
+        for (let i in menuData) {
+            for (let j in menuData[i].children) {
+                if (e.key === menuData[i].children[j].key) {
+                    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(<EyeInvisibleOutlined className='eye' key={new Date().getTime()} />);
+                }
+            }
+        }
+        // 改变选择状态并改变地图上的图层
+        let layerId = e.key.split('-')[1];
+        if (e.item.props.typee === 1 || e.item.props.typee === 4) {
+            this.props.getLayerPoints(layerId, false, e.item.props.typee);
+        } else if (e.item.props.typee === 2) {
+            this.props.getLayerShapes(layerId, false);
+        }
+
+        // 将选中图层写入选中图层列表
+        let selectLayerList = [];
+        for (let m in e.selectedKeys) {
+            selectLayerList.push({
+                // key:  0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
+                'value' : e.selectedKeys[m].split('-')[1],
+                'label' : e.selectedKeys[m].split('-')[3],
+                'isCustomize' : e.selectedKeys[m].split('-')[4],
+            })
+        }
+        this.setState({
+            layerId: layerId,
+            selectLayerList: selectLayerList,
+            menuData: [...menuData],
+        })
+    }
    //弹出框事件
    showModal = () => {
        this.setState({
@ -107,7 +199,6 @@ class LayerData extends React.Component {
    };
    handleOk = (values) => {
        let self = this;
-        let treeData = this.state.treeData
        if (this.state.addLayer.id != 0) { //编辑图层
            updateLayer({
                id: this.state.addLayer.id,
@ -191,21 +282,48 @@ 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()} />);
+                    }
+                }
+            }
+            this.setState({
+                menuData: [...menuData]
+            })
+        }
+    }

    render() {
        return (
            <div className='layer-data-wrap'>
-                <Tree
+             <div className='menu-list'>
+                <div className={this.state.menuData.length > 0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}>
+                    <span>图层数据</span>
+                </div>
+                <Menu
                    multiple
-                    showIcon
-                    defaultSelectedKeys={[]}
-                    switcherIcon={<DownOutlined />}
-                    treeData={this.state.treeData}
-                    onSelect={this.onLayerSelect}
+                    id='layer-data-menu'
+                    onDeselect={this.deselectlayer}
+                    onSelect={this.selectLayer}
+                    items={this.state.menuData}
+                    mode='inline'
                />
-                <Button type='primary' id='add-layer' className={this.state.treeData.length > 0 ? 'showItem' : 'hideItem'}
-                onClick={this.showModal}>新建图层</Button>
+                <div id='add-layer'>
+                    <Button type='primary' id='add-layer-button' className={this.state.menuData.length > 0 ? 'showItem' : 'hideItem'}
+                    onClick={this.showModal}>新建图层</Button>
+                </div>
+             </div>
                <Modal title="新建图层" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} className='edit-layer-modal'>
                    <Form name='base' id='edit-layer-form' onFinish={this.handleOk}>
                        <Form.Item label="图层名称"
--- a/src/pages/BaseMap/index.js
+++ b/src/pages/BaseMap/index.js
@ -2,22 +2,26 @@ import React from 'react';
 import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form } from 'antd';
 import axios from 'axios';
 import LayerData from './LayerData';
+// import LayerList from './LayerList';
 import { AimOutlined } from '@ant-design/icons';
 import Header from '../../components/Header/index.js';
 import { createPoint, queryUserLayers } from '../../api';

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

 import styles from './index.less';

 const { Option } = Select;

+const nullSearchLocation = () => {
+    message.error('坐标信息为空');
+};
+
 const nullSearchAddress = () => {
    message.error('地址信息为空');
 };
-
 const errorSearchAddress = () => {
    message.error('地址搜索信息异常，请联系开发人员');
 };
@ -50,12 +54,13 @@ class BaseMap extends React.Component{
            inputContent: '',
            heatMapList: [],
            loading: false,
-            markerLayerList: [],
+            markerLayerList: [], // 点位图层
            isModalOpen: false,
            selectLayerList: [],
            pointAdd: {},
            pointDrawer: null,
            newPointLocation: '',
+            mouseLocation:{},
        }
    }
    startLoading = () => {
@ -81,7 +86,7 @@ class BaseMap extends React.Component{
                pitch: 20,
                style: 'light',
                center: [ 118.405285, 39.904989 ],
-                zoom: 3
+                zoom: 3,
            })
        });
        this.setState({
@ -117,6 +122,7 @@ class BaseMap extends React.Component{
                }
            }).then((e) => {
                let layerPointsData = e.data.data || [];
+                // 处理返回的数据
                layerPointsData = layerPointsData.map((item) => {
                    item.lng = item.location.split(',')[0];
                    item.lat = item.location.split(',')[1];
@ -124,6 +130,7 @@ class BaseMap extends React.Component{
                    return item;
                });
                if (nodeType === 1) {
+                    // 在地图上添加点位
                    this.setMarkers(layerPointsData, layerId);
                } else if (nodeType === 4) {
                    // this.setHeatMap(layerPointsData, layerId);
@ -351,23 +358,32 @@ class BaseMap extends React.Component{
            })
        });
    }
-    // 选择省
+    // 选择省 provinceAdcode:省编码 data:省数据
    onProvinceChange = (provinceAdcode, data) => {
+        console.log("provinceAdcode, data:", provinceAdcode, data)
        var self = this;
+        // 清除点位图层
        let getLayers = self.state.markerLayerList;
        for (let i = 0; i < getLayers.length; i++) {
            self.state.map.removeMarkerLayer(getLayers[i]);
        }
+        // 清除子组件的已选图层
+        this.refs.getLayerDataFun.state.selectLayerList = [];
+        // 清除所选市
+        this.onCityChange();
+        
        data && this.gotoProvince(data)
+        // 根据所选省获取市
        this.getCityByProvince(`${provinceAdcode}`);
+    
        this.hideHeatMap();
        this.setState ({
-            provinceAdcode: provinceAdcode ? `${provinceAdcode}` : '',
-            provinceLabel: data ? data.label : '',
-            zoom: 8,
-            districtList: [],//区
+            provinceAdcode: provinceAdcode ? `${provinceAdcode}` : '', //  省编码
+            provinceLabel: data ? data.label : '', // 省名称
+            zoom: 8, // 缩放级别
            cityAdcode:'',//选中的市
            cityLabel: '',
+            districtList: [],//区
            districtAdcode: '',
        })
    }
@ -378,6 +394,7 @@ class BaseMap extends React.Component{
                provinceAdcode: provinceAdcode
            }
        }).then((e) => {
+            console.log("e:", e)
            let cityData = e.data.data;
            let cityList = [];
            for (var i in cityData) {
@ -385,30 +402,33 @@ class BaseMap extends React.Component{
                    'value': cityData[i].cityAdcode,
                    'label': cityData[i].cityName,
                    'zoom': 10,
+                    // 'len': cityData[i].centerCoordinate.split(',')[0], 
                    'len': cityData[i].centerCoordinate && cityData[i].centerCoordinate.split(',')[0],
                    'lat': cityData[i].centerCoordinate && cityData[i].centerCoordinate.split(',')[1],
                })
            }
+            // console.log("cityList:", cityList)
            this.setState ({
                cityList: cityList
            })
        });
    }
-    //选择市
+    //选择市 cityAdcode:市编码 data:市数据
    onCityChange = (cityAdcode,data) => {
        var self = this;
        self.startLoading();
+        // 清除点位图层
        let getLayers = self.state.markerLayerList;
        for (let i = 0; i < getLayers.length; i++) {
            self.state.map.removeMarkerLayer(getLayers[i]);
        }
+        // 根据所选市获取区
        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 : '',
@ -475,32 +495,43 @@ class BaseMap extends React.Component{
            })
        }
    }
+    // 地图搜索
    onSearchMap = () => {
+        // 0地址 1经纬度 
        if(this.state.inputExplainKey === 1){
+            // 判断经纬度是否为空
            let location = this.state.inputContent
-            let data = {
-                'zoom': 8,
-                'len': location.split(',')[0],
-                'lat': location.split(',')[1],
+            if(location === "" || location === null){
+                nullSearchLocation();
+                return false;
+            }else{
+                let data = {
+                    'zoom': 8,
+                    'len': location.split(',')[0],
+                    'lat': location.split(',')[1],
+                }
+                this.gotoCity(data)
+                let icon = "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";
+                let searchPointMarker = new Marker().setLnglat({lng: location.split(',')[0], lat: location.split(',')[1]});
+                this.state.map.addMarker(searchPointMarker);
+                successSearchAddress();
            }
-            this.gotoCity(data)
-            let icon = "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";
-            let searchPointMarker = new Marker().setLnglat({lng: location.split(',')[0], lat: location.split(',')[1]});
-            this.state.map.addMarker(searchPointMarker);
-            successSearchAddress();
        }else{
+            // 判断地址是否为空
            let address = this.state.inputContent
            if(address === "" ||address === null){
                nullSearchAddress();
                return false;
            }else{
                address = this.state.provinceLabel +  this.state.cityLabel + address;
+                console.log("address:", address)
                return axios.get('/api/mapCommon/getPointByAddress', {
                    params: {
                        address: address
                    }
                }).then((e) => {
                    let coordinate = e.data.data;
+                    console.log("coordinate:", coordinate.location)
                    if(coordinate === ""||coordinate === null){
                        errorSearchAddress();
                    }else{
@ -520,6 +551,7 @@ class BaseMap extends React.Component{
        }
    }

+    // 点位创建
    enableDrawPoint = () => {
        if (this.state.cityAdcode == '' && this.state.districtAdcode == '') {
            message.error('请至少选择行政区域至城市再进行点位创建');
@ -535,36 +567,93 @@ class BaseMap extends React.Component{
            message.error('请至少选中一个个人图层');
            return false;
        }
-        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) => {
-            this.showModal(newPoint.geometry.coordinates.toString());
-        });
+        // 关闭地图双击放大
+        this.state.map.setMapStatus({
+            doubleClickZoom: false
+        })
+
+        // 鼠标变十字
+        // document.getElementsByClassName("l7-scene")[0].style.cursor = 'crosshair';
+        // console.log('sence:', getElementsByClassName('l7-scene') );
+
+        // 获取点击时鼠标的地图坐标
+        const mouseLocation = new MouseLocation();
+        this.state.map.addControl(mouseLocation);
+
        this.setState({
-            pointDrawer: drawer,
+            // pointDrawer: drawer,
            selectLayerList: selectLayerList,
+            mouseLocation: mouseLocation,
        });
+
+        // 开启地图的事件监听，双击添加，右键取消
+        // 双击事件
+        this.state.map.on('dblclick', this.dblclickEvent); 
+        // 右键事件
+        this.state.map.on('contextmenu', this.contextmenuEvent);
+
+        
+
+        // 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.off('contextmenu', this.contextmenuEvent);
+        // 删除鼠标经纬度组件
+        this.state.map.removeControl(this.state.mouseLocation);
+        this.state.mouseLocation = {};
+    }
+
+    // 地图右键事件
+    contextmenuEvent = (e) => {
+        // 开启双击地图放大
+        this.state.map.setMapStatus({
+            doubleClickZoom: true
+        })
+        // 鼠标取消十字
+        // 删除鼠标经纬度组件
+        this.state.map.removeControl(this.state.mouseLocation);
+        this.state.mouseLocation = {};
+        // 删除双击事件监听
+        this.state.map.off('dblclick', this.dblclickEvent);
+        // 删除右键事件监听
+        this.state.map.off('contextmenu', this.contextmenuEvent);
    }
    
    //弹出框事件
@ -584,6 +673,9 @@ class BaseMap extends React.Component{
        //         newPointLocation: newPointLocation,
        //     });
        // });
+        
+        // 关闭双击事件监听事件
+        this.state.map.off('dblclick', this.dblclickEvent); 
        this.setState({
            isModalOpen: true,
            newPointLocation: newPointLocation,
@ -600,8 +692,8 @@ class BaseMap extends React.Component{
            "location": this.state.newPointLocation,
            "provinceAdcode": this.state.provinceAdcode,
        }).then((e) => { 
-            this.state.pointDrawer.removeActiveFeature();
-            this.state.pointDrawer.disable();
+            // this.state.pointDrawer.removeActiveFeature();
+            // this.state.pointDrawer.disable();
            let layerId = this.state.pointAdd.layerId;
            if (e.success) {
                message.success('点位创建成功!');
@ -611,6 +703,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.setState({
                    isModalOpen: false,
                    pointAdd: {},
@ -621,8 +714,8 @@ class BaseMap extends React.Component{
        })
    };
    handleCancel = () => {
-        this.state.pointDrawer.removeActiveFeature();
-        this.state.pointDrawer.disable();
+        // this.state.pointDrawer.removeActiveFeature();
+        // this.state.pointDrawer.disable();
        this.setState({
            isModalOpen: false,
            pointAdd: {},
@ -684,7 +777,12 @@ class BaseMap extends React.Component{
                        <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.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>
@ -698,7 +796,10 @@ class BaseMap extends React.Component{
                                    <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)=>{
+                                <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
                                    })
@ -714,12 +815,21 @@ class BaseMap extends React.Component{
                    </Row>
                </Card>
                {/* 图层数据显示 */}
-                <LayerData ref="getLayerDataFun" adcode={{cityAdcode: this.state.cityAdcode, districtAdcode: this.state.districtAdcode}}
-                 getLayerPoints = {this.getLayerPoints} getLayerShapes = {this.getLayerShapes}/>
+                <LayerData 
+                    ref="getLayerDataFun" 
+                    adcode={{cityAdcode: this.state.cityAdcode, districtAdcode: this.state.districtAdcode}}
+                    getLayerPoints = {this.getLayerPoints} 
+                    getLayerShapes = {this.getLayerShapes}
+                />
                <div className={styles.btnRightWrap}>
                    <Button type="primary" className={styles.btnRight} onClick={this.enableDrawPoint}>点位创建</Button>
                    {/* <Button type='primary' danger className={styles.btnRight} onClick={() => this.state.pointDrawer?.disable()}>停止创建</Button> */}
-                    <Modal title="点位创建" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} className='add-point-modal'>
+                    <Modal title="点位创建" 
+                    open={this.state.isModalOpen} 
+                    onOk={this.handleOk} 
+                    onCancel={this.handleCancel} 
+                    className='add-point-modal'
+                    >
                        <Form name='base' id='add-point-form' onFinish={this.handleOk} onFinishFailed={this.onFinishFailed}>
                            <Form.Item label="选择自定义图层"
                            rules={[
@ -728,7 +838,10 @@ class BaseMap extends React.Component{
                                    message: '请输入图层名称!',
                                }
                            ]}>
-                                <Select name='name' value={this.state.pointAdd.layerId} options={this.state.selectLayerList} onChange={this.onLayerNameChange} allowClear>
+                                <Select name='name' value={this.state.pointAdd.layerId} 
+                                options={this.state.selectLayerList} 
+                                onChange={this.onLayerNameChange} 
+                                allowClear>
                                </Select>
                            </Form.Item>
                            <Form.Item label="点位名称"
@ -739,7 +852,9 @@ class BaseMap extends React.Component{
                                    }
                                ]}
                            >
-                                <Input name='note' value={this.state.pointAdd.name} onChange={this.onPointAddNameChange}/>
+                                <Input name='note' 
+                                value={this.state.pointAdd.name} 
+                                onChange={this.onPointAddNameChange}/>
                            </Form.Item>
                            <Form.Item label="点位地址"
                                rules={[
--- a/yarn.lock
+++ b/yarn.lock