diff --git a/package.json b/package.json index ea3fd373..d307b892 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/src/app.ts b/src/app.ts index 271f531f..0cbb7b39 100644 --- a/src/app.ts +++ b/src/app.ts @@ -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}`, diff --git a/src/index.less b/src/index.less index eca0a94f..92abc6f2 100644 --- a/src/index.less +++ b/src/index.less @@ -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); diff --git a/src/pages/BaseMap/LayerData/index.js b/src/pages/BaseMap/LayerData/index.js index e5b2fee5..7e270870 100644 --- a/src/pages/BaseMap/LayerData/index.js +++ b/src/pages/BaseMap/LayerData/index.js @@ -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) { diff --git a/src/pages/BaseMap/index.js b/src/pages/BaseMap/index.js index 9877d837..8b55a6f0 100644 --- a/src/pages/BaseMap/index.js +++ b/src/pages/BaseMap/index.js @@ -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: , 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 (
@@ -990,38 +1015,38 @@ class BaseMap extends React.Component{ - + - - + - + - { this.onSearchSwitch(e); }}> - { - this.setState({ - inputContent: e.target.value - }) - }}/> + { + this.setState({ + inputContent: e.target.value + }) + }} /> */}
{/* */} -
- - + - + - +
-
{/* - + - + - +
@@ -1149,7 +1174,7 @@ class BaseMap extends React.Component{
{/* 地图 */}
-
+