token
This commit is contained in:
parent
4697f77226
commit
34ef7c42a6
@ -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"
|
||||
}
|
||||
|
||||
@ -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}`,
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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,
|
||||
@ -90,7 +90,7 @@ class BaseMap extends React.Component{
|
||||
componentDidMount = () => {
|
||||
this.getAllProvince();
|
||||
this.createMap();
|
||||
}
|
||||
}
|
||||
// 创建地图
|
||||
createMap = () => {
|
||||
const scene = new Scene({
|
||||
@ -98,17 +98,40 @@ 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);
|
||||
// // });
|
||||
// })
|
||||
}
|
||||
|
||||
//设置地图省份级别位置
|
||||
gotoProvince = (data) => {
|
||||
//设置地图省份级别位置
|
||||
gotoProvince = (data) => {
|
||||
let zoom = data.zoom || 6;
|
||||
let lng = data.len || 116.405285;
|
||||
let lat = data.lat || 39.904989;
|
||||
@ -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);
|
||||
@ -160,7 +183,7 @@ class BaseMap extends React.Component{
|
||||
self.hideHeatMap(layerId);
|
||||
}
|
||||
}
|
||||
// 隐藏热力图
|
||||
// 隐藏热力图
|
||||
hideHeatMap = (layerId) => {
|
||||
let heatMapList = this.state.heatMapList
|
||||
for (let i = 0; i < heatMapList.length; i++) {
|
||||
@ -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++) {
|
||||
@ -183,7 +206,7 @@ class BaseMap extends React.Component{
|
||||
el.style.height = '26px';
|
||||
el.id = 'marker' + i;
|
||||
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.backgroundSize = 'cover';
|
||||
} else {
|
||||
@ -191,20 +214,20 @@ 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],
|
||||
closeOnClick: true,
|
||||
autoClose: true,
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(popHtml.innerHTML)
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(popHtml.innerHTML)
|
||||
document.getElementById('marker' + i).style.width = '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.height = '26px';
|
||||
});
|
||||
this.setState({pop: popup})
|
||||
this.setState({ pop: popup })
|
||||
popup.on('open', () => {
|
||||
// 编辑按钮
|
||||
document.getElementsByClassName('edit-button')[0].onclick = () => {
|
||||
@ -239,8 +262,8 @@ class BaseMap extends React.Component{
|
||||
return false;
|
||||
};
|
||||
this.setState({
|
||||
selectLayerList:selectLayerList,
|
||||
pointEdit:
|
||||
selectLayerList: selectLayerList,
|
||||
pointEdit:
|
||||
{
|
||||
pointId: LabelsData[i].pointId,
|
||||
layerId: LabelsData[i].belongLayerId,
|
||||
@ -248,7 +271,7 @@ class BaseMap extends React.Component{
|
||||
// note: LabelsData[i].note,
|
||||
address: LabelsData[i].address,
|
||||
},
|
||||
isEditModalOpen: true
|
||||
isEditModalOpen: true
|
||||
})
|
||||
};
|
||||
// 删除按钮
|
||||
@ -257,10 +280,10 @@ class BaseMap extends React.Component{
|
||||
icon: <ExclamationCircleFilled />,
|
||||
title: '警告',
|
||||
content: '是否确定删除点位，删除后信息将无法恢复',
|
||||
onCancel(){
|
||||
onCancel() {
|
||||
},
|
||||
// 确定删除
|
||||
onOk(){
|
||||
onOk() {
|
||||
self.deleteChannel();
|
||||
},
|
||||
});
|
||||
@ -285,9 +308,9 @@ class BaseMap extends React.Component{
|
||||
this.startLoading();
|
||||
this.state.pop.hide();
|
||||
self = this;
|
||||
let layerId = this.state.popParameter.belongLayerId;
|
||||
deletePoint({id: this.state.popParameter.pointId}).then((e) => {
|
||||
if(e.success){
|
||||
let layerId = this.state.popParameter.belongLayerId;
|
||||
deletePoint({ id: this.state.popParameter.pointId }).then((e) => {
|
||||
if (e.success) {
|
||||
message.success('点位删除成功!');
|
||||
setTimeout(() => {
|
||||
// 重新获取点位
|
||||
@ -298,17 +321,17 @@ class BaseMap extends React.Component{
|
||||
self.stopLoading();
|
||||
}, 1000);
|
||||
this.getLayerPoints(layerId, false, 1);
|
||||
|
||||
}else{
|
||||
|
||||
} else {
|
||||
message.error('点位删除失败！');
|
||||
}
|
||||
});
|
||||
this.setState({
|
||||
this.setState({
|
||||
pop: null,
|
||||
popParameter: {},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -393,18 +416,18 @@ class BaseMap extends React.Component{
|
||||
let data = d || [];
|
||||
let overlayList = [];
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.shape('extrude')
|
||||
.size('h20', [ 100, 120, 160, 200, 260, 500 ])
|
||||
.color('h20', [
|
||||
'#816CAD',
|
||||
'#A67FB5',
|
||||
'#C997C7',
|
||||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
]);
|
||||
.source(data)
|
||||
.shape('extrude')
|
||||
.size('h20', [100, 120, 160, 200, 260, 500])
|
||||
.color('h20', [
|
||||
'#816CAD',
|
||||
'#A67FB5',
|
||||
'#C997C7',
|
||||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
]);
|
||||
map.addLayer(layer);
|
||||
// paths.forEach(function(path) {
|
||||
// if(path.type === "ENVELOPE"){
|
||||
@ -438,7 +461,7 @@ class BaseMap extends React.Component{
|
||||
// overlayList.push(polygon);
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
// let overlay = new AMap.OverlayGroup(overlayList);
|
||||
// map.add(overlay)
|
||||
|
||||
@ -460,7 +483,7 @@ class BaseMap extends React.Component{
|
||||
'lat': provinceData[i].centerCoordinate && provinceData[i].centerCoordinate.split(',')[1],
|
||||
})
|
||||
}
|
||||
this.setState ({
|
||||
this.setState({
|
||||
provinceList: provinceList
|
||||
})
|
||||
});
|
||||
@ -478,31 +501,31 @@ class BaseMap extends React.Component{
|
||||
this.refs.getLayerDataFun.state.selectLayerIdList = [];
|
||||
// 清除所选市
|
||||
this.onCityChange();
|
||||
|
||||
|
||||
data && this.gotoProvince(data)
|
||||
// 根据所选省获取市
|
||||
this.getCityByProvince(`${provinceAdcode}`);
|
||||
|
||||
|
||||
this.hideHeatMap();
|
||||
this.setState ({
|
||||
this.setState({
|
||||
provinceAdcode: provinceAdcode ? `${provinceAdcode}` : '', // 省编码
|
||||
provinceLabel: data ? data.label : '', // 省名称
|
||||
zoom: 8, // 缩放级别
|
||||
cityAdcode:'',//选中的市
|
||||
cityAdcode: '',//选中的市
|
||||
cityLabel: '',
|
||||
districtList: [],//区
|
||||
districtAdcode: '',
|
||||
})
|
||||
}
|
||||
// 获取市
|
||||
getCityByProvince = (provinceAdcode) => {
|
||||
// 获取市
|
||||
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)],
|
||||
@ -553,15 +577,15 @@ class BaseMap extends React.Component{
|
||||
districtAdcode: ''
|
||||
})
|
||||
}
|
||||
// 获取区
|
||||
getDistrictByCity = (cityAdcode) => {
|
||||
if (cityAdcode === undefined || cityAdcode === null || cityAdcode === ""|| cityAdcode === 'undefined') {
|
||||
this.setState ({
|
||||
// 获取区
|
||||
getDistrictByCity = (cityAdcode) => {
|
||||
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{
|
||||
address = this.state.provinceLabel + this.state.cityLabel + address;
|
||||
return getPointByAddressApi({address: address}).then((e) => {
|
||||
} else {
|
||||
address = this.state.provinceLabel + this.state.cityLabel + address;
|
||||
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();
|
||||
}
|
||||
@ -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);
|
||||
// 键盘事件
|
||||
const that = this;
|
||||
document.onkeydown = function(event){
|
||||
document.onkeydown = function (event) {
|
||||
if (event.key === 'Escape') {
|
||||
that.disableDrawPoint();
|
||||
document.onkeydown = null;
|
||||
@ -723,11 +748,11 @@ class BaseMap extends React.Component{
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// 地图鼠标双击事件
|
||||
dblclickEvent = (e) => {
|
||||
|
||||
// 地图鼠标双击事件
|
||||
dblclickEvent = (e) => {
|
||||
// 开启双击地图放大 不能放在这，会导致弹框的同时放大地图，将开启放大放在弹框关闭事件中
|
||||
|
||||
|
||||
// 添加点位
|
||||
this.showModal(this.state.mouseLocation.location.toString());
|
||||
// 鼠标取消十字
|
||||
@ -742,18 +767,18 @@ class BaseMap extends React.Component{
|
||||
this.setState({
|
||||
disabled: !this.state.disabled,
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 地图右键事件
|
||||
contextmenuEvent = (e) => {
|
||||
this.disableDrawPoint();
|
||||
this.disableDrawPoint();
|
||||
}
|
||||
|
||||
// 取消点位创建
|
||||
disableDrawPoint = () => {
|
||||
// 开启双击地图放大
|
||||
this.state.map.setMapStatus({
|
||||
// 开启双击地图放大
|
||||
this.state.map.setMapStatus({
|
||||
doubleClickZoom: true
|
||||
})
|
||||
// 鼠标取消十字
|
||||
@ -771,7 +796,7 @@ class BaseMap extends React.Component{
|
||||
disabled: !this.state.disabled,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//弹出框事件
|
||||
showModal = (newPointLocation) => {
|
||||
// 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({
|
||||
isModalOpen: true,
|
||||
newPointLocation: newPointLocation,
|
||||
});
|
||||
};
|
||||
// 修改按钮
|
||||
editChannel = () => {
|
||||
// 修改按钮
|
||||
editChannel = () => {
|
||||
this.startLoading();
|
||||
self = this;
|
||||
self.state.pop.hide();
|
||||
let param = {
|
||||
let param = {
|
||||
"id": this.state.pointEdit.pointId,
|
||||
"name": this.state.pointEdit.name,
|
||||
"note": this.state.pointEdit.note,
|
||||
@ -817,20 +842,20 @@ 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) => {
|
||||
this.startLoading();
|
||||
// 开启双击地图放大
|
||||
this.state.map.setMapStatus({
|
||||
// 开启双击地图放大
|
||||
this.state.map.setMapStatus({
|
||||
doubleClickZoom: true
|
||||
})
|
||||
createPoint({ //创建图层
|
||||
@ -842,7 +867,7 @@ class BaseMap extends React.Component{
|
||||
"districtAdcode": this.state.districtAdcode,
|
||||
"location": this.state.newPointLocation,
|
||||
"provinceAdcode": this.state.provinceAdcode,
|
||||
}).then((e) => {
|
||||
}).then((e) => {
|
||||
let layerId = this.state.pointAdd.layerId;
|
||||
if (e.success) {
|
||||
message.success('点位创建成功!');
|
||||
@ -864,8 +889,8 @@ class BaseMap extends React.Component{
|
||||
})
|
||||
};
|
||||
handleCancel = () => {
|
||||
// 开启双击地图放大
|
||||
this.state.map.setMapStatus({
|
||||
// 开启双击地图放大
|
||||
this.state.map.setMapStatus({
|
||||
doubleClickZoom: true
|
||||
})
|
||||
// this.state.pointDrawer.removeActiveFeature();
|
||||
@ -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}}
|
||||
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/>
|
||||
<Select
|
||||
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 />
|
||||
</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}}
|
||||
placeholder={this.state.inputExplainValue}
|
||||
value={this.state.inputContent}
|
||||
onChange={(e)=>{
|
||||
this.setState({
|
||||
inputContent: e.target.value
|
||||
})
|
||||
}}/>
|
||||
<Input id="tipinput" style={{ width: '60%', height: 32, marginLeft: 18 }}
|
||||
placeholder={this.state.inputExplainValue}
|
||||
value={this.state.inputContent}
|
||||
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}
|
||||
/>
|
||||
@ -1030,37 +1055,37 @@ class BaseMap extends React.Component{
|
||||
</Row>
|
||||
</Card>
|
||||
{/* 图层数据显示 */}
|
||||
<LayerData
|
||||
ref="getLayerDataFun"
|
||||
adcode={{cityAdcode: this.state.cityAdcode, districtAdcode: this.state.districtAdcode}}
|
||||
getLayerPoints = {this.getLayerPoints}
|
||||
getLayerShapes = {this.getLayerShapes}
|
||||
startLoading = {this.startLoading}
|
||||
stopLoading = {this.stopLoading}
|
||||
<LayerData
|
||||
ref="getLayerDataFun"
|
||||
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> */}
|
||||
|
||||
<div className={styles.btnRightWrap}>
|
||||
<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> */}
|
||||
<Modal title="点位创建"
|
||||
open={this.state.isModalOpen}
|
||||
onOk={this.handleOk}
|
||||
onCancel={this.handleCancel}
|
||||
className='add-point-modal'
|
||||
<Modal title="点位创建"
|
||||
open={this.state.isModalOpen}
|
||||
onOk={this.handleOk}
|
||||
onCancel={this.handleCancel}
|
||||
className='add-point-modal'
|
||||
>
|
||||
<Form name='base' id='add-point-form' onFinish={this.handleOk} onFinishFailed={this.onFinishFailed}>
|
||||
<Form.Item label="选择自定义图层"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入图层名称!',
|
||||
}
|
||||
]}>
|
||||
<Select name='name' value={this.state.pointAdd.layerId}
|
||||
options={this.state.selectLayerList}
|
||||
onChange={this.onLayerNameChange}
|
||||
allowClear>
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入图层名称!',
|
||||
}
|
||||
]}>
|
||||
<Select name='name' value={this.state.pointAdd.layerId}
|
||||
options={this.state.selectLayerList}
|
||||
onChange={this.onLayerNameChange}
|
||||
allowClear>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item label="点位名称"
|
||||
@ -1071,9 +1096,9 @@ class BaseMap extends React.Component{
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input name='note'
|
||||
value={this.state.pointAdd.name}
|
||||
onChange={this.onPointAddNameChange}/>
|
||||
<Input name='note'
|
||||
value={this.state.pointAdd.name}
|
||||
onChange={this.onPointAddNameChange} />
|
||||
</Form.Item>
|
||||
<Form.Item label="点位地址"
|
||||
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 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>
|
||||
<Modal title="点位修改"
|
||||
open={this.state.isEditModalOpen}
|
||||
onOk={this.editChannel}
|
||||
onCancel={this.handleEditCancel}
|
||||
className='add-point-modal'
|
||||
<Modal title="点位修改"
|
||||
open={this.state.isEditModalOpen}
|
||||
onOk={this.editChannel}
|
||||
onCancel={this.handleEditCancel}
|
||||
className='add-point-modal'
|
||||
>
|
||||
<Form name='base' id='add-point-form' onFinish={this.editChannel} onFinishFailed={this.onFinishFailed}>
|
||||
{/* <Form.Item label="选择自定义图层"
|
||||
@ -1126,9 +1151,9 @@ class BaseMap extends React.Component{
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input name='note'
|
||||
value={this.state.pointEdit.name}
|
||||
onChange={this.onEditPointAddNameChange}/>
|
||||
<Input name='note'
|
||||
value={this.state.pointEdit.name}
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user