2.08

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"
 }

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: 16.4%;
-    // width: 270px;
+    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;
   }

src/pages/BaseMap/LayerData/index.js

@@ -74,25 +74,25 @@ class LayerData extends React.Component {
             for (var m in basicLayeData) {
                 let lab = null;
                 // if (basicLayeData[m].esIndex == "personal_point_layer")
-                if (m == 0){
+                if (m == 0) {
                     lab = <>
                         <div>
                             <span className='layer-name'>
                                 {basicLayeData[m].name}
                             </span>
-                            <span className={basicLayeData[m].layerList.length >= 5 ? 'hideItem' : 'add-layer-btn' }>
+                            <span className={basicLayeData[m].layerList.length >= 5 ? 'hideItem' : 'add-layer-btn'}>
                                 <Tooltip title='点击可创建新图层'>
                                     <span onClick={this.addLayerHandle}><PlusOutlined /></span>
                                 </Tooltip>
                             </span>
-                            <span className={basicLayeData[m].layerList.length < 5 ? 'hideItem' : 'add-layer-btn-disable' }>
+                            <span className={basicLayeData[m].layerList.length < 5 ? 'hideItem' : 'add-layer-btn-disable'}>
                                 <Tooltip title='个人图层创建数量已达上限'>
                                     <span onClick={this.disableBtn}><PlusOutlined /></span>
                                 </Tooltip>
                             </span>
                         </div>
                     </>;
-                }else{
+                } else {
                     lab = basicLayeData[m].name;
                 }
 
@@ -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>
             </>
         );
     }

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"

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