import React, {Component} from 'react';
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
import LineChart from './LineChart';
|
import {Modal} from "antd";
|
import {projectTypeMap} from "../../common/constants";
|
|
window._AMapSecurityConfig = {
|
securityJsCode: '93f97fa744d6922ff21c53e4b4981064',
|
}
|
// const geocoder = new AMap.Geocoder({
|
// apiKey: '62d95204ea3dfb3061cd678bd8e40995'
|
// });
|
class MapComponent extends Component {
|
state = {
|
mapRoot: null,
|
map: null,
|
simpleMarker: null,
|
markers: [],
|
chartOptions: null,
|
currentProjectStat: null
|
}
|
|
// 2.dom渲染成功后进行map对象的创建
|
componentDidMount() {
|
AMapLoader.load({
|
key: "6edc6798d22e5a46660ff46560b1e612", // 申请好的Web端开发者Key，首次调用 load 时必填
|
// version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
plugins: ['AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
AMapUI: {
|
version: '1.1', // AMapUI 缺省 1.1
|
plugins: ['overlay/SimpleMarker'], // 需要加载的 AMapUI ui插件
|
}
|
}).then((AMap) => {
|
//引入SimpleMarker，loadUI的路径参数为模块名中 'ui/' 之后的部分
|
const map = new AMap.Map("mapcontainer", { //设置地图容器id
|
viewMode: "3D", //是否为3D地图模式
|
zoom: 10, //初始化地图级别
|
center: [104.07, 30.67], //初始化地图中心点位置，成都的经纬度
|
});
|
|
window.AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => {
|
this.setState({
|
mapRoot: AMap,
|
map: map,
|
simpleMarker: SimpleMarker
|
});
|
});
|
}).catch(e => {
|
console.log(e);
|
})
|
}
|
|
componentDidUpdate(prevProps) {
|
if (JSON.stringify(this.props.projectStats) !== JSON.stringify(prevProps.projectStats)) {
|
this.reloadMap()
|
}
|
}
|
|
reloadMap = () => {
|
let map = this.state.map
|
let amap = this.state.mapRoot
|
let markers = this.state.markers
|
markers.forEach(marker => {
|
map.remove(marker)
|
})
|
markers = []
|
this.props.projectStats.forEach(point => {
|
let marker = this.createMarker(point)
|
let that = this
|
marker.on('click', (event) => {
|
that.handleMarkerClick(event);
|
});
|
map.add(marker);
|
markers.push(marker);
|
})
|
this.setState({
|
markers: markers
|
}, () => {
|
this.focusMap(markers)
|
})
|
}
|
|
createMarker = (point) => {
|
// 根据评分设置不同的颜色
|
let color = 'lightgray'
|
let score = point.averageScore
|
if (score <= 0) {
|
color = 'lightgray' // 灰色
|
}else if (score < 60) {
|
color = 'red' // 红色
|
}else if (score < 80) {
|
color = 'orange' // 橙色
|
} else if (score < 90) {
|
color = 'blue' // 淡蓝色
|
} else {
|
color = 'lightgreen' // 绿色
|
}
|
|
var text = "X"
|
switch (point.project.type) {
|
case 'MUNICIPAL_ADMINISTRATION':
|
text = "市"
|
break
|
case 'HOUSE_CONSTRUCTION':
|
text = "房"
|
break
|
case 'CONSTRUCTION_WORK':
|
text = "建"
|
break
|
case 'CIVIL_WORKS':
|
text = "土"
|
break
|
case 'ELECTRICAL_ENGINEERING':
|
text = "机"
|
break
|
case 'SUBSIDIARY':
|
text = "子"
|
break
|
default:
|
text = "X"
|
break
|
}
|
|
let gps = [121.594201, 38.904771]
|
let project = point.project
|
if (project && project.addressInfo && project.addressInfo.gps) {
|
gps = project.addressInfo.gps
|
}
|
|
return new this.state.simpleMarker({
|
//前景文字
|
iconLabel: text,
|
//图标主题
|
iconTheme: 'default',
|
//背景图标样式
|
iconStyle: color,
|
position: gps,
|
extData: point
|
});
|
}
|
|
focusMap = (markers) => {
|
if (markers.length > 0) {
|
this.state.map.setFitView(markers);
|
console.log('focusMap')
|
}
|
}
|
|
handleMarkerClick = (event) => {
|
const clickMarker = event.target
|
const {project} = clickMarker.getExtData()
|
const clickPoint = this.props.projectStats.filter(item => {
|
return item.project.id === project.id
|
})[0]
|
this.setState({
|
currentProjectStat: clickPoint,
|
openDetails: true
|
})
|
};
|
|
render() {
|
// 1.初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
|
const { currentProjectStat } = this.state
|
const { project, averageScore, evalScores } = currentProjectStat || {}
|
return (
|
<div>
|
<div id="mapcontainer" style={{height: '800px'}}></div>
|
<Modal
|
visible={this.state.openDetails}
|
onCancel={() => this.setState({openDetails: false})}
|
footer={null}
|
width={'50%'}
|
title={project?.name}
|
>
|
<div style={{ padding: '20px' }}>
|
<table style={{ width: '100%', marginBottom: '20px' }}>
|
<tbody>
|
<tr>
|
<td style={{ width: '200px' }}><strong>平均分：</strong></td>
|
<td style={{ textAlign: 'left' }}>{averageScore}</td>
|
</tr>
|
<tr>
|
<td style={{ width: '200px' }}><strong>项目类型：</strong></td>
|
<td style={{ textAlign: 'left' }}>{projectTypeMap[project?.type]}</td>
|
</tr>
|
<tr>
|
<td style={{ width: '200px' }}><strong>施工单位：</strong></td>
|
<td style={{ textAlign: 'left' }}>{project?.constructionCompanyInfo?.name}</td>
|
</tr>
|
<tr>
|
<td style={{ width: '200px' }}><strong>建设单位：</strong></td>
|
<td style={{ textAlign: 'left' }}>{project?.developmentCompanyInfo?.name}</td>
|
</tr>
|
<tr>
|
<td style={{ width: '200px' }}><strong>监理单位：</strong></td>
|
<td style={{ textAlign: 'left' }}>{project?.supervisorCompanyInfo?.name}</td>
|
</tr>
|
</tbody>
|
</table>
|
<div>
|
<div><strong>项目评分趋势</strong></div>
|
<LineChart data={evalScores} />
|
</div>
|
</div>
|
</Modal>
|
</div>
|
);
|
}
|
}
|
|
//导出地图组建类
|
export default MapComponent;
|
