2.08

2025-02-08 17:34:25 +08:00 · 2025-02-08 17:34:25 +08:00 · 64896b4fcf
commit 64896b4fcf
parent 34ef7c42a6
5 changed files with 187 additions and 86 deletions
--- a/package.json
+++ b/package.json
@ -55,5 +55,6 @@
  "name": "bmw",
  "version": "1.0.0",
  "main": "index.js",
-  "license": "MIT"
+  "license": "MIT",
+  "repository": "http://123.249.22.213:3000/sx/map.git"
 }
--- a/src/index.less
+++ b/src/index.less
@ -168,10 +168,11 @@ body {
 }
 .hiddenBtn{
  overflow: hidden;
-  position: absolute;
+  float: right;
+  // position: absolute;
  height: 40px;
  width: 40px;
-  margin: 20% 21.4%;
+  // margin: 20% 21.4%;
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
  border-radius: 10px;
@ -180,6 +181,8 @@ body {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
+  pointer-events: auto;
+

  // 动画
  animation-name: moveBtn;
@ -198,21 +201,33 @@ body {
    // margin-left: 0;
  }
  to {
-    margin: 20% 5%;
+    margin: 0% 0%;
  }

 }
+
+.layer{
+      position:absolute;
+      margin: 20% 5%;
+      width: 1;
+      height: 10;
+      z-index: 99;
+      // background-color: #040727;
+      pointer-events: none;
+}
+
 .layer-data-wrap {
    // overflow: hidden;
    overflow-y: auto;
    overflow-x: hidden;
-    position: absolute;
+    float: left;
+    // position: absolute;
    // top: 190px;
-    width: 16.4%;
-    // width: 270px;
+    // width: 16.4%;
+    width: 270px;
    max-height: 450px;
    // min-height: 100px;
-    margin: 20% 5%;
+    margin: 0% 0%;
    background: rgba(239,240,248,1);
    // background: rgba(239,240,248,0);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
@ -220,6 +235,7 @@ body {
    opacity: 1;
    // 禁止换行
    white-space:nowrap;
+    pointer-events: auto;
    
    z-index: 99;
    // 动画
@ -796,6 +812,9 @@ body {
  .cursor-crosshair{
    cursor: crosshair !important;
  }
+  .cursor-grab{
+    cursor: grab !important;
+  }
  .pointer-events-none{
    pointer-events: none;
  }
--- a/src/pages/BaseMap/LayerData/index.js
+++ b/src/pages/BaseMap/LayerData/index.js
@ -160,6 +160,7 @@ class LayerData extends React.Component {
    // 选中图层
    selectLayer = (e) => {
        // 修改选中状态
+        console.log('selectLayer✈····· ',e);
        let menuData = this.state.menuData;
        this.setState({ menuData: [] })    // 将图层列表的数据清空（不清空组件不更新数据）
        for (let i in menuData) {       // 将选中图层的小眼睛改为打开状态（重新写入数据）
@ -411,6 +412,7 @@ class LayerData extends React.Component {
    render() {
        return (
            <>
+                <div className='layer'>
                    <div className='layer-data-wrap'>
                        <div className='menu-list'>
                            <div className={this.state.menuData.length > 0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}>
@ -485,6 +487,7 @@ class LayerData extends React.Component {
                    </div >
                    <Button onClick={this.hiddenLayer} className={this.state.menuData.length > 0 ? 'hiddenBtn showItem' : 'hiddenBtn hideItem'}><DoubleLeftOutlined /></Button>
                    {/* <Button onClick={this.hiddenLayer} className='hiddenBtn'><DoubleLeftOutlined/></Button> */}
+                </div>
            </>
        );
    }
--- a/src/pages/BaseMap/index.js
+++ b/src/pages/BaseMap/index.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form, Alert, Space } from 'antd';
 import { DoubleLeftOutlined, ExclamationCircleFilled } from '@ant-design/icons';
 import LayerData from './LayerData';
@ -14,6 +14,7 @@ const { confirm } = Modal;
 import icon04 from '../../assets/icon/icon04.svg'

 import styles from './index.less';
+import './index.less';
 import pop from './pop';
 import { remove } from 'react-cookies';

@ -34,6 +35,15 @@ const successSearchAddress = () => {
    message.success('已成功进行地图定位');
 };

+// 省编码（全局）
+let ProvinceAdcode = null;
+let ProvinceData = null;
+// 市编码（全局）
+let CityAdcode = null;
+let CityData = null;
+// 区编码（全局）
+let DistrictAdcode = null;
+let DistrictData = null;
 class BaseMap extends React.Component {

    constructor() {
@ -102,8 +112,30 @@ class BaseMap extends React.Component {
                zoom: 3,
            })
        });
+
        this.setState({
            map: scene,
+        }, () => {
+            // 根据省市区码加载地图
+            if (ProvinceAdcode) {
+                this.onProvinceChange(ProvinceAdcode, ProvinceData);
+            }
+            if (CityAdcode) {
+                this.onCityChange(CityAdcode, CityData);
+            }
+            if (DistrictAdcode) {
+                this.onDistrictChange(DistrictAdcode, DistrictData);
+            }
+            let can = document.getElementsByClassName('amap-layer')[0];
+            can.addEventListener('mousedown', (e) => {
+                console.log('mousedown',can);
+                // can.className = 'amap-layer cursor-grab';
+                can.className = can.className.replace("amap-layer","amap-layer cursor-grab");
+                can.addEventListener('mouseup', (e) => {
+                    can.className = can.className.replace("cursor-grab"," ");
+                    // console.log('mouseup',can.className.replace("cursor-grab"," "));
+                });
+            })
        });
        // 地图搜索提示功能
        // scene.on('loaded', () => {
@ -474,7 +506,7 @@ class BaseMap extends React.Component {
        return getAllProvinceApi().then((e) => {
            let provinceData = e.data;
            let provinceList = [];
-            for (var i in provinceData) {
+            for (let i in provinceData) {
                provinceList.push({
                    'value': provinceData[i].provinceAdcode,
                    'label': provinceData[i].provinceName,
@ -490,7 +522,8 @@ class BaseMap extends React.Component {
    }
    // 选择省 provinceAdcode:省编码 data:省数据
    onProvinceChange = (provinceAdcode, data) => {
-        var self = this;
+        console.log("data", data)
+        let self = this;
        // 清除点位图层
        let getLayers = self.state.markerLayerList;
        for (let i = 0; i < getLayers.length; i++) {
@ -516,6 +549,8 @@ class BaseMap extends React.Component {
            districtList: [],//区
            districtAdcode: '',
        })
+        ProvinceAdcode = provinceAdcode;
+        ProvinceData = data;
    }
    // 获取市
    getCityByProvince = (provinceAdcode) => {
@ -545,6 +580,7 @@ class BaseMap extends React.Component {
    }
    //选择市 cityAdcode:市编码 data:市数据
    onCityChange = (cityAdcode, data) => {
+        console.log("document.getElementsByClassName('createTips___PYONM')", document.getElementsByClassName('createTips___PYONM'))
        var self = this;
        console.log("cityAdcode", cityAdcode)
        if (cityAdcode === undefined || cityAdcode === null || cityAdcode === "" || cityAdcode === 'undefined') {
@ -576,6 +612,8 @@ class BaseMap extends React.Component {
            zoom: 10,
            districtAdcode: ''
        })
+        CityAdcode = cityAdcode;
+        CityData = data;
    }
    // 获取区
    getDistrictByCity = (cityAdcode) => {
@ -629,6 +667,8 @@ class BaseMap extends React.Component {
            center: data && [parseFloat(data.lat), parseFloat(data.len)],
            zoom: 13,
        })
+        DistrictAdcode = provinceAdcode;
+        DistrictData = data;
    }
    onSearchSwitch = (data) => {
        if (data === "1") {
@ -695,7 +735,7 @@ class BaseMap extends React.Component {
        }
    }

-    // 点位创建
+    // 开启点位创建
    enableDrawPoint = () => {
        if (this.state.cityAdcode == '' && this.state.districtAdcode == '') {
            message.error('请至少选择行政区域至城市再进行点位创建');
@ -711,6 +751,9 @@ class BaseMap extends React.Component {
            message.error('请至少选中一个个人图层');
            return false;
        }
+        // 提示文字
+        document.getElementsByClassName('createTips')[0].className = 'createTips show';
+

        // 鼠标变十字
        // this.state.map.map.setDefaultCursor('crosshair');  将默认鼠标样式改为十字，地图内有元素会变为手指
@ -749,10 +792,13 @@ class BaseMap extends React.Component {

    }

-    // 地图鼠标双击事件
+    // 点位创建地图鼠标双击事件
    dblclickEvent = (e) => {
        // 开启双击地图放大 不能放在这，会导致弹框的同时放大地图，将开启放大放在弹框关闭事件中

+        // 取消提示文字
+        document.getElementsByClassName('createTips')[0].className = 'createTips hidden';
+
        // 添加点位
        this.showModal(this.state.mouseLocation.location.toString());
        // 鼠标取消十字
@ -770,7 +816,7 @@ class BaseMap extends React.Component {

    }

-    // 地图右键事件
+    // 点位创建地图右键事件
    contextmenuEvent = (e) => {
        this.disableDrawPoint();
    }
@ -781,6 +827,9 @@ class BaseMap extends React.Component {
        this.state.map.setMapStatus({
            doubleClickZoom: true
        })
+
+        // 取消提示文字
+        document.getElementsByClassName('createTips')[0].className = 'createTips hidden';
        // 鼠标取消十字
        // this.state.map.map.setDefaultCursor('auto');
        document.getElementsByClassName('amap-layer')[0].className = 'amap-layer';
@ -1054,6 +1103,14 @@ class BaseMap extends React.Component {
                        </Col>
                    </Row>
                </Card>
+                <div className={'createTips hidden'}>
+                    <span>您已处于点位创建状态，
+                        可操作鼠标进行点位创建，
+                        左键单击为地图拖动效果，
+                        右键单击为取消点位创建，
+                        滚轮可控制地图放大缩小，
+                        <strong>左键双击</strong>为选择点位并<strong>创建</strong></span>
+                </div>
                {/* 图层数据显示 */}
                <LayerData
                    ref="getLayerDataFun"
--- a/src/pages/BaseMap/index.less
+++ b/src/pages/BaseMap/index.less
@ -26,3 +26,24 @@
 .btnRight {
  margin-bottom: 26px;
 }
+.createTips{
+  position: absolute;
+  // top: 50%;
+  margin: 15% 0%;
+  left: 25%;
+  z-index: 99;
+  pointer-events: none;
+  text-align: center;
+  font-style: italic;
+  font-size: 14px;
+  color: #666;
+  width: 50%;
+}
+
+.hidden{
+  display: none;
+}
+
+.show{
+  display: block;
+}