|
|
@@ -5,7 +5,7 @@ import { styleJson } from "./BMapConfig";
|
|
|
import styled from "styled-components";
|
|
|
import Project, { IconType } from "../../Map/Project";
|
|
|
import ArrowPolyline from "../../Map/ArrowPolyline";
|
|
|
-import MockData from "../../Map/MockData";
|
|
|
+import MockData, { PipeData, ShowIconType } from "../../Map/MockData";
|
|
|
import Legend from "../../Map/Legend";
|
|
|
const { BMapGL, BMapGLLib } = window;
|
|
|
|
|
|
@@ -18,6 +18,8 @@ class BMap extends PureComponent {
|
|
|
infoData: null,
|
|
|
MockData: [...MockData, { type: -1, name: "全部" }],
|
|
|
active: -1,
|
|
|
+
|
|
|
+ data: this.initData(),
|
|
|
};
|
|
|
this.randomParams = this.randomParams.bind(this);
|
|
|
// this.draw = this.draw.bind(this);
|
|
|
@@ -28,6 +30,7 @@ class BMap extends PureComponent {
|
|
|
lineLayer = null;
|
|
|
|
|
|
componentDidMount() {
|
|
|
+ // this.initData();
|
|
|
// var styleOptions = {
|
|
|
// strokeColor: "#5E87DB", // 边线颜色
|
|
|
// fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
|
|
|
@@ -86,8 +89,29 @@ class BMap extends PureComponent {
|
|
|
if (active == -1) {
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ showIcon(type) {
|
|
|
+ const { active } = this.state;
|
|
|
+ if (active == -1 || active == type) return true;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ initData() {
|
|
|
+ const { actives } = this.props;
|
|
|
+ //如果显示中有管网需要把官网去掉，然后增加供水管网和排水官网按钮
|
|
|
+ const list = MockData.filter(
|
|
|
+ (item) =>
|
|
|
+ this.props.actives.findIndex(
|
|
|
+ (cur) => cur == item.type && cur != ShowIconType.PipeNet
|
|
|
+ ) !== -1
|
|
|
+ );
|
|
|
+ if (actives.findIndex((item) => item == ShowIconType.PipeNet) !== -1)
|
|
|
+ return [...PipeData, ...list];
|
|
|
+ return list;
|
|
|
+ }
|
|
|
+
|
|
|
render() {
|
|
|
- const { MockData, active } = this.state;
|
|
|
+ const { MockData, active, data } = this.state;
|
|
|
return (
|
|
|
<BMapBox>
|
|
|
<Map
|
|
|
@@ -99,143 +123,55 @@ class BMap extends PureComponent {
|
|
|
height: "100%",
|
|
|
}}
|
|
|
center={new BMapGL.Point(116.402544, 39.928216)} //{ lng: 116.402544, lat: 39.928216 }
|
|
|
- minZoom={11}
|
|
|
+ minZoom={12}
|
|
|
zoom={11}
|
|
|
mapStyleV2={{
|
|
|
styleJson,
|
|
|
}}
|
|
|
enableScrollWheelZoom
|
|
|
>
|
|
|
- {/* 水厂 */}
|
|
|
- {(active == -1 || active === 0) &&
|
|
|
- MockData[0].data?.map((item, index) => (
|
|
|
- <Project
|
|
|
- key={`0_${index}`}
|
|
|
- title={item.name}
|
|
|
- position={item.position}
|
|
|
- data={item.data}
|
|
|
- icon={IconType.WaterWorks}
|
|
|
- />
|
|
|
- ))}
|
|
|
-
|
|
|
- {/* 泵站 */}
|
|
|
- {(active == -1 || active === 1) &&
|
|
|
- MockData[1].data?.map((item, index) => (
|
|
|
- <Project
|
|
|
- key={`1_${index}`}
|
|
|
- title={item.name}
|
|
|
- position={item.position}
|
|
|
- data={item.data}
|
|
|
- icon={IconType.Pump}
|
|
|
- />
|
|
|
- ))}
|
|
|
-
|
|
|
- {/* 管网 */}
|
|
|
- {(active == -1 || active === 2) &&
|
|
|
- MockData[2].data?.map((item, index) => (
|
|
|
- <ArrowPolyline
|
|
|
- key={`2_${index}`}
|
|
|
- points={item.position}
|
|
|
- strokeColor={item.strokeColor}
|
|
|
- strokeWeight={item.strokeWeight}
|
|
|
- fillColor={item.fillColor}
|
|
|
- fillOpacity={item.fillOpacity}
|
|
|
- />
|
|
|
- ))}
|
|
|
-
|
|
|
- {/* 大用户企业 */}
|
|
|
- {(active == -1 || active === 3) &&
|
|
|
- MockData[3].data?.map((item, index) => (
|
|
|
- <Project
|
|
|
- key={`3_${index}`}
|
|
|
- title={item.name}
|
|
|
- position={item.position}
|
|
|
- data={item.data}
|
|
|
- icon={IconType.Company}
|
|
|
- />
|
|
|
- ))}
|
|
|
-
|
|
|
- {/* 大用户水表 */}
|
|
|
- {(active == -1 || active === 4) &&
|
|
|
- MockData[4].data?.map((item, index) => (
|
|
|
- <Project
|
|
|
- key={`4_${index}`}
|
|
|
- title={item.name}
|
|
|
- position={item.position}
|
|
|
- data={item.data}
|
|
|
- icon={IconType.Company}
|
|
|
- />
|
|
|
- ))}
|
|
|
-
|
|
|
- {/* 内涝点 */}
|
|
|
- {(active == -1 || active === 5) &&
|
|
|
- MockData[5].data?.map((item, index) => (
|
|
|
- <Project
|
|
|
- key={`5_${index}`}
|
|
|
- title={item.current || item.name}
|
|
|
- position={item.position}
|
|
|
- data={item.data}
|
|
|
- icon={IconType.Water}
|
|
|
- />
|
|
|
- ))}
|
|
|
- {/* 流量 */}
|
|
|
- {(active == -1 || active === 6) &&
|
|
|
- MockData[6].data?.map((item, index) => (
|
|
|
- <Project
|
|
|
- key={`6_${index}`}
|
|
|
- showLushu={true}
|
|
|
- title={item.name}
|
|
|
- position={item.position}
|
|
|
- points={item.points}
|
|
|
- data={item.data}
|
|
|
- icon={IconType.WaterPump}
|
|
|
- />
|
|
|
- ))}
|
|
|
-
|
|
|
- {/* 降雨量 */}
|
|
|
- {(active == -1 || active === 7) &&
|
|
|
- MockData[7].data?.map((item, index) => (
|
|
|
- <Project
|
|
|
- key={`7_${index}`}
|
|
|
- title={item.current || item.name}
|
|
|
- position={item.position}
|
|
|
- data={item.data}
|
|
|
- icon={IconType.Rainfall}
|
|
|
- />
|
|
|
- ))}
|
|
|
- {/* TODO: 视频 */}
|
|
|
-
|
|
|
- {/* 人员 */}
|
|
|
- {(active == -1 || active === 9) &&
|
|
|
- MockData[9].data?.map((item, index) => (
|
|
|
- <Project
|
|
|
- key={`9_${index}`}
|
|
|
- showLushu={true}
|
|
|
- icon={IconType.Person}
|
|
|
- title={item.name}
|
|
|
- position={item.position}
|
|
|
- points={item.points}
|
|
|
- data={item.data}
|
|
|
- />
|
|
|
- ))}
|
|
|
-
|
|
|
- {/* 车辆 */}
|
|
|
- {(active == -1 || active === 10) &&
|
|
|
- MockData[10].data?.map((item, index) => (
|
|
|
- <Project
|
|
|
- key={`10_${index}`}
|
|
|
- showLushu={true}
|
|
|
- icon={IconType.Car}
|
|
|
- title={item.name}
|
|
|
- position={item.position}
|
|
|
- points={item.points}
|
|
|
- data={item.data}
|
|
|
- />
|
|
|
- ))}
|
|
|
+ {data.map((cur) => {
|
|
|
+ if (
|
|
|
+ cur.type == ShowIconType.InPipeNet ||
|
|
|
+ cur.type == ShowIconType.OutPipeNet
|
|
|
+ )
|
|
|
+ return (
|
|
|
+ this.showIcon(cur.type) &&
|
|
|
+ cur.data?.map((item, index) => (
|
|
|
+ <ArrowPolyline
|
|
|
+ key={`cur_${index}`}
|
|
|
+ points={item.position}
|
|
|
+ strokeColor={item.strokeColor}
|
|
|
+ strokeWeight={item.strokeWeight}
|
|
|
+ fillColor={item.fillColor}
|
|
|
+ fillOpacity={item.fillOpacity}
|
|
|
+ />
|
|
|
+ ))
|
|
|
+ );
|
|
|
+ return (
|
|
|
+ this.showIcon(cur.type) &&
|
|
|
+ cur?.data?.map((item, index) => {
|
|
|
+ let lushu = {};
|
|
|
+ if (item.points)
|
|
|
+ //是否可以展示运动轨迹
|
|
|
+ lushu = { showLushu: true, points: item.points };
|
|
|
+ return (
|
|
|
+ <Project
|
|
|
+ key={`${item}_${index}`}
|
|
|
+ title={item.name}
|
|
|
+ position={item.position}
|
|
|
+ data={item.data}
|
|
|
+ icon={cur.icon}
|
|
|
+ {...lushu}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ })
|
|
|
+ );
|
|
|
+ })}
|
|
|
</Map>
|
|
|
|
|
|
<Legend
|
|
|
- list={MockData}
|
|
|
+ list={[...data, { type: -1, name: "全部" }]}
|
|
|
active={active}
|
|
|
onClick={(active) => this.setState({ active: active })}
|
|
|
/>
|
