-
0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}>
- 图层数据
-
-
-
-
-
-
-
- {/*
+
+
+
+
0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}>
+ 图层数据
+
+
+
+
+
+
+
+ {/*
*/}
-
-
-
-
- {/*
*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
*/}
+
);
}
diff --git a/src/pages/BaseMap/index.js b/src/pages/BaseMap/index.js
index 8b55a6f0..554a6c06 100644
--- 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 {
+
+ 您已处于点位创建状态，
+ 可操作鼠标进行点位创建，
+ 左键单击为地图拖动效果，
+ 右键单击为取消点位创建，
+ 滚轮可控制地图放大缩小，
+ 左键双击为选择点位并创建
+
{/* 图层数据显示 */}