sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

token

Browse Source
This commit is contained in:
SmileXin 2025-02-07 23:18:05 +08:00
parent 4697f77226
commit 34ef7c42a6
5 changed files with 205 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -51,5 +51,9 @@
"post-merge": "post-npm-install", "post-merge": "post-npm-install",
"post-rebase": "post-npm-install" "post-rebase": "post-npm-install"
} }
} },
"name": "bmw",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
} }

2
src/app.ts
View File

@ -25,7 +25,7 @@ import { RequestConfig } from '@umijs/max';
export const request: RequestConfig = { export const request: RequestConfig = {
requestInterceptors: [ requestInterceptors: [
(url, options) => { (url, options) => {
const token = localStorage.getItem('authToken'); // 从某处获取你的认证token，例如localStorage const token = localStorage.getItem('pc-key'); // 从某处获取你的认证token，例如localStorage
if (token) { if (token) {
const headers = { const headers = {
Authorization: `${token}`, Authorization: `${token}`,

16
src/index.less
View File

@ -168,11 +168,10 @@ body {
} }
.hiddenBtn{ .hiddenBtn{
overflow: hidden; overflow: hidden;
position: fixed; position: absolute;
height: 40px; height: 40px;
width: 40px; width: 40px;
top: 220px; margin: 20% 21.4%;
margin: 0 0 0 22%;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
border-radius: 10px; border-radius: 10px;
@ -199,7 +198,7 @@ body {
// margin-left: 0; // margin-left: 0;
} }
to { to {
margin: 0 0 0 4%; margin: 20% 5%;
} }
} }
@ -207,12 +206,13 @@ body {
// overflow: hidden; // overflow: hidden;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
position: fixed; position: absolute;
top: 190px; // top: 190px;
width: 270px; width: 16.4%;
// width: 270px;
max-height: 450px; max-height: 450px;
// min-height: 100px; // min-height: 100px;
margin: 2% 4.2%; margin: 20% 5%;
background: rgba(239,240,248,1); background: rgba(239,240,248,1);
// background: rgba(239,240,248,0); // background: rgba(239,240,248,0);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);

2
src/pages/BaseMap/LayerData/index.js
View File

@ -68,7 +68,7 @@ class LayerData extends React.Component {
} }
return getBasicLayerMenuApi({ adcode: adcode }).then((e) => { return getBasicLayerMenuApi({ adcode: adcode }).then((e) => {
let basicLayeData = e.data; let basicLayeData = e.data;
console.log('basicLayeData', basicLayeData); console.log('basicLayeData', e);
// MenuData // MenuData
let menuDataList = []; let menuDataList = [];
for (var m in basicLayeData) { for (var m in basicLayeData) {

355
src/pages/BaseMap/index.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form, Alert, Space } from 'antd'; import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form, Alert, Space } from 'antd';
import {DoubleLeftOutlined, ExclamationCircleFilled } from '@ant-design/icons'; import { DoubleLeftOutlined, ExclamationCircleFilled } from '@ant-design/icons';
import LayerData from './LayerData'; import LayerData from './LayerData';
// import LayerList from './LayerList'; // import LayerList from './LayerList';
import { AimOutlined, DoubleRightOutlined } from '@ant-design/icons'; import { AimOutlined, DoubleRightOutlined } from '@ant-design/icons';
@ -8,7 +8,7 @@ import Header from '../../components/Header/index.js';
import { createPoint, updatePoint, getDetailByIdApi, queryUserLayers, getLayerPointsApi, getAllProvinceApi, getCityByProvinceApi, getDistrictByCityApi, getLayerShapesApi, getPointByAddressApi, deletePoint } from '../../api'; import { createPoint, updatePoint, getDetailByIdApi, queryUserLayers, getLayerPointsApi, getAllProvinceApi, getCityByProvinceApi, getDistrictByCityApi, getLayerShapesApi, getPointByAddressApi, deletePoint } from '../../api';
import Pop from './pop' import Pop from './pop'
import { GaodeMap ,Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup, MouseLocation, CanvasLayer } from '@antv/l7'; import { GaodeMap, Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup, MouseLocation, CanvasLayer } from '@antv/l7';
const { confirm } = Modal; const { confirm } = Modal;
// import { DrawPoint, DrawEvent } from '@antv/l7-draw'; // import { DrawPoint, DrawEvent } from '@antv/l7-draw';
import icon04 from '../../assets/icon/icon04.svg' import icon04 from '../../assets/icon/icon04.svg'
@ -34,9 +34,9 @@ const successSearchAddress = () => {
message.success('已成功进行地图定位'); message.success('已成功进行地图定位');
}; };
class BaseMap extends React.Component{ class BaseMap extends React.Component {
constructor(){ constructor() {
super(); super();
this.state = { this.state = {
map: null, map: null,
@ -48,10 +48,10 @@ class BaseMap extends React.Component{
provinceAdcode: '',//选中的省 provinceAdcode: '',//选中的省
provinceLabel: '',//选中的省 provinceLabel: '',//选中的省
cityList: [],//市 cityList: [],//市
cityAdcode:'',//选中的市 cityAdcode: '',//选中的市
cityLabel: '', cityLabel: '',
districtList: [],//区 districtList: [],//区
districtAdcode:'',//选中的区 districtAdcode: '',//选中的区
zoom: 4, zoom: 4,
inputExplainKey: 0, inputExplainKey: 0,
inputExplainValue: "请输入地址详情信息", inputExplainValue: "请输入地址详情信息",
@ -64,10 +64,10 @@ class BaseMap extends React.Component{
editPointId: '', editPointId: '',
selectLayerList: [], selectLayerList: [],
pointAdd: {}, pointAdd: {},
pointEdit:{}, pointEdit: {},
pointDrawer: null, pointDrawer: null,
newPointLocation: '', newPointLocation: '',
mouseLocation:{}, mouseLocation: {},
disabled: false, disabled: false,
popParameter: {}, popParameter: {},
isAlertOpen: false, isAlertOpen: false,
@ -90,7 +90,7 @@ class BaseMap extends React.Component{
componentDidMount = () => { componentDidMount = () => {
this.getAllProvince(); this.getAllProvince();
this.createMap(); this.createMap();
} }
// 创建地图 // 创建地图
createMap = () => { createMap = () => {
const scene = new Scene({ const scene = new Scene({
@ -98,17 +98,40 @@ class BaseMap extends React.Component{
map: new GaodeMap({ map: new GaodeMap({
pitch: 20, pitch: 20,
style: 'light', style: 'light',
center: [ 118.405285, 39.904989 ], center: [118.405285, 39.904989],
zoom: 3, zoom: 3,
}) })
}); });
this.setState({ this.setState({
map: scene, map: scene,
}); });
// 地图搜索提示功能
// scene.on('loaded', () => {
// // AutoComplete 插件
// window.AMap.plugin(['AMap.Autocomplete'], () => {
// // Autocomplete 实例配置
// const autoOptions = {
// city: '全国', //城市，默认全国
// input: 'tipinput' //使用联想输入的input的id
// };
// // 创建Autocomplete对象
// const autoComplete = new AMap.AutoComplete(autoOptions);
// });
// // scene.map.plugin(['AMap.Autocomplete'], () => {
// // // Autocomplete 实例配置
// // const autoOptions = {
// // city: '全国', //城市，默认全国
// // input: 'tipinput' //使用联想输入的input的id
// // };
// // // 创建Autocomplete对象
// // const autoComplete = new AMap.autoComplete(autoOptions);
// // });
// })
} }
//设置地图省份级别位置 //设置地图省份级别位置
gotoProvince = (data) => { gotoProvince = (data) => {
let zoom = data.zoom || 6; let zoom = data.zoom || 6;
let lng = data.len || 116.405285; let lng = data.len || 116.405285;
let lat = data.lat || 39.904989; let lat = data.lat || 39.904989;
@ -141,7 +164,7 @@ class BaseMap extends React.Component{
}); });
if (nodeType === 1) { if (nodeType === 1) {
// 在地图上添加点位 // 在地图上添加点位
console.log("layerPointsData",layerPointsData) console.log("layerPointsData", layerPointsData)
this.setMarkers(layerPointsData, layerId); this.setMarkers(layerPointsData, layerId);
} else if (nodeType === 4) { } else if (nodeType === 4) {
// this.setHeatMap(layerPointsData, layerId); // this.setHeatMap(layerPointsData, layerId);
@ -160,7 +183,7 @@ class BaseMap extends React.Component{
self.hideHeatMap(layerId); self.hideHeatMap(layerId);
} }
} }
// 隐藏热力图 // 隐藏热力图
hideHeatMap = (layerId) => { hideHeatMap = (layerId) => {
let heatMapList = this.state.heatMapList let heatMapList = this.state.heatMapList
for (let i = 0; i < heatMapList.length; i++) { for (let i = 0; i < heatMapList.length; i++) {
@ -174,7 +197,7 @@ class BaseMap extends React.Component{
let self = this; let self = this;
let map = this.state.map; let map = this.state.map;
let LabelsData = data || []; let LabelsData = data || [];
let markerLayer = new MarkerLayer({name: layerId}); let markerLayer = new MarkerLayer({ name: layerId });
let el, popup, marker, icon, popHtml; let el, popup, marker, icon, popHtml;
// 设置地图上的点位（图标） // 设置地图上的点位（图标）
for (let i = 0; i < LabelsData.length; i++) { for (let i = 0; i < LabelsData.length; i++) {
@ -183,7 +206,7 @@ class BaseMap extends React.Component{
el.style.height = '26px'; el.style.height = '26px';
el.id = 'marker' + i; el.id = 'marker' + i;
icon = LabelsData[0].logoImage; icon = LabelsData[0].logoImage;
if (icon && (icon.substr(0, 7) == "http://" || icon.substr(0, 6) == "https:" || icon.substr(0, 7) == "http:\\\\")) { if (icon && (icon.substr(0, 7) == "http://" || icon.substr(0, 6) == "https:" || icon.substr(0, 7) == "http:\\\\")) {
el.style.background = 'url("' + icon + '") no-repeat'; el.style.background = 'url("' + icon + '") no-repeat';
el.style.backgroundSize = 'cover'; el.style.backgroundSize = 'cover';
} else { } else {
@ -191,20 +214,20 @@ class BaseMap extends React.Component{
} }
marker = new Marker({ marker = new Marker({
element: el, element: el,
}).setLnglat({lng: LabelsData[i].lng, lat: LabelsData[i].lat}) }).setLnglat({ lng: LabelsData[i].lng, lat: LabelsData[i].lat })
// 设置弹框（点击事件） // 设置弹框（点击事件）
marker.on('click', (e) => { marker.on('click', (e) => {
// 获取弹框内的html // 获取弹框内的html
this.setState({popParameter: LabelsData[i]},() => { this.setState({ popParameter: LabelsData[i] }, () => {
popHtml = document.getElementById('custom-pop'); popHtml = document.getElementById('custom-pop');
popup = new Popup({ popup = new Popup({
offsets: [0, 30], offsets: [0, 30],
closeOnClick: true, closeOnClick: true,
autoClose: true, autoClose: true,
}) })
.setLnglat(e.lngLat) .setLnglat(e.lngLat)
.setHTML(popHtml.innerHTML) .setHTML(popHtml.innerHTML)
document.getElementById('marker' + i).style.width = '32px'; document.getElementById('marker' + i).style.width = '32px';
document.getElementById('marker' + i).style.height = '32px'; document.getElementById('marker' + i).style.height = '32px';
// 给弹框添加事件 // 给弹框添加事件
@ -212,7 +235,7 @@ class BaseMap extends React.Component{
document.getElementById('marker' + i).style.width = '26px'; document.getElementById('marker' + i).style.width = '26px';
document.getElementById('marker' + i).style.height = '26px'; document.getElementById('marker' + i).style.height = '26px';
}); });
this.setState({pop: popup}) this.setState({ pop: popup })
popup.on('open', () => { popup.on('open', () => {
// 编辑按钮 // 编辑按钮
document.getElementsByClassName('edit-button')[0].onclick = () => { document.getElementsByClassName('edit-button')[0].onclick = () => {
@ -239,8 +262,8 @@ class BaseMap extends React.Component{
return false; return false;
}; };
this.setState({ this.setState({
selectLayerList:selectLayerList, selectLayerList: selectLayerList,
pointEdit: pointEdit:
{ {
pointId: LabelsData[i].pointId, pointId: LabelsData[i].pointId,
layerId: LabelsData[i].belongLayerId, layerId: LabelsData[i].belongLayerId,
@ -248,7 +271,7 @@ class BaseMap extends React.Component{
// note: LabelsData[i].note, // note: LabelsData[i].note,
address: LabelsData[i].address, address: LabelsData[i].address,
}, },
isEditModalOpen: true isEditModalOpen: true
}) })
}; };
// 删除按钮 // 删除按钮
@ -257,10 +280,10 @@ class BaseMap extends React.Component{
icon: <ExclamationCircleFilled />, icon: <ExclamationCircleFilled />,
title: '警告', title: '警告',
content: '是否确定删除点位，删除后信息将无法恢复', content: '是否确定删除点位，删除后信息将无法恢复',
onCancel(){ onCancel() {
}, },
// 确定删除 // 确定删除
onOk(){ onOk() {
self.deleteChannel(); self.deleteChannel();
}, },
}); });
@ -285,9 +308,9 @@ class BaseMap extends React.Component{
this.startLoading(); this.startLoading();
this.state.pop.hide(); this.state.pop.hide();
self = this; self = this;
let layerId = this.state.popParameter.belongLayerId; let layerId = this.state.popParameter.belongLayerId;
deletePoint({id: this.state.popParameter.pointId}).then((e) => { deletePoint({ id: this.state.popParameter.pointId }).then((e) => {
if(e.success){ if (e.success) {
message.success('点位删除成功!'); message.success('点位删除成功!');
setTimeout(() => { setTimeout(() => {
// 重新获取点位 // 重新获取点位
@ -298,17 +321,17 @@ class BaseMap extends React.Component{
self.stopLoading(); self.stopLoading();
}, 1000); }, 1000);
this.getLayerPoints(layerId, false, 1); this.getLayerPoints(layerId, false, 1);
}else{ } else {
message.error('点位删除失败！'); message.error('点位删除失败！');
} }
}); });
this.setState({ this.setState({
pop: null, pop: null,
popParameter: {}, popParameter: {},
}); });
} }
@ -393,18 +416,18 @@ class BaseMap extends React.Component{
let data = d || []; let data = d || [];
let overlayList = []; let overlayList = [];
const layer = new PolygonLayer({}) const layer = new PolygonLayer({})
.source(data) .source(data)
.shape('extrude') .shape('extrude')
.size('h20', [ 100, 120, 160, 200, 260, 500 ]) .size('h20', [100, 120, 160, 200, 260, 500])
.color('h20', [ .color('h20', [
'#816CAD', '#816CAD',
'#A67FB5', '#A67FB5',
'#C997C7', '#C997C7',
'#DEB8D4', '#DEB8D4',
'#F5D4E6', '#F5D4E6',
'#FAE4F1', '#FAE4F1',
'#FFF3FC' '#FFF3FC'
]); ]);
map.addLayer(layer); map.addLayer(layer);
// paths.forEach(function(path) { // paths.forEach(function(path) {
// if(path.type === "ENVELOPE"){ // if(path.type === "ENVELOPE"){
@ -438,7 +461,7 @@ class BaseMap extends React.Component{
// overlayList.push(polygon); // overlayList.push(polygon);
// } // }
// }); // });
// let overlay = new AMap.OverlayGroup(overlayList); // let overlay = new AMap.OverlayGroup(overlayList);
// map.add(overlay) // map.add(overlay)
@ -460,7 +483,7 @@ class BaseMap extends React.Component{
'lat': provinceData[i].centerCoordinate && provinceData[i].centerCoordinate.split(',')[1], 'lat': provinceData[i].centerCoordinate && provinceData[i].centerCoordinate.split(',')[1],
}) })
} }
this.setState ({ this.setState({
provinceList: provinceList provinceList: provinceList
}) })
}); });
@ -478,31 +501,31 @@ class BaseMap extends React.Component{
this.refs.getLayerDataFun.state.selectLayerIdList = []; this.refs.getLayerDataFun.state.selectLayerIdList = [];
// 清除所选市 // 清除所选市
this.onCityChange(); this.onCityChange();
data && this.gotoProvince(data) data && this.gotoProvince(data)
// 根据所选省获取市 // 根据所选省获取市
this.getCityByProvince(`${provinceAdcode}`); this.getCityByProvince(`${provinceAdcode}`);
this.hideHeatMap(); this.hideHeatMap();
this.setState ({ this.setState({
provinceAdcode: provinceAdcode ? `${provinceAdcode}` : '', // 省编码 provinceAdcode: provinceAdcode ? `${provinceAdcode}` : '', // 省编码
provinceLabel: data ? data.label : '', // 省名称 provinceLabel: data ? data.label : '', // 省名称
zoom: 8, // 缩放级别 zoom: 8, // 缩放级别
cityAdcode:'',//选中的市 cityAdcode: '',//选中的市
cityLabel: '', cityLabel: '',
districtList: [],//区 districtList: [],//区
districtAdcode: '', districtAdcode: '',
}) })
} }
// 获取市 // 获取市
getCityByProvince = (provinceAdcode) => { getCityByProvince = (provinceAdcode) => {
if (provinceAdcode === undefined || provinceAdcode === null || provinceAdcode === "" || provinceAdcode === 'undefined') { if (provinceAdcode === undefined || provinceAdcode === null || provinceAdcode === "" || provinceAdcode === 'undefined') {
this.setState ({ this.setState({
cityList: [] cityList: []
}) })
return false return false
} }
return getCityByProvinceApi({provinceAdcode: provinceAdcode}).then((e) => { return getCityByProvinceApi({ provinceAdcode: provinceAdcode }).then((e) => {
let cityData = e.data; let cityData = e.data;
let cityList = []; let cityList = [];
for (var i in cityData) { for (var i in cityData) {
@ -515,16 +538,17 @@ class BaseMap extends React.Component{
'lat': cityData[i].centerCoordinate && cityData[i].centerCoordinate.split(',')[1], 'lat': cityData[i].centerCoordinate && cityData[i].centerCoordinate.split(',')[1],
}) })
} }
this.setState ({ this.setState({
cityList: cityList cityList: cityList
}) })
}); });
} }
//选择市 cityAdcode:市编码 data:市数据 //选择市 cityAdcode:市编码 data:市数据
onCityChange = (cityAdcode,data) => { onCityChange = (cityAdcode, data) => {
var self = this; var self = this;
if (cityAdcode === undefined || cityAdcode === null || cityAdcode === ""|| cityAdcode === 'undefined') { console.log("cityAdcode", cityAdcode)
this.setState ({ if (cityAdcode === undefined || cityAdcode === null || cityAdcode === "" || cityAdcode === 'undefined') {
this.setState({
cityAdcode: '', cityAdcode: '',
cityLabel: '', cityLabel: '',
districtAdcode: '' districtAdcode: ''
@ -545,7 +569,7 @@ class BaseMap extends React.Component{
}); });
data && this.gotoCity(data); data && this.gotoCity(data);
this.hideHeatMap(); this.hideHeatMap();
this.setState ({ this.setState({
cityAdcode: cityAdcode ? `${cityAdcode}` : '', cityAdcode: cityAdcode ? `${cityAdcode}` : '',
cityLabel: data ? data.label : '', cityLabel: data ? data.label : '',
center: data && [parseFloat(data.lat), parseFloat(data.len)], center: data && [parseFloat(data.lat), parseFloat(data.len)],
@ -553,15 +577,15 @@ class BaseMap extends React.Component{
districtAdcode: '' districtAdcode: ''
}) })
} }
// 获取区 // 获取区
getDistrictByCity = (cityAdcode) => { getDistrictByCity = (cityAdcode) => {
if (cityAdcode === undefined || cityAdcode === null || cityAdcode === ""|| cityAdcode === 'undefined') { if (cityAdcode === undefined || cityAdcode === null || cityAdcode === "" || cityAdcode === 'undefined') {
this.setState ({ this.setState({
districtList: [] districtList: []
}) })
return false return false
} }
return getDistrictByCityApi({cityAdcode: cityAdcode}).then((e) => { return getDistrictByCityApi({ cityAdcode: cityAdcode }).then((e) => {
let districtData = e.data; let districtData = e.data;
let districtList = []; let districtList = [];
for (var i in districtData) { for (var i in districtData) {
@ -573,15 +597,15 @@ class BaseMap extends React.Component{
'lat': districtData[i].centerCoordinate && districtData[i].centerCoordinate.split(',')[1], 'lat': districtData[i].centerCoordinate && districtData[i].centerCoordinate.split(',')[1],
}) })
} }
this.setState ({ this.setState({
districtList: districtList districtList: districtList
}) })
}); });
} }
//选择区 //选择区
onDistrictChange = (provinceAdcode,data) => { onDistrictChange = (provinceAdcode, data) => {
var self = this; var self = this;
if (provinceAdcode === undefined || provinceAdcode === null || provinceAdcode === ""|| provinceAdcode === 'undefined') { if (provinceAdcode === undefined || provinceAdcode === null || provinceAdcode === "" || provinceAdcode === 'undefined') {
this.setState({ this.setState({
districtAdcode: '', districtAdcode: '',
}) })
@ -589,6 +613,7 @@ class BaseMap extends React.Component{
} }
self.startLoading(); self.startLoading();
let getLayers = self.state.markerLayerList; let getLayers = self.state.markerLayerList;
console.log("getLayers✈······", getLayers)
for (let i = 0; i < getLayers.length; i++) { for (let i = 0; i < getLayers.length; i++) {
self.state.map.removeMarkerLayer(getLayers[i]); self.state.map.removeMarkerLayer(getLayers[i]);
} }
@ -606,13 +631,13 @@ class BaseMap extends React.Component{
}) })
} }
onSearchSwitch = (data) => { onSearchSwitch = (data) => {
if(data === "1"){ if (data === "1") {
this.setState({ this.setState({
inputExplainKey: 1, inputExplainKey: 1,
inputExplainValue: "请输入经纬度详情，格式例如：116.405285,39.904989", inputExplainValue: "请输入经纬度详情，格式例如：116.405285,39.904989",
inputContent: "" inputContent: ""
}) })
}else{ } else {
this.setState({ this.setState({
inputExplainKey: 0, inputExplainKey: 0,
inputExplainValue: "请输入地址详情信息", inputExplainValue: "请输入地址详情信息",
@ -623,13 +648,13 @@ class BaseMap extends React.Component{
// 地图搜索 // 地图搜索
onSearchMap = () => { onSearchMap = () => {
// 0地址 1经纬度 // 0地址 1经纬度
if(this.state.inputExplainKey === 1){ if (this.state.inputExplainKey === 1) {
// 判断经纬度是否为空 // 判断经纬度是否为空
let location = this.state.inputContent let location = this.state.inputContent
if(location === "" || location === null){ if (location === "" || location === null) {
nullSearchLocation(); nullSearchLocation();
return false; return false;
}else{ } else {
let data = { let data = {
'zoom': 8, 'zoom': 8,
'len': location.split(',')[0], 'len': location.split(',')[0],
@ -637,23 +662,23 @@ class BaseMap extends React.Component{
} }
this.gotoCity(data) this.gotoCity(data)
let icon = "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"; 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]}); let searchPointMarker = new Marker().setLnglat({ lng: location.split(',')[0], lat: location.split(',')[1] });
this.state.map.addMarker(searchPointMarker); this.state.map.addMarker(searchPointMarker);
successSearchAddress(); successSearchAddress();
} }
}else{ } else {
// 判断地址是否为空 // 判断地址是否为空
let address = this.state.inputContent let address = this.state.inputContent
if(address === "" ||address === null){ if (address === "" || address === null) {
nullSearchAddress(); nullSearchAddress();
return false; return false;
}else{ } else {
address = this.state.provinceLabel + this.state.cityLabel + address; address = this.state.provinceLabel + this.state.cityLabel + address;
return getPointByAddressApi({address: address}).then((e) => { return getPointByAddressApi({ address: address }).then((e) => {
let coordinate = e.data; let coordinate = e.data;
if(coordinate === ""||coordinate === null){ if (coordinate === "" || coordinate === null) {
errorSearchAddress(); errorSearchAddress();
}else{ } else {
let data = { let data = {
'zoom': 8, 'zoom': 8,
'len': coordinate.location.split(',')[0], 'len': coordinate.location.split(',')[0],
@ -661,7 +686,7 @@ class BaseMap extends React.Component{
} }
this.gotoCity(data) this.gotoCity(data)
let icon = "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"; let icon = "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";
let searchPointMarker = new Marker().setLnglat({lng: coordinate.location.split(',')[0], lat: coordinate.location.split(',')[1]}); let searchPointMarker = new Marker().setLnglat({ lng: coordinate.location.split(',')[0], lat: coordinate.location.split(',')[1] });
this.state.map.addMarker(searchPointMarker); this.state.map.addMarker(searchPointMarker);
successSearchAddress(); successSearchAddress();
} }
@ -710,12 +735,12 @@ class BaseMap extends React.Component{
// 开启地图的事件监听，双击添加，右键取消 // 开启地图的事件监听，双击添加，右键取消
// 双击事件 // 双击事件
this.state.map.on('dblclick', this.dblclickEvent); this.state.map.on('dblclick', this.dblclickEvent);
// 右键事件 // 右键事件
this.state.map.on('contextmenu', this.contextmenuEvent); this.state.map.on('contextmenu', this.contextmenuEvent);
// 键盘事件 // 键盘事件
const that = this; const that = this;
document.onkeydown = function(event){ document.onkeydown = function (event) {
if (event.key === 'Escape') { if (event.key === 'Escape') {
that.disableDrawPoint(); that.disableDrawPoint();
document.onkeydown = null; document.onkeydown = null;
@ -723,11 +748,11 @@ class BaseMap extends React.Component{
}; };
} }
// 地图鼠标双击事件 // 地图鼠标双击事件
dblclickEvent = (e) => { dblclickEvent = (e) => {
// 开启双击地图放大 不能放在这，会导致弹框的同时放大地图，将开启放大放在弹框关闭事件中 // 开启双击地图放大 不能放在这，会导致弹框的同时放大地图，将开启放大放在弹框关闭事件中
// 添加点位 // 添加点位
this.showModal(this.state.mouseLocation.location.toString()); this.showModal(this.state.mouseLocation.location.toString());
// 鼠标取消十字 // 鼠标取消十字
@ -742,18 +767,18 @@ class BaseMap extends React.Component{
this.setState({ this.setState({
disabled: !this.state.disabled, disabled: !this.state.disabled,
}); });
} }
// 地图右键事件 // 地图右键事件
contextmenuEvent = (e) => { contextmenuEvent = (e) => {
this.disableDrawPoint(); this.disableDrawPoint();
} }
// 取消点位创建 // 取消点位创建
disableDrawPoint = () => { disableDrawPoint = () => {
// 开启双击地图放大 // 开启双击地图放大
this.state.map.setMapStatus({ this.state.map.setMapStatus({
doubleClickZoom: true doubleClickZoom: true
}) })
// 鼠标取消十字 // 鼠标取消十字
@ -771,7 +796,7 @@ class BaseMap extends React.Component{
disabled: !this.state.disabled, disabled: !this.state.disabled,
}); });
} }
//弹出框事件 //弹出框事件
showModal = (newPointLocation) => { showModal = (newPointLocation) => {
// queryUserLayers().then((e) => { // queryUserLayers().then((e) => {
@ -790,18 +815,18 @@ class BaseMap extends React.Component{
// }); // });
// }); // });
// 关闭双击事件监听事件 // 关闭双击事件监听事件
this.state.map.off('dblclick', this.dblclickEvent); this.state.map.off('dblclick', this.dblclickEvent);
this.setState({ this.setState({
isModalOpen: true, isModalOpen: true,
newPointLocation: newPointLocation, newPointLocation: newPointLocation,
}); });
}; };
// 修改按钮 // 修改按钮
editChannel = () => { editChannel = () => {
this.startLoading(); this.startLoading();
self = this; self = this;
self.state.pop.hide(); self.state.pop.hide();
let param = { let param = {
"id": this.state.pointEdit.pointId, "id": this.state.pointEdit.pointId,
"name": this.state.pointEdit.name, "name": this.state.pointEdit.name,
"note": this.state.pointEdit.note, "note": this.state.pointEdit.note,
@ -817,20 +842,20 @@ class BaseMap extends React.Component{
}, 1000); }, 1000);
// self.getLayerPoints(self.state.popParameter.layerId, false, 1); // self.getLayerPoints(self.state.popParameter.layerId, false, 1);
self.getLayerPoints(self.state.pointEdit.layerId, false, 1); self.getLayerPoints(self.state.pointEdit.layerId, false, 1);
}else{ } else {
message.error('点位更新失败！'); message.error('点位更新失败！');
console.log("点位更新失败！", e) console.log("点位更新失败！", e)
} }
}) })
self.setState({ self.setState({
isEditModalOpen: false, isEditModalOpen: false,
pop : null, pop: null,
}); });
} }
handleOk = (values) => { handleOk = (values) => {
this.startLoading(); this.startLoading();
// 开启双击地图放大 // 开启双击地图放大
this.state.map.setMapStatus({ this.state.map.setMapStatus({
doubleClickZoom: true doubleClickZoom: true
}) })
createPoint({ //创建图层 createPoint({ //创建图层
@ -842,7 +867,7 @@ class BaseMap extends React.Component{
"districtAdcode": this.state.districtAdcode, "districtAdcode": this.state.districtAdcode,
"location": this.state.newPointLocation, "location": this.state.newPointLocation,
"provinceAdcode": this.state.provinceAdcode, "provinceAdcode": this.state.provinceAdcode,
}).then((e) => { }).then((e) => {
let layerId = this.state.pointAdd.layerId; let layerId = this.state.pointAdd.layerId;
if (e.success) { if (e.success) {
message.success('点位创建成功!'); message.success('点位创建成功!');
@ -864,8 +889,8 @@ class BaseMap extends React.Component{
}) })
}; };
handleCancel = () => { handleCancel = () => {
// 开启双击地图放大 // 开启双击地图放大
this.state.map.setMapStatus({ this.state.map.setMapStatus({
doubleClickZoom: true doubleClickZoom: true
}) })
// this.state.pointDrawer.removeActiveFeature(); // this.state.pointDrawer.removeActiveFeature();
@ -981,7 +1006,7 @@ class BaseMap extends React.Component{
} }
render(){ render() {
return ( return (
<div id='base_map' className={styles.basseMap} > <div id='base_map' className={styles.basseMap} >
<Spin id='spin-show' size='large' spinning={this.state.loading}></Spin> <Spin id='spin-show' size='large' spinning={this.state.loading}></Spin>
@ -990,38 +1015,38 @@ class BaseMap extends React.Component{
<Card className={styles.selectWrap} bordered={false}> <Card className={styles.selectWrap} bordered={false}>
<Row> <Row>
<Col span={12}> <Col span={12}>
<Input.Group compact style={{display:"inline"}}> <Input.Group compact style={{ display: "inline" }}>
<label className={styles.labelForm}>行政区域：</label> <label className={styles.labelForm}>行政区域：</label>
<Select <Select
style={{width: 120, marginLeft: 18}} style={{ width: 120, marginLeft: 18 }}
onChange={this.onProvinceChange} onChange={this.onProvinceChange}
options={this.state.provinceList} options={this.state.provinceList}
value={this.state.provinceAdcode} value={this.state.provinceAdcode}
allowClear/> 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.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/> <Select style={{ width: 120, marginLeft: 18 }} onChange={this.onDistrictChange} options={this.state.districtList} value={this.state.districtAdcode} allowClear />
</Input.Group> </Input.Group>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Input.Group compact style={{display:"inline",float:"right"}}> <Input.Group compact style={{ display: "inline", float: "right" }}>
<label className={styles.labelForm}>查询：</label> <label className={styles.labelForm}>查询：</label>
<Select defaultValue="0" style={{width: '80px'}} onChange={(e)=>{ <Select defaultValue="0" style={{ width: '80px' }} onChange={(e) => {
this.onSearchSwitch(e); this.onSearchSwitch(e);
}}> }}>
<Option value="0">地址</Option> <Option value="0">地址</Option>
<Option value="1">经纬度</Option> <Option value="1">经纬度</Option>
</Select> </Select>
<Input id="tipinput" style={{width: '60%', height: 32, marginLeft: 18}} <Input id="tipinput" style={{ width: '60%', height: 32, marginLeft: 18 }}
placeholder={this.state.inputExplainValue} placeholder={this.state.inputExplainValue}
value={this.state.inputContent} value={this.state.inputContent}
onChange={(e)=>{ onChange={(e) => {
this.setState({ this.setState({
inputContent: e.target.value inputContent: e.target.value
}) })
}}/> }} />
<Button <Button
type="primary" type="primary"
style={{color: '#2F66F2', backgroundColor: 'white', }} style={{ color: '#2F66F2', backgroundColor: 'white', }}
icon={<AimOutlined />} icon={<AimOutlined />}
onClick={this.onSearchMap} onClick={this.onSearchMap}
/> />
@ -1030,37 +1055,37 @@ class BaseMap extends React.Component{
</Row> </Row>
</Card> </Card>
{/* 图层数据显示 */} {/* 图层数据显示 */}
<LayerData <LayerData
ref="getLayerDataFun" ref="getLayerDataFun"
adcode={{cityAdcode: this.state.cityAdcode, districtAdcode: this.state.districtAdcode}} adcode={{ cityAdcode: this.state.cityAdcode, districtAdcode: this.state.districtAdcode }}
getLayerPoints = {this.getLayerPoints} getLayerPoints={this.getLayerPoints}
getLayerShapes = {this.getLayerShapes} getLayerShapes={this.getLayerShapes}
startLoading = {this.startLoading} startLoading={this.startLoading}
stopLoading = {this.stopLoading} stopLoading={this.stopLoading}
/> />
{/* <Button onClick={this.hiddenLayer} className='hiddenBtn'><DoubleLeftOutlined/></Button> */} {/* <Button onClick={this.hiddenLayer} className='hiddenBtn'><DoubleLeftOutlined/></Button> */}
<div className={styles.btnRightWrap}> <div className={styles.btnRightWrap}>
<Button type="primary" className={styles.btnRight} onClick={this.enableDrawPoint} disabled={this.state.disabled}>点位创建</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> */} {/* <Button type='primary' danger className={styles.btnRight} onClick={() => this.state.pointDrawer?.disable()}>停止创建</Button> */}
<Modal title="点位创建" <Modal title="点位创建"
open={this.state.isModalOpen} open={this.state.isModalOpen}
onOk={this.handleOk} onOk={this.handleOk}
onCancel={this.handleCancel} onCancel={this.handleCancel}
className='add-point-modal' className='add-point-modal'
> >
<Form name='base' id='add-point-form' onFinish={this.handleOk} onFinishFailed={this.onFinishFailed}> <Form name='base' id='add-point-form' onFinish={this.handleOk} onFinishFailed={this.onFinishFailed}>
<Form.Item label="选择自定义图层" <Form.Item label="选择自定义图层"
rules={[ rules={[
{ {
required: true, required: true,
message: '请输入图层名称!', message: '请输入图层名称!',
} }
]}> ]}>
<Select name='name' value={this.state.pointAdd.layerId} <Select name='name' value={this.state.pointAdd.layerId}
options={this.state.selectLayerList} options={this.state.selectLayerList}
onChange={this.onLayerNameChange} onChange={this.onLayerNameChange}
allowClear> allowClear>
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="点位名称" <Form.Item label="点位名称"
@ -1071,9 +1096,9 @@ class BaseMap extends React.Component{
} }
]} ]}
> >
<Input name='note' <Input name='note'
value={this.state.pointAdd.name} value={this.state.pointAdd.name}
onChange={this.onPointAddNameChange}/> onChange={this.onPointAddNameChange} />
</Form.Item> </Form.Item>
<Form.Item label="点位地址" <Form.Item label="点位地址"
rules={[ rules={[
@ -1083,18 +1108,18 @@ class BaseMap extends React.Component{
} }
]} ]}
> >
<Input name='note' value={this.state.pointAdd.address} onChange={this.onPointAddAddressChange}/> <Input name='note' value={this.state.pointAdd.address} onChange={this.onPointAddAddressChange} />
</Form.Item> </Form.Item>
<Form.Item label="图层备注"> <Form.Item label="图层备注">
<Input name='note' value={this.state.pointAdd.note} onChange={this.onLayerNoteChange}/> <Input name='note' value={this.state.pointAdd.note} onChange={this.onLayerNoteChange} />
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>
<Modal title="点位修改" <Modal title="点位修改"
open={this.state.isEditModalOpen} open={this.state.isEditModalOpen}
onOk={this.editChannel} onOk={this.editChannel}
onCancel={this.handleEditCancel} onCancel={this.handleEditCancel}
className='add-point-modal' className='add-point-modal'
> >
<Form name='base' id='add-point-form' onFinish={this.editChannel} onFinishFailed={this.onFinishFailed}> <Form name='base' id='add-point-form' onFinish={this.editChannel} onFinishFailed={this.onFinishFailed}>
{/* <Form.Item label="选择自定义图层" {/* <Form.Item label="选择自定义图层"
@ -1126,9 +1151,9 @@ class BaseMap extends React.Component{
} }
]} ]}
> >
<Input name='note' <Input name='note'
value={this.state.pointEdit.name} value={this.state.pointEdit.name}
onChange={this.onEditPointAddNameChange}/> onChange={this.onEditPointAddNameChange} />
</Form.Item> </Form.Item>
<Form.Item label="点位地址" <Form.Item label="点位地址"
rules={[ rules={[
@ -1138,10 +1163,10 @@ class BaseMap extends React.Component{
} }
]} ]}
> >
<Input name='note' value={this.state.pointEdit.address} onChange={this.onEditPointAddAddressChange}/> <Input name='note' value={this.state.pointEdit.address} onChange={this.onEditPointAddAddressChange} />
</Form.Item> </Form.Item>
<Form.Item label="图层备注"> <Form.Item label="图层备注">
<Input name='note' value={this.state.pointEdit.note} onChange={this.onEditLayerNoteChange}/> <Input name='note' value={this.state.pointEdit.note} onChange={this.onEditLayerNoteChange} />
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>
@ -1149,7 +1174,7 @@ class BaseMap extends React.Component{
</div> </div>
{/* 地图 */} {/* 地图 */}
<div className={styles.mapWrap} id='redio-btn-group'> <div className={styles.mapWrap} id='redio-btn-group'>
<div style={{width: '100%', height: '100vh'}} id="container" /> <div style={{ width: '100%', height: '100vh' }} id="container" />
</div> </div>
<div className='hideItem'> <div className='hideItem'>
<Pop popParameter={this.state.popParameter} className='hideItem'></Pop> <Pop popParameter={this.state.popParameter} className='hideItem'></Pop>