test

src/components/centerPage/charts/BMap.js

@@ -1,27 +1,84 @@
 import React, { PureComponent } from "react";
-import { Map, Marker, NavigationControl, InfoWindow } from "react-bmapgl";
+import {
+  Map,
+  Marker,
+  NavigationControl,
+  InfoWindow,
+  Polygon,
+  CustomOverlay,
+  Arc,
+} from "react-bmapgl";
 import { styleJson } from "./BMapConfig";
 import styled from "styled-components";
+const BMapGL = window.BMapGL;
+
+function DOM() {
+  return (
+    <div
+      className="custom"
+      style={{
+        width: 40,
+        height: 40,
+        borderRadius: "20px",
+        background: "rgba(222, 0, 0, 0.8)",
+      }}
+    >
+      <span style={{ color: "#fff" }}>DOM</span>
+    </div>
+  );
+}
 
 class BMap extends PureComponent {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      visible: false,
+      position: { lng: 116.35, lat: 39.88 },
+      icon: require("../../../assets/images/center-details-data1.png"),
+    };
+    this.randomParams = this.randomParams.bind(this);
   }
   bmap = 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);
+  }
 
   render() {
     return (
       <BMapBox>
         <Map
-          
+          ref={(ref) => {
+            console.log("=========================", ref);
+            this.bmap = ref?.map;
+          }}
           style={{
             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={{
@@ -29,13 +86,95 @@ class BMap extends PureComponent {
           }}
           enableScrollWheelZoom
         >
+          <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
+          />
+          <CustomOverlay position={{ lng: 116.35, lat: 40.01 }}>
+            {/* <DOM /> */}
+            <Icon onClick={() => this.setState({ visible: true })}>泵站</Icon>
+          </CustomOverlay>
+          <Marker
+            position={this.state.position}
+            icon={this.state.icon}
+            onClick={this.randomParams}
+            autoViewport
+            viewportOptions={{
+              zoomFactor: -12,
+            }}
+          />
           {/* <Marker position={{ lng: 116.402544, lat: 39.928216 }} /> */}
           {/* <NavigationControl /> */}
-          {/* <InfoWindow
-          position={{ lng: 116.402544, lat: 39.928216 }}
-          text="内容"
-          title="标题"
-        /> */}
+          {this.state.visible && (
+            <InfoWindow
+              position={{ lng: 116.402544, lat: 39.928216 }}
+              text="内容"
+              title="标题"
+              onClose={() => {
+                this.setState({ visible: false });
+              }}
+            />
+          )}
+          <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>
     );
@@ -51,4 +190,14 @@ const BMapBox = styled.div`
   z-index: 1;
 `;
 
+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;