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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,6 @@
import React 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 { DoubleLeftOutlined, ExclamationCircleFilled } from '@ant-design/icons';
import LayerData from './LayerData';
// import LayerList from './LayerList';
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 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;
// import { DrawPoint, DrawEvent } from '@antv/l7-draw';
import icon04 from '../../assets/icon/icon04.svg'
@ -34,9 +34,9 @@ const successSearchAddress = () => {
message.success('已成功进行地图定位');
};
class BaseMap extends React.Component{
class BaseMap extends React.Component {
constructor(){
constructor() {
super();
this.state = {
map: null,
@ -48,10 +48,10 @@ class BaseMap extends React.Component{
provinceAdcode: '',//选中的省
provinceLabel: '',//选中的省
cityList: [],//市
cityAdcode:'',//选中的市
cityAdcode: '',//选中的市
cityLabel: '',
districtList: [],//区
districtAdcode:'',//选中的区
districtAdcode: '',//选中的区
zoom: 4,
inputExplainKey: 0,
inputExplainValue: "请输入地址详情信息",
@ -64,10 +64,10 @@ class BaseMap extends React.Component{
editPointId: '',
selectLayerList: [],
pointAdd: {},
pointEdit:{},
pointEdit: {},
pointDrawer: null,
newPointLocation: '',
mouseLocation:{},
mouseLocation: {},
disabled: false,
popParameter: {},
isAlertOpen: false,
@ -98,13 +98,36 @@ class BaseMap extends React.Component{
map: new GaodeMap({
pitch: 20,
style: 'light',
center: [ 118.405285, 39.904989 ],
center: [118.405285, 39.904989],
zoom: 3,
})
});
this.setState({
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);
// // });
// })
}
//设置地图省份级别位置
@ -141,7 +164,7 @@ class BaseMap extends React.Component{
});
if (nodeType === 1) {
// 在地图上添加点位
console.log("layerPointsData",layerPointsData)
console.log("layerPointsData", layerPointsData)
this.setMarkers(layerPointsData, layerId);
} else if (nodeType === 4) {
// this.setHeatMap(layerPointsData, layerId);
@ -174,7 +197,7 @@ class BaseMap extends React.Component{
let self = this;
let map = this.state.map;
let LabelsData = data || [];
let markerLayer = new MarkerLayer({name: layerId});
let markerLayer = new MarkerLayer({ name: layerId });
let el, popup, marker, icon, popHtml;
// 设置地图上的点位(图标)
for (let i = 0; i < LabelsData.length; i++) {
@ -191,12 +214,12 @@ class BaseMap extends React.Component{
}
marker = new Marker({
element: el,
}).setLnglat({lng: LabelsData[i].lng, lat: LabelsData[i].lat})
}).setLnglat({ lng: LabelsData[i].lng, lat: LabelsData[i].lat })
// 设置弹框(点击事件)
marker.on('click', (e) => {
// 获取弹框内的html
this.setState({popParameter: LabelsData[i]},() => {
this.setState({ popParameter: LabelsData[i] }, () => {
popHtml = document.getElementById('custom-pop');
popup = new Popup({
offsets: [0, 30],
@ -212,7 +235,7 @@ class BaseMap extends React.Component{
document.getElementById('marker' + i).style.width = '26px';
document.getElementById('marker' + i).style.height = '26px';
});
this.setState({pop: popup})
this.setState({ pop: popup })
popup.on('open', () => {
// 编辑按钮
document.getElementsByClassName('edit-button')[0].onclick = () => {
@ -239,7 +262,7 @@ class BaseMap extends React.Component{
return false;
};
this.setState({
selectLayerList:selectLayerList,
selectLayerList: selectLayerList,
pointEdit:
{
pointId: LabelsData[i].pointId,
@ -257,10 +280,10 @@ class BaseMap extends React.Component{
icon: <ExclamationCircleFilled />,
title: '警告',
content: '是否确定删除点位,删除后信息将无法恢复',
onCancel(){
onCancel() {
},
// 确定删除
onOk(){
onOk() {
self.deleteChannel();
},
});
@ -286,8 +309,8 @@ class BaseMap extends React.Component{
this.state.pop.hide();
self = this;
let layerId = this.state.popParameter.belongLayerId;
deletePoint({id: this.state.popParameter.pointId}).then((e) => {
if(e.success){
deletePoint({ id: this.state.popParameter.pointId }).then((e) => {
if (e.success) {
message.success('点位删除成功!');
setTimeout(() => {
// 重新获取点位
@ -299,7 +322,7 @@ class BaseMap extends React.Component{
}, 1000);
this.getLayerPoints(layerId, false, 1);
}else{
} else {
message.error('点位删除失败!');
}
});
@ -395,7 +418,7 @@ class BaseMap extends React.Component{
const layer = new PolygonLayer({})
.source(data)
.shape('extrude')
.size('h20', [ 100, 120, 160, 200, 260, 500 ])
.size('h20', [100, 120, 160, 200, 260, 500])
.color('h20', [
'#816CAD',
'#A67FB5',
@ -460,7 +483,7 @@ class BaseMap extends React.Component{
'lat': provinceData[i].centerCoordinate && provinceData[i].centerCoordinate.split(',')[1],
})
}
this.setState ({
this.setState({
provinceList: provinceList
})
});
@ -484,11 +507,11 @@ class BaseMap extends React.Component{
this.getCityByProvince(`${provinceAdcode}`);
this.hideHeatMap();
this.setState ({
this.setState({
provinceAdcode: provinceAdcode ? `${provinceAdcode}` : '', // 省编码
provinceLabel: data ? data.label : '', // 省名称
zoom: 8, // 缩放级别
cityAdcode:'',//选中的市
cityAdcode: '',//选中的市
cityLabel: '',
districtList: [],//区
districtAdcode: '',
@ -497,12 +520,12 @@ class BaseMap extends React.Component{
// 获取市
getCityByProvince = (provinceAdcode) => {
if (provinceAdcode === undefined || provinceAdcode === null || provinceAdcode === "" || provinceAdcode === 'undefined') {
this.setState ({
this.setState({
cityList: []
})
return false
}
return getCityByProvinceApi({provinceAdcode: provinceAdcode}).then((e) => {
return getCityByProvinceApi({ provinceAdcode: provinceAdcode }).then((e) => {
let cityData = e.data;
let cityList = [];
for (var i in cityData) {
@ -515,16 +538,17 @@ class BaseMap extends React.Component{
'lat': cityData[i].centerCoordinate && cityData[i].centerCoordinate.split(',')[1],
})
}
this.setState ({
this.setState({
cityList: cityList
})
});
}
//选择市 cityAdcode:市编码 data:市数据
onCityChange = (cityAdcode,data) => {
onCityChange = (cityAdcode, data) => {
var self = this;
if (cityAdcode === undefined || cityAdcode === null || cityAdcode === ""|| cityAdcode === 'undefined') {
this.setState ({
console.log("cityAdcode", cityAdcode)
if (cityAdcode === undefined || cityAdcode === null || cityAdcode === "" || cityAdcode === 'undefined') {
this.setState({
cityAdcode: '',
cityLabel: '',
districtAdcode: ''
@ -545,7 +569,7 @@ class BaseMap extends React.Component{
});
data && this.gotoCity(data);
this.hideHeatMap();
this.setState ({
this.setState({
cityAdcode: cityAdcode ? `${cityAdcode}` : '',
cityLabel: data ? data.label : '',
center: data && [parseFloat(data.lat), parseFloat(data.len)],
@ -555,13 +579,13 @@ class BaseMap extends React.Component{
}
// 获取区
getDistrictByCity = (cityAdcode) => {
if (cityAdcode === undefined || cityAdcode === null || cityAdcode === ""|| cityAdcode === 'undefined') {
this.setState ({
if (cityAdcode === undefined || cityAdcode === null || cityAdcode === "" || cityAdcode === 'undefined') {
this.setState({
districtList: []
})
return false
}
return getDistrictByCityApi({cityAdcode: cityAdcode}).then((e) => {
return getDistrictByCityApi({ cityAdcode: cityAdcode }).then((e) => {
let districtData = e.data;
let districtList = [];
for (var i in districtData) {
@ -573,15 +597,15 @@ class BaseMap extends React.Component{
'lat': districtData[i].centerCoordinate && districtData[i].centerCoordinate.split(',')[1],
})
}
this.setState ({
this.setState({
districtList: districtList
})
});
}
//选择区
onDistrictChange = (provinceAdcode,data) => {
onDistrictChange = (provinceAdcode, data) => {
var self = this;
if (provinceAdcode === undefined || provinceAdcode === null || provinceAdcode === ""|| provinceAdcode === 'undefined') {
if (provinceAdcode === undefined || provinceAdcode === null || provinceAdcode === "" || provinceAdcode === 'undefined') {
this.setState({
districtAdcode: '',
})
@ -589,6 +613,7 @@ class BaseMap extends React.Component{
}
self.startLoading();
let getLayers = self.state.markerLayerList;
console.log("getLayers✈······", getLayers)
for (let i = 0; i < getLayers.length; i++) {
self.state.map.removeMarkerLayer(getLayers[i]);
}
@ -606,13 +631,13 @@ class BaseMap extends React.Component{
})
}
onSearchSwitch = (data) => {
if(data === "1"){
if (data === "1") {
this.setState({
inputExplainKey: 1,
inputExplainValue: "请输入经纬度详情格式例如116.405285,39.904989",
inputContent: ""
})
}else{
} else {
this.setState({
inputExplainKey: 0,
inputExplainValue: "请输入地址详情信息",
@ -623,13 +648,13 @@ class BaseMap extends React.Component{
// 地图搜索
onSearchMap = () => {
// 0地址 1经纬度
if(this.state.inputExplainKey === 1){
if (this.state.inputExplainKey === 1) {
// 判断经纬度是否为空
let location = this.state.inputContent
if(location === "" || location === null){
if (location === "" || location === null) {
nullSearchLocation();
return false;
}else{
} else {
let data = {
'zoom': 8,
'len': location.split(',')[0],
@ -637,23 +662,23 @@ class BaseMap extends React.Component{
}
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]});
let searchPointMarker = new Marker().setLnglat({ lng: location.split(',')[0], lat: location.split(',')[1] });
this.state.map.addMarker(searchPointMarker);
successSearchAddress();
}
}else{
} else {
// 判断地址是否为空
let address = this.state.inputContent
if(address === "" ||address === null){
if (address === "" || address === null) {
nullSearchAddress();
return false;
}else{
} else {
address = this.state.provinceLabel + this.state.cityLabel + address;
return getPointByAddressApi({address: address}).then((e) => {
return getPointByAddressApi({ address: address }).then((e) => {
let coordinate = e.data;
if(coordinate === ""||coordinate === null){
if (coordinate === "" || coordinate === null) {
errorSearchAddress();
}else{
} else {
let data = {
'zoom': 8,
'len': coordinate.location.split(',')[0],
@ -661,7 +686,7 @@ class BaseMap extends React.Component{
}
this.gotoCity(data)
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);
successSearchAddress();
}
@ -715,7 +740,7 @@ class BaseMap extends React.Component{
this.state.map.on('contextmenu', this.contextmenuEvent);
// 键盘事件
const that = this;
document.onkeydown = function(event){
document.onkeydown = function (event) {
if (event.key === 'Escape') {
that.disableDrawPoint();
document.onkeydown = null;
@ -817,14 +842,14 @@ class BaseMap extends React.Component{
}, 1000);
// self.getLayerPoints(self.state.popParameter.layerId, false, 1);
self.getLayerPoints(self.state.pointEdit.layerId, false, 1);
}else{
} else {
message.error('点位更新失败!');
console.log("点位更新失败!", e)
}
})
self.setState({
isEditModalOpen: false,
pop : null,
pop: null,
});
}
handleOk = (values) => {
@ -981,7 +1006,7 @@ class BaseMap extends React.Component{
}
render(){
render() {
return (
<div id='base_map' className={styles.basseMap} >
<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}>
<Row>
<Col span={12}>
<Input.Group compact style={{display:"inline"}}>
<Input.Group compact style={{ display: "inline" }}>
<label className={styles.labelForm}>行政区域</label>
<Select
style={{width: 120, marginLeft: 18}}
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/>
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>
</Col>
<Col span={12}>
<Input.Group compact style={{display:"inline",float:"right"}}>
<Input.Group compact style={{ display: "inline", float: "right" }}>
<label className={styles.labelForm}>查询</label>
<Select defaultValue="0" style={{width: '80px'}} onChange={(e)=>{
<Select defaultValue="0" style={{ width: '80px' }} onChange={(e) => {
this.onSearchSwitch(e);
}}>
<Option value="0">地址</Option>
<Option value="1">经纬度</Option>
</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}
value={this.state.inputContent}
onChange={(e)=>{
onChange={(e) => {
this.setState({
inputContent: e.target.value
})
}}/>
}} />
<Button
type="primary"
style={{color: '#2F66F2', backgroundColor: 'white', }}
style={{ color: '#2F66F2', backgroundColor: 'white', }}
icon={<AimOutlined />}
onClick={this.onSearchMap}
/>
@ -1032,11 +1057,11 @@ class BaseMap extends React.Component{
{/* 图层数据显示 */}
<LayerData
ref="getLayerDataFun"
adcode={{cityAdcode: this.state.cityAdcode, districtAdcode: this.state.districtAdcode}}
getLayerPoints = {this.getLayerPoints}
getLayerShapes = {this.getLayerShapes}
startLoading = {this.startLoading}
stopLoading = {this.stopLoading}
adcode={{ cityAdcode: this.state.cityAdcode, districtAdcode: this.state.districtAdcode }}
getLayerPoints={this.getLayerPoints}
getLayerShapes={this.getLayerShapes}
startLoading={this.startLoading}
stopLoading={this.stopLoading}
/>
{/* <Button onClick={this.hiddenLayer} className='hiddenBtn'><DoubleLeftOutlined/></Button> */}
@ -1073,7 +1098,7 @@ class BaseMap extends React.Component{
>
<Input name='note'
value={this.state.pointAdd.name}
onChange={this.onPointAddNameChange}/>
onChange={this.onPointAddNameChange} />
</Form.Item>
<Form.Item label="点位地址"
rules={[
@ -1083,10 +1108,10 @@ 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 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>
</Modal>
@ -1128,7 +1153,7 @@ class BaseMap extends React.Component{
>
<Input name='note'
value={this.state.pointEdit.name}
onChange={this.onEditPointAddNameChange}/>
onChange={this.onEditPointAddNameChange} />
</Form.Item>
<Form.Item label="点位地址"
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 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>
</Modal>
@ -1149,7 +1174,7 @@ class BaseMap extends React.Component{
</div>
{/* 地图 */}
<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 className='hideItem'>
<Pop popParameter={this.state.popParameter} className='hideItem'></Pop>