分层组件

src/components/Map/Legend.js

@@ -2,12 +2,17 @@
 import styled from "styled-components";
 
 function Legend(props) {
-  const { list, style } = props;
+  const { list, style, active, onClick } = props;
 
   return (
     <Box style={style}>
       {list.map((item) => (
-        <Item>{item}</Item>
+        <Item
+          onClick={() => onClick(item.type)}
+          className={`${active == item.type ? "active" : ""}`}
+        >
+          {item.name}
+        </Item>
       ))}
     </Box>
   );
@@ -23,6 +28,7 @@ const Box = styled.ul`
   font-size: 16px;
   top: 100px;
   text-align: center;
+  left: 26vw;
 `;
 const Item = styled.li`
   margin: 0;

src/components/Map/MockData.js

@@ -11,7 +11,7 @@ export default [
     data: [
       {
         name: "第一水厂",
-        position: { lng: 116.442544, lat: 39.918216 },
+        position: { lng: 116.342544, lat: 39.918216 },
         data: [
           {
             type: ItemType.progressBar,
@@ -38,7 +38,7 @@ export default [
       },
       {
         name: "第二水厂",
-        position: { lng: 116.422544, lat: 39.958216 },
+        position: { lng: 116.322544, lat: 39.958216 },
         data: [
           {
             type: ItemType.progressBar,
@@ -65,7 +65,7 @@ export default [
       },
       {
         name: "第三水厂",
-        position: { lng: 116.452544, lat: 39.978216 },
+        position: { lng: 116.492544, lat: 39.978216 },
         data: [
           {
             type: ItemType.progressBar,
@@ -98,7 +98,7 @@ export default [
     data: [
       {
         name: "第一泵站",
-        position: { lng: 116.432544, lat: 39.898216 },
+        position: { lng: 116.332544, lat: 39.898216 },
         data: [
           {
             type: ItemType.pump,
@@ -156,7 +156,7 @@ export default [
     data: [
       {
         name: "第一泵站",
-        position: { lng: 116.464544, lat: 39.938216 },
+        position: { lng: 116.394544, lat: 39.938216 },
         data: [
           {
             name: "出水COD",
@@ -184,7 +184,7 @@ export default [
     data: [
       {
         name: "XX物业公司",
-        position: { lng: 116.414544, lat: 39.908216 },
+        position: { lng: 116.314544, lat: 39.908216 },
         data: [
           {
             name: "出水COD",
@@ -212,7 +212,8 @@ export default [
     data: [
       {
         name: "XX区域",
-        position: { lng: 116.404544, lat: 39.918216 },
+        current: "0.23m",
+        position: { lng: 116.304544, lat: 39.818216 },
         data: [
           {
             name: "液位",
@@ -229,15 +230,44 @@ export default [
   {
     type: 6,
     name: "流量",
-    data: [],
+    data: [
+      {
+        name: "水泵",
+        position: { lng: 116.424544, lat: 39.998216 },
+        data: [
+          {
+            name: "所在区域",
+            value: "XXXX",
+          },
+          {
+            name: "流量",
+            value: "1.3 m3/h",
+          },
+          {
+            name: "负责人",
+            value: "XXXX",
+          },
+          {
+            name: "电话",
+            value: "13811111111",
+          },
+        ],
+        points: [
+          { lng: 116.24721748495391, lat: 39.796737802722014 },
+          { lng: 116.322837465736, lat: 39.78383959531996 },
+          { lng: 116.424544, lat: 39.998216 },
+        ],
+      },
+    ],
   },
   {
     type: 7,
     name: "降雨量",
+    current: "分钟级：0.2mm",
     data: [
       {
         name: "XX区域",
-        position: { lng: 116.464544, lat: 39.958216 },
+        position: { lng: 116.564544, lat: 39.998216 },
       },
     ],
   },
@@ -247,7 +277,7 @@ export default [
     data: [
       {
         name: "XX区域",
-        position: { lng: 116.434544, lat: 39.918216 },
+        position: { lng: 116.534544, lat: 39.848216 },
       },
     ],
   },
@@ -257,7 +287,7 @@ export default [
     data: [
       {
         name: "张三",
-        position: { lng: 116.434544, lat: 39.918216 },
+        position: { lng: 116.334544, lat: 39.748216 },
         data: [
           {
             name: "部门",
@@ -273,9 +303,9 @@ export default [
           },
         ],
         points: [
-          { lng: 116.24721748495391, lat: 39.796737802722014 },
-          { lng: 116.322837465736, lat: 39.78383959531996 },
-          { lng: 116.102544, lat: 39.748216 },
+          { lng: 116.65721748495391, lat: 39.796737802722014 },
+          { lng: 116.502837465736, lat: 39.78383959531996 },
+          { lng: 116.334544, lat: 39.748216 },
         ],
       },
     ],
@@ -286,7 +316,7 @@ export default [
     data: [
       {
         name: "抢修车01",
-        position: { lng: 116.434544, lat: 39.948216 },
+        position: { lng: 116.534544, lat: 39.848216 },
         data: [
           {
             name: "所在区域",
@@ -304,7 +334,7 @@ export default [
         points: [
           { lng: 116.44721748495391, lat: 39.816737802722014 },
           { lng: 116.452837465736, lat: 39.90383959531996 },
-          { lng: 116.434544, lat: 39.948216 },
+          { lng: 116.534544, lat: 39.848216 },
         ],
       },
     ],

src/components/Map/Project.js

@@ -66,10 +66,14 @@ class Project extends PureComponent {
   constructor(props) {
     super(props);
     this.state = { start: false, visible: false, flash: false };
-    this.icon = new BMapGL.Icon(
-      props.type == 1 ? imgCar : imgPerson,
-      new BMapGL.Size(30, 30)
-    );
+    let type = props.icon;
+    if (type == IconType.Car) {
+      this.icon = new BMapGL.Icon(imgCar, new BMapGL.Size(30, 30));
+    } else if (type == IconType.Person) {
+      this.icon = new BMapGL.Icon(imgPerson, new BMapGL.Size(30, 30));
+    } else if (type == IconType.WaterPump) {
+      this.icon = new BMapGL.Icon(imgWaterPump, new BMapGL.Size(30, 30));
+    }
   }
 
   startLushu() {

src/components/centerPage/charts/Map.js

@@ -136,23 +136,7 @@ class Map extends PureComponent {
         //   renderer={renderer}
         //   option={BMapOptions()}
         // />
-        <>
-          <BMap />
-          <Legend
-            list={[
-              "水厂",
-              "泵站",
-              "管网",
-              "大用户企业",
-              "大用户水表",
-              "内涝点",
-              "流量",
-              "雨量",
-              "视频",
-              "全部",
-            ]}
-          />
-        </>
+        <BMap />
       );
     }
   }