Merge branch 'master' of http://120.55.44.4:10080/xujunjie/BigScreen

src/components/centerPage/charts/BMap.js

@@ -1,11 +1,14 @@
 import React, { PureComponent } from "react";
 import {
   Map,
+  Marker,
   Polyline,
   Label,
   CustomOverlay,
   NavigationControl,
   InfoWindow,
+  Polygon,
+  Arc,
 } from "react-bmapgl";
 import { styleJson } from "./BMapConfig";
 import styled from "styled-components";
@@ -15,11 +18,39 @@ const { BMapGL, BMapGLLib } = window;
 class BMap extends PureComponent {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      position: { lng: 116.35, lat: 39.88 },
+      icon: require("../../../assets/images/center-details-data1.png"),
+    };
+    this.randomParams = this.randomParams.bind(this);
   }
   map = null;
 
-  componentDidMount() {}
+  componentDidMount() {
+    // var lineLayer = new BMapGL.LineRainbowLayer({
+    //   style: "road", // road, arrow, normal
+    //   width: 15,
+    //   color: ["#ff0", "#fd0", "#f90", "#f00"],
+    //   data: [
+    //     {
+    //       geometry: {
+    //         type: "LineString",
+    //         coordinates: [
+    //           [106.46511, 29.57895],
+    //           [106.47775, 29.5885],
+    //           [106.47933, 29.59642],
+    //           [106.48825, 29.6091],
+    //         ],
+    //       },
+    //     },
+    //   ],
+    // });
+    // if (this.bmap) this.bmap.addNormalLayer(lineLayer);
+  }
+
+  randomParams(e) {
+    console.log(e);
+  }
 
   handleClick(e) {
     this.boundary();
@@ -81,7 +112,7 @@ class BMap extends PureComponent {
             width: "100%",
             height: "100%",
           }}
-          center={{ lng: 116.402544, lat: 39.928216 }}
+          center={new BMapGL.Point(116.402544, 39.928216)} //{ lng: 116.402544, lat: 39.928216 }
           minZoom={11}
           zoom={11}
           mapStyleV2={{
@@ -90,6 +121,43 @@ class BMap extends PureComponent {
           enableScrollWheelZoom
           onClick={(e) => this.handleClick(e)}
         >
+          <Polygon
+            path={[
+              { lng: 116.24721748495391, lat: 39.796737802722014 },
+              { lng: 116.322837465736, lat: 39.78383959531996 },
+              { lng: 116.39845744651808, lat: 39.77093895027502 },
+              { lng: 116.53865456380538, lat: 39.74764618546205 },
+              { lng: 116.67885168109265, lat: 39.724345479834405 },
+              { lng: 116.68690049846205, lat: 39.924723760492924 },
+              { lng: 116.69494931583147, lat: 40.12451264487721 },
+              { lng: 116.5466211100239, lat: 40.15672410636046 },
+              { lng: 116.39829290421633, lat: 40.18892017402776 },
+              { lng: 116.25916334683096, lat: 40.169957230404016 },
+              { lng: 116.12003378944557, lat: 40.150988945208915 },
+              { lng: 116.13440667760521, lat: 40.04060244030742 },
+              { lng: 116.14877956576487, lat: 39.930035509314486 },
+              { lng: 116.19799852535938, lat: 39.8634192849549 },
+              { lng: 116.24721748495391, lat: 39.796737802722014 },
+            ]}
+            strokeColor="#55636A"
+            strokeWeight={2}
+            fillColor="#0ab8d9"
+            fillOpacity={0.3}
+            onMouseover={(e) => {
+              console.log(e);
+            }}
+            // enableEditing
+          />
+          <Marker
+            position={this.state.position}
+            icon={this.state.icon}
+            onClick={this.randomParams}
+            autoViewport
+            viewportOptions={{
+              zoomFactor: -12,
+            }}
+          />
+          {/* <Marker position={{ lng: 116.402544, lat: 39.928216 }} /> */}
           <Project position={{ lng: 116.402544, lat: 39.928216 }} />
           <Label
             position={new BMapGL.Point(116.322544, 39.910216)}
@@ -111,11 +179,43 @@ class BMap extends PureComponent {
           <Project position={{ lng: 116.202544, lat: 39.908216 }} />
 
           {/* <NavigationControl /> */}
-          {/* <InfoWindow
-          position={{ lng: 116.402544, lat: 39.928216 }}
-          text="内容"
-          title="标题"
-        /> */}
+          {/* <Arc
+            autoViewport
+            showStartPoint
+            showEndPoint
+            enableAnimation
+            data={[
+              {
+                from: {
+                  point: { lng: 116.35, lat: 40.01 },
+                },
+                to: {
+                  point: { lng: 116.24721748495391, lat: 39.796737802722014 },
+                },
+              },
+              {
+                color: "#392",
+                from: {
+                  city: "北京",
+                  point: { lng: 116.35, lat: 40.01 },
+                },
+                to: {
+                  name: "哈哈",
+                  point: { lng: 116.53865456380538, lat: 39.74764618546205 },
+                },
+              },
+              {
+                from: {
+                  city: "北京",
+                  point: { lng: 116.35, lat: 40.01 },
+                },
+                to: {
+                  city: "成都",
+                  point: { lng: 116.39829290421633, lat: 40.18892017402776 },
+                },
+              },
+            ]}
+          /> */}
         </Map>
       </BMapBox>
     );
@@ -131,13 +231,14 @@ const BMapBox = styled.div`
   z-index: 1;
 `;
 
-// 开发工具
-const UtilsBox = styled.div`
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  padding: 10px;
-  border: 1px solid #fff;
+const Icon = styled.div`
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  background-color: rgba(222, 0, 0, 0.8);
+  text-align: ceter;
+  line-height: 40px;
+  color: #fff;
 `;
 
 export default BMap;