725 lines
27 KiB
JavaScript
725 lines
27 KiB
JavaScript
import React from 'react';
|
||
import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form } from 'antd';
|
||
import axios from 'axios';
|
||
import LayerData from './LayerData';
|
||
import { AimOutlined } from '@ant-design/icons';
|
||
import Header from '../../components/Header/index.js';
|
||
import { createPoint, queryUserLayers } from '../../api';
|
||
|
||
import { GaodeMap ,Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup } from '@antv/l7';
|
||
import { DrawPoint, DrawEvent } from '@antv/l7-draw';
|
||
|
||
import styles from './index.less';
|
||
|
||
const { Option } = Select;
|
||
|
||
const nullSearchAddress = () => {
|
||
message.error('地址信息为空');
|
||
};
|
||
|
||
const errorSearchAddress = () => {
|
||
message.error('地址搜索信息异常，请联系开发人员');
|
||
};
|
||
|
||
const successSearchAddress = () => {
|
||
message.success('已成功进行地图定位');
|
||
};
|
||
|
||
class BaseMap extends React.Component{
|
||
|
||
constructor(){
|
||
super();
|
||
this.state = {
|
||
map: null,
|
||
// 地图中心
|
||
center: {
|
||
// title: '石家庄',longitude: 114.502461,latitude: 38.045474
|
||
},
|
||
provinceList: [],// 省
|
||
provinceAdcode: '',//选中的省
|
||
provinceLabel: '',//选中的省
|
||
cityList: [],//市
|
||
cityAdcode:'',//选中的市
|
||
cityLabel: '',
|
||
districtList: [],//区
|
||
districtAdcode:'',//选中的区
|
||
zoom: 4,
|
||
inputExplainKey: 0,
|
||
inputExplainValue: "请输入地址详情信息",
|
||
inputContent: '',
|
||
heatMapList: [],
|
||
loading: false,
|
||
markerLayerList: [],
|
||
isModalOpen: false,
|
||
selectLayerList: [],
|
||
pointAdd: {},
|
||
pointDrawer: null,
|
||
newPointLocation: '',
|
||
}
|
||
}
|
||
startLoading = () => {
|
||
this.setState({
|
||
loading: true,
|
||
});
|
||
}
|
||
stopLoading = () => {
|
||
this.setState({
|
||
loading: false,
|
||
});
|
||
}
|
||
// 钩子，打开执行
|
||
componentDidMount = () => {
|
||
this.getAllProvince();
|
||
this.createMap();
|
||
}
|
||
// 创建地图
|
||
createMap = () => {
|
||
const scene = new Scene({
|
||
id: 'container',
|
||
map: new GaodeMap({
|
||
pitch: 20,
|
||
style: 'light',
|
||
center: [ 118.405285, 39.904989 ],
|
||
zoom: 3
|
||
})
|
||
});
|
||
this.setState({
|
||
map: scene,
|
||
});
|
||
}
|
||
|
||
//设置地图省份级别位置
|
||
gotoProvince = (data) => {
|
||
let zoom = data.zoom || 6;
|
||
let lng = data.len || 116.405285;
|
||
let lat = data.lat || 39.904989;
|
||
this.state.map.setZoomAndCenter(zoom, [lng, lat]);
|
||
}
|
||
|
||
//根据cityname、adcode、citycode设置地图位置
|
||
gotoCity = (data) => {
|
||
this.state.map.removeAllMarkers && this.state.map.removeAllMarkers();
|
||
let zoom = data.zoom || 10;
|
||
let lng = data.len || 116.405285;
|
||
let lat = data.lat || 39.904989;
|
||
this.state.map.setZoomAndCenter(zoom, [lng, lat]);
|
||
}
|
||
|
||
// 获取图层明细点位数据/热力图数据
|
||
getLayerPoints = (layerId, selected, nodeType) => {
|
||
if (selected) {
|
||
this.startLoading();
|
||
return axios.get('/api/basicMap/getLayerPoints', {
|
||
params: {
|
||
adcode: this.state.districtAdcode || this.state.cityAdcode || this.state.provinceAdcode,
|
||
layerId: layerId
|
||
}
|
||
}).then((e) => {
|
||
let layerPointsData = e.data.data;
|
||
layerPointsData = layerPointsData.map((item) => {
|
||
item.lng = item.location.split(',')[0];
|
||
item.lat = item.location.split(',')[1];
|
||
item.value = 15;
|
||
return item;
|
||
});
|
||
if (nodeType === 1) {
|
||
this.setMarkers(layerPointsData, layerId);
|
||
} else if (nodeType === 4) {
|
||
this.setHeatMap(layerPointsData, layerId);
|
||
}
|
||
}).then(() => {
|
||
this.stopLoading();
|
||
});
|
||
} else {
|
||
let self = this;
|
||
let getLayers = self.state.markerLayerList;
|
||
for (let i = 0; i < getLayers.length; i++) {
|
||
if (getLayers[i].markerLayerOption.name == layerId) {
|
||
self.state.map.removeMarkerLayer(getLayers[i]);
|
||
}
|
||
}
|
||
self.hideHeatMap(layerId);
|
||
}
|
||
}
|
||
// 隐藏热力图
|
||
hideHeatMap = (layerId) => {
|
||
let heatMapList = this.state.heatMapList
|
||
for (let i = 0; i < heatMapList.length; i++) {
|
||
if (heatMapList[i].og.data[0].id === layerId || layerId === undefined || layerId === null || layerId === '') {
|
||
heatMapList[i].hide();
|
||
}
|
||
}
|
||
}
|
||
// 在地图上设置点位 【经度，纬度】
|
||
setMarkers = (data, layerId) => {
|
||
let self = this;
|
||
let map = this.state.map;
|
||
let LabelsData = data || [];
|
||
let markerLayer = new MarkerLayer({name: layerId});
|
||
let el, popup, marker, icon;
|
||
for (let i = 0; i < LabelsData.length; i++) {
|
||
icon = LabelsData[0].logoImage;
|
||
el = document.createElement('label');
|
||
el.style.width = '22px';
|
||
el.style.height = '22px';
|
||
el.style.background = 'url("' + icon + '") no-repeat';
|
||
el.style.backgroundSize = 'contain';
|
||
|
||
marker = new Marker({
|
||
element: el
|
||
}).setLnglat({lng: LabelsData[i].lng, lat: LabelsData[i].lat})
|
||
|
||
marker.on('click', (e) => {
|
||
popup = new Popup({
|
||
offsets: [0, 30]
|
||
})
|
||
.setLnglat(e.lngLat)
|
||
.setHTML(`
|
||
<div>
|
||
<div class="popup-title"><span class="popup-title-border"></span>详情信息</div>
|
||
<div class="popup-name">名称：${LabelsData[i].pointName}</div>
|
||
<div class="popup-address">地址：${LabelsData[i].address || ''}</div>
|
||
<div class="popup-memo">备注：${LabelsData[i].memo || ''}</div>
|
||
</div>`);
|
||
this.state.map.addPopup(popup)
|
||
});
|
||
|
||
markerLayer.addMarker(marker);
|
||
}
|
||
this.setState({
|
||
markerLayerList: [...this.state.markerLayerList, markerLayer],
|
||
})
|
||
this.state.map.addMarkerLayer(markerLayer);
|
||
}
|
||
|
||
// 在地图上设置热力图 【经度，纬度】
|
||
setHeatMap = (data, layerId) => {
|
||
let self = this;
|
||
let map = this.state.map;
|
||
let LabelsData = data || [];
|
||
let heatLayer = new Heatmap({nmae: layerId})
|
||
.source(LabelsData)
|
||
.shape('heatmap')
|
||
.size('mag', [ 0, 1.0 ]) // weight映射通道
|
||
.style({
|
||
intensity: 2,
|
||
radius: 20,
|
||
rampColors: {
|
||
colors: [
|
||
'#FF4818',
|
||
'#F7B74A',
|
||
'#FFF598',
|
||
'#91EABC',
|
||
'#2EA9A1',
|
||
'#206C7C'
|
||
].reverse(),
|
||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||
}
|
||
});
|
||
map.addLayer(heatLayer);
|
||
|
||
// 加载热力图插件
|
||
// var heatmap;
|
||
// var points = [];
|
||
// LabelsData.forEach(function (item) {
|
||
// points.push(
|
||
// {
|
||
// "lng": Number(item.location.split(',')[0]),
|
||
// "lat": Number(item.location.split(',')[1]),
|
||
// "count": item.weight,
|
||
// "id": layerId,
|
||
// }
|
||
// )
|
||
// })
|
||
// map.plugin(["AMap.Heatmap"],function(){
|
||
// // 在地图对象叠加热力图
|
||
// heatmap = new AMap.Heatmap(map, {
|
||
// radius: 25, //热力图的每个点的半径大小 [0,+∞)
|
||
// opacity: [0, 0.8], //热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
|
||
// gradient:{ //热力图的颜色渐变区间。 {JSON}:key 插值的位置, 0-1; value颜色值
|
||
// 0.5: 'blue',
|
||
// 0.65: 'rgb(117,211,248)',
|
||
// 0.7: 'rgb(0, 255, 0)',
|
||
// 0.9: '#ffea00',
|
||
// 1.0: 'red'
|
||
// },
|
||
// });
|
||
// // 设置热力图数据集
|
||
// heatmap.setDataSet({data:points,max:100});
|
||
// });
|
||
// this.setState((state) => {
|
||
// state.heatMapList.push(heatmap);
|
||
// });
|
||
}
|
||
// 获取围栏图层数据
|
||
getLayerShapes = (layerId, selected, adcode) => {
|
||
if (selected) {
|
||
return axios.get('/api/basicMap/getLayerShapes', {
|
||
params: {
|
||
adcode: adcode || this.state.districtAdcode || this.state.cityAdcode || this.state.provinceAdcode,
|
||
layerId: layerId
|
||
}
|
||
}).then((e) => {
|
||
let positionBorderData = e.data.data;
|
||
this.setPolygon(positionBorderData, layerId);
|
||
});
|
||
} else {
|
||
this.state.map.removeAllLayer();
|
||
}
|
||
}
|
||
// 在地图上设置围栏、面
|
||
setPolygon = (d, layerId) => {
|
||
let self = this;
|
||
let map = this.state.map;
|
||
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'
|
||
]);
|
||
map.addLayer(layer);
|
||
// paths.forEach(function(path) {
|
||
// if(path.type === "ENVELOPE"){
|
||
// var tmp1 = path.positionRectangle[0]
|
||
// var tmp2 = path.positionRectangle[1]
|
||
// var southWest = new AMap.LngLat(tmp1[0], tmp1[1])
|
||
// var northEast = new AMap.LngLat(tmp2[0], tmp2[1])
|
||
// var bound = new AMap.Bounds(southWest,northEast);
|
||
// var rectangle = new AMap.Rectangle({
|
||
// id: layerId,
|
||
// bounds: bound,
|
||
// strokeColor: path.borderColor,
|
||
// strokeWeight: 1,
|
||
// strokeOpacity: path.borderOpacity,
|
||
// fillOpacity: path.opacity,
|
||
// fillColor: path.themeColor,
|
||
// zIndex: 50,
|
||
// });
|
||
// overlayList.push(rectangle);
|
||
// }else if(path.type === "POLYGON"){
|
||
// var polygon = new AMap.Polygon({
|
||
// id: layerId,
|
||
// path: path.positionBorder,
|
||
// strokeColor: path.borderColor,
|
||
// strokeWeight: 1,
|
||
// strokeOpacity: path.borderOpacity,
|
||
// fillOpacity: path.opacity,
|
||
// fillColor: path.themeColor,
|
||
// zIndex: 50,
|
||
// });
|
||
// overlayList.push(polygon);
|
||
// }
|
||
// });
|
||
|
||
// let overlay = new AMap.OverlayGroup(overlayList);
|
||
// map.add(overlay)
|
||
|
||
// 缩放地图到合适的视野级别
|
||
// map.setFitView([ polygon ])
|
||
}
|
||
|
||
// 获取省
|
||
getAllProvince = () => {
|
||
return axios.get('/api/mapCommon/getAllProvince').then((e) => {
|
||
let provinceData = e.data.data;
|
||
let provinceList = [];
|
||
for (var i in provinceData) {
|
||
provinceList.push({
|
||
'value': provinceData[i].provinceAdcode,
|
||
'label': provinceData[i].provinceName,
|
||
'zoom': 7,
|
||
'len': provinceData[i].centerCoordinate && provinceData[i].centerCoordinate.split(',')[0],
|
||
'lat': provinceData[i].centerCoordinate && provinceData[i].centerCoordinate.split(',')[1],
|
||
})
|
||
}
|
||
this.setState ({
|
||
provinceList: provinceList
|
||
})
|
||
});
|
||
}
|
||
// 选择省
|
||
onProvinceChange = (provinceAdcode, data) => {
|
||
var self = this;
|
||
let getLayers = this.state.map.getLayers();
|
||
// let getOverlays = this.state.map.getAllOverlays();
|
||
for (let i = 0; i < getLayers.length; i++) {
|
||
if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
|
||
self.state.map.remove(getLayers[i]);
|
||
}
|
||
}
|
||
// this.state.map.remove(getOverlays);
|
||
data && this.gotoProvince(data)
|
||
this.getCityByProvince(`${provinceAdcode}`);
|
||
this.hideHeatMap();
|
||
this.setState ({
|
||
provinceAdcode: provinceAdcode ? `${provinceAdcode}` : '',
|
||
provinceLabel: data ? data.label : '',
|
||
zoom: 8,
|
||
districtList: [],//区
|
||
cityAdcode:'',//选中的市
|
||
cityLabel: '',
|
||
districtAdcode: '',
|
||
})
|
||
}
|
||
// 获取市
|
||
getCityByProvince = (provinceAdcode) => {
|
||
return axios.get('/api/mapCommon/getCityByProvince', {
|
||
params: {
|
||
provinceAdcode: provinceAdcode
|
||
}
|
||
}).then((e) => {
|
||
let cityData = e.data.data;
|
||
let cityList = [];
|
||
for (var i in cityData) {
|
||
cityList.push({
|
||
'value': cityData[i].cityAdcode,
|
||
'label': cityData[i].cityName,
|
||
'zoom': 10,
|
||
'len': cityData[i].centerCoordinate && cityData[i].centerCoordinate.split(',')[0],
|
||
'lat': cityData[i].centerCoordinate && cityData[i].centerCoordinate.split(',')[1],
|
||
})
|
||
}
|
||
this.setState ({
|
||
cityList: cityList
|
||
})
|
||
});
|
||
}
|
||
//选择市
|
||
onCityChange = (cityAdcode,data) => {
|
||
var self = this;
|
||
let getLayers = this.state.map.getLayers();
|
||
self.startLoading();
|
||
// let getOverlays = this.state.map.getAllOverlays();
|
||
for (let i = 0; i < getLayers.length; i++) {
|
||
if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
|
||
self.state.map.remove(getLayers[i]);
|
||
}
|
||
}
|
||
// this.state.map.remove(getOverlays);
|
||
this.getDistrictByCity(`${cityAdcode}`);
|
||
this.refs.getLayerDataFun.getBasicLayerMenu(`${cityAdcode}`).then(() => {
|
||
self.stopLoading();
|
||
});
|
||
data && this.gotoCity(data);
|
||
this.hideHeatMap();
|
||
|
||
this.setState ({
|
||
cityAdcode: cityAdcode ? `${cityAdcode}` : '',
|
||
cityLabel: data ? data.label : '',
|
||
center: data && [parseFloat(data.lat), parseFloat(data.len)],
|
||
zoom: 10,
|
||
districtAdcode: ''
|
||
})
|
||
}
|
||
// 获取区
|
||
getDistrictByCity = (cityAdcode) => {
|
||
return axios.get('/api/mapCommon/getDistrictByCity', {
|
||
params: {
|
||
cityAdcode: cityAdcode
|
||
}
|
||
}).then((e) => {
|
||
let districtData = e.data.data;
|
||
let districtList = [];
|
||
for (var i in districtData) {
|
||
districtList.push({
|
||
'value': districtData[i].districtAdcode,
|
||
'label': districtData[i].districtName,
|
||
'zoom': 13,
|
||
'len': districtData[i].centerCoordinate && districtData[i].centerCoordinate.split(',')[0],
|
||
'lat': districtData[i].centerCoordinate && districtData[i].centerCoordinate.split(',')[1],
|
||
})
|
||
}
|
||
this.setState ({
|
||
districtList: districtList
|
||
})
|
||
});
|
||
}
|
||
//选择区
|
||
onDistrictChange = (provinceAdcode,data) => {
|
||
var self = this;
|
||
let getLayers = this.state.map.getLayers();
|
||
self.startLoading()
|
||
// let getOverlays = this.state.map.getAllOverlays();
|
||
for (let i = 0; i < getLayers.length; i++) {
|
||
if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
|
||
self.state.map.remove(getLayers[i]);
|
||
}
|
||
}
|
||
// this.state.map.remove(getOverlays);
|
||
this.refs.getLayerDataFun.getBasicLayerMenu(`${provinceAdcode}`).then(() => {
|
||
self.stopLoading();
|
||
});
|
||
data && this.gotoCity(data);
|
||
this.hideHeatMap();
|
||
this.setState({
|
||
districtAdcode: provinceAdcode ? `${provinceAdcode}` : '',
|
||
center: data && [parseFloat(data.lat), parseFloat(data.len)],
|
||
zoom: 13,
|
||
})
|
||
}
|
||
onSearchSwitch = (data) => {
|
||
if(data === "1"){
|
||
this.setState({
|
||
inputExplainKey: 1,
|
||
inputExplainValue: "请输入经纬度详情，格式例如：116.405285,39.904989",
|
||
inputContent: ""
|
||
})
|
||
}else{
|
||
this.setState({
|
||
inputExplainKey: 0,
|
||
inputExplainValue: "请输入地址详情信息",
|
||
inputContent: ""
|
||
})
|
||
}
|
||
}
|
||
onSearchMap = () => {
|
||
if(this.state.inputExplainKey === 1){
|
||
let location = this.state.inputContent
|
||
let data = {
|
||
'zoom': 8,
|
||
'len': location.split(',')[0],
|
||
'lat': location.split(',')[1],
|
||
}
|
||
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]});
|
||
this.state.map.addMarker(searchPointMarker);
|
||
successSearchAddress();
|
||
}else{
|
||
let address = this.state.inputContent
|
||
if(address === "" ||address === null){
|
||
nullSearchAddress();
|
||
return false;
|
||
}else{
|
||
address = this.state.provinceLabel + this.state.cityLabel + address;
|
||
return axios.get('/api/mapCommon/getPointByAddress', {
|
||
params: {
|
||
address: address
|
||
}
|
||
}).then((e) => {
|
||
let coordinate = e.data.data;
|
||
if(coordinate === ""||coordinate === null){
|
||
errorSearchAddress();
|
||
}else{
|
||
let data = {
|
||
'zoom': 8,
|
||
'len': coordinate.location.split(',')[0],
|
||
'lat': coordinate.location.split(',')[1],
|
||
}
|
||
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]});
|
||
this.state.map.addMarker(searchPointMarker);
|
||
successSearchAddress();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
enableDrawPoint = () => {
|
||
this.state.map.addImage(
|
||
'dingwei',
|
||
'https://gw.alipayobjects.com/mdn/rms_3bf4aa/afts/img/A*JL46TZ_iYB0AAAAAAAAAAAAAARQnAQ',
|
||
);
|
||
const drawer = new DrawPoint(this.state.map, {
|
||
style: {
|
||
point: {
|
||
normal: {
|
||
shape: 'dingwei',
|
||
size: 8,
|
||
},
|
||
hover: {
|
||
shape: 'dingwei',
|
||
size: 10,
|
||
},
|
||
active: {
|
||
shape: 'dingwei',
|
||
size: 10,
|
||
},
|
||
}
|
||
}
|
||
});
|
||
drawer.enable();
|
||
drawer.on(DrawEvent.Add, (newPoint) => {
|
||
this.showModal(newPoint.geometry.coordinates.toString());
|
||
});
|
||
this.setState({
|
||
pointDrawer: drawer,
|
||
});
|
||
}
|
||
|
||
//弹出框事件
|
||
showModal = (newPointLocation) => {
|
||
queryUserLayers().then((e) => {
|
||
let data = e.data;
|
||
let selectLayerList = [];
|
||
for (var i in data) {
|
||
selectLayerList.push({
|
||
'value': data[i].id,
|
||
'label': data[i].name,
|
||
})
|
||
}
|
||
this.setState({
|
||
isModalOpen: true,
|
||
selectLayerList: selectLayerList,
|
||
newPointLocation: newPointLocation,
|
||
});
|
||
});
|
||
};
|
||
handleOk = (values) => {
|
||
createPoint({ //创建图层
|
||
"layerId": this.state.pointAdd.layerId,
|
||
"name": this.state.pointAdd.name,
|
||
"note": this.state.pointAdd.note,
|
||
"address": this.state.pointAdd.address,
|
||
"cityAdcode": this.state.cityAdcode,
|
||
"districtAdcode": this.state.districtAdcode,
|
||
"location": this.state.newPointLocation,
|
||
"provinceAdcode": this.state.provinceAdcode,
|
||
}).then((e) => {
|
||
if (e.success) {
|
||
message.success(e.message || '成功!');
|
||
this.setState({
|
||
isModalOpen: false
|
||
});
|
||
} else {
|
||
message.error(e.message || '失败！');
|
||
}
|
||
})
|
||
};
|
||
handleCancel = () => {
|
||
this.state.pointDrawer.disable();
|
||
this.setState({
|
||
isModalOpen: false
|
||
});
|
||
};
|
||
onLayerNameChange = (e) => {
|
||
this.setState({
|
||
pointAdd: {
|
||
"layerId": e,
|
||
"name": this.state.pointAdd.name,
|
||
"note": this.state.pointAdd.note,
|
||
"address": this.state.pointAdd.address,
|
||
},
|
||
})
|
||
}
|
||
onPointAddNameChange = (e) => {
|
||
this.setState({
|
||
pointAdd: {
|
||
"layerId": this.state.pointAdd.layerId,
|
||
"name": e.currentTarget.value,
|
||
"note": this.state.pointAdd.note,
|
||
"address": this.state.pointAdd.address,
|
||
},
|
||
})
|
||
}
|
||
onPointAddAddressChange = (e) => {
|
||
this.setState({
|
||
pointAdd: {
|
||
"layerId": this.state.pointAdd.layerId,
|
||
"name": this.state.pointAdd.name,
|
||
"note": this.state.pointAdd.note,
|
||
"address": e.currentTarget.value,
|
||
},
|
||
})
|
||
}
|
||
onLayerNoteChange = (e) => {
|
||
this.setState({
|
||
pointAdd: {
|
||
"layerId": this.state.pointAdd.layerId,
|
||
"name": this.state.pointAdd.name,
|
||
"note": e.currentTarget.value,
|
||
"address": this.state.pointAdd.address,
|
||
},
|
||
})
|
||
}
|
||
|
||
render(){
|
||
return (
|
||
<div className={styles.basseMap} id='base_map'>
|
||
<Spin id='spin-show' size='large' spinning={this.state.loading}></Spin>
|
||
<Header></Header>
|
||
{/* 筛选框 */}
|
||
<Card className={styles.selectWrap} bordered={false}>
|
||
<Row>
|
||
<Col span={12}>
|
||
<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/>
|
||
</Input.Group>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Input.Group compact style={{display:"inline",float:"right"}}>
|
||
<label className={styles.labelForm}>查询：</label>
|
||
<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
|
||
})
|
||
}}/>
|
||
<Button
|
||
type="primary"
|
||
style={{color: '#2F66F2', backgroundColor: 'white', }}
|
||
icon={<AimOutlined />}
|
||
onClick={this.onSearchMap}
|
||
/>
|
||
</Input.Group>
|
||
</Col>
|
||
</Row>
|
||
</Card>
|
||
{/* 图层数据显示 */}
|
||
<LayerData ref="getLayerDataFun" getLayerPoints = {this.getLayerPoints} getLayerShapes = {this.getLayerShapes}/>
|
||
<div className={styles.btnRightWrap}>
|
||
<Button type="primary" className={styles.btnRight} onClick={this.enableDrawPoint}>点位创建</Button>
|
||
<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}>
|
||
<Form.Item label="选择自定义图层"
|
||
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="点位名称">
|
||
<Input name='note' value={this.state.pointAdd.name} onChange={this.onPointAddNameChange}/>
|
||
</Form.Item>
|
||
<Form.Item label="点位地址">
|
||
<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}/>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
<Button disabled className={styles.btnRight}>点位导入</Button>
|
||
</div>
|
||
{/* 地图 */}
|
||
<div className={styles.mapWrap}>
|
||
<div style={{width: '100%', height: '100vh'}} id="container" />
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default BaseMap |