|
|
@@ -1,5 +1,5 @@
|
|
|
import React, { PureComponent } from "react";
|
|
|
-import { Map, DrawingManager } from "react-bmapgl";
|
|
|
+import { Map, DrawingManager, CustomOverlay } from "react-bmapgl";
|
|
|
import { styleJson } from "./BMapConfig";
|
|
|
import styled from "styled-components";
|
|
|
import Project, { IconType } from "../../Map/Project";
|
|
|
@@ -8,6 +8,7 @@ import MockData, {
|
|
|
PipeData,
|
|
|
ShowIconType,
|
|
|
WaterWorks,
|
|
|
+ pipeTipData,
|
|
|
} from "../../Map/MockData";
|
|
|
import Legend from "../../Map/Legend";
|
|
|
import DrawDom from "./DrawDom";
|
|
|
@@ -35,38 +36,38 @@ class BMap extends PureComponent {
|
|
|
|
|
|
componentDidMount() {
|
|
|
// this.initData();
|
|
|
- // var styleOptions = {
|
|
|
- // strokeColor: "#5E87DB", // 边线颜色
|
|
|
- // fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
|
|
|
- // strokeWeight: 2, // 边线宽度，以像素为单位
|
|
|
- // strokeOpacity: 1, // 边线透明度，取值范围0-1
|
|
|
- // fillOpacity: 0.2, // 填充透明度，取值范围0-1
|
|
|
- // };
|
|
|
- // var labelOptions = {
|
|
|
- // borderRadius: "2px",
|
|
|
- // background: "#FFFBCC",
|
|
|
- // border: "1px solid #E1E1E1",
|
|
|
- // color: "#703A04",
|
|
|
- // fontSize: "12px",
|
|
|
- // letterSpacing: "0",
|
|
|
- // padding: "5px",
|
|
|
- // };
|
|
|
- // // 实例化鼠标绘制工具
|
|
|
- // this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
|
|
|
- // // isOpen: true, // 是否开启绘制模式
|
|
|
- // enableCalculate: false, // 绘制是否进行测距测面
|
|
|
- // enableSorption: true, // 是否开启边界吸附功能
|
|
|
- // sorptiondistance: 20, // 边界吸附距离
|
|
|
- // circleOptions: styleOptions, // 圆的样式
|
|
|
- // polylineOptions: styleOptions, // 线的样式
|
|
|
- // polygonOptions: styleOptions, // 多边形的样式
|
|
|
- // rectangleOptions: styleOptions, // 矩形的样式
|
|
|
- // labelOptions: labelOptions, // label样式
|
|
|
- // });
|
|
|
- // this.drawingManager.addEventListener(
|
|
|
- // "polylinecomplete",
|
|
|
- // this.polylinecomplete
|
|
|
- // );
|
|
|
+ var styleOptions = {
|
|
|
+ strokeColor: "#5E87DB", // 边线颜色
|
|
|
+ fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
|
|
|
+ strokeWeight: 2, // 边线宽度，以像素为单位
|
|
|
+ strokeOpacity: 1, // 边线透明度，取值范围0-1
|
|
|
+ fillOpacity: 0.2, // 填充透明度，取值范围0-1
|
|
|
+ };
|
|
|
+ var labelOptions = {
|
|
|
+ borderRadius: "2px",
|
|
|
+ background: "#FFFBCC",
|
|
|
+ border: "1px solid #E1E1E1",
|
|
|
+ color: "#703A04",
|
|
|
+ fontSize: "12px",
|
|
|
+ letterSpacing: "0",
|
|
|
+ padding: "5px",
|
|
|
+ };
|
|
|
+ // 实例化鼠标绘制工具
|
|
|
+ this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
|
|
|
+ // isOpen: true, // 是否开启绘制模式
|
|
|
+ enableCalculate: false, // 绘制是否进行测距测面
|
|
|
+ enableSorption: true, // 是否开启边界吸附功能
|
|
|
+ sorptiondistance: 20, // 边界吸附距离
|
|
|
+ circleOptions: styleOptions, // 圆的样式
|
|
|
+ polylineOptions: styleOptions, // 线的样式
|
|
|
+ polygonOptions: styleOptions, // 多边形的样式
|
|
|
+ rectangleOptions: styleOptions, // 矩形的样式
|
|
|
+ labelOptions: labelOptions, // label样式
|
|
|
+ });
|
|
|
+ this.drawingManager.addEventListener(
|
|
|
+ "polylinecomplete",
|
|
|
+ this.polylinecomplete
|
|
|
+ );
|
|
|
}
|
|
|
polylinecomplete(e, overlay) {
|
|
|
console.log(e.getPath().length);
|
|
|
@@ -136,6 +137,15 @@ class BMap extends PureComponent {
|
|
|
return list;
|
|
|
}
|
|
|
|
|
|
+ renderTip(data) {
|
|
|
+ const { name, position } = data;
|
|
|
+ return (
|
|
|
+ <CustomOverlay position={position}>
|
|
|
+ <div style={{ color: "yellow" }}>{name}</div>
|
|
|
+ </CustomOverlay>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
render() {
|
|
|
const { MockData, active, data } = this.state;
|
|
|
return (
|
|
|
@@ -195,8 +205,9 @@ class BMap extends PureComponent {
|
|
|
})
|
|
|
);
|
|
|
})}
|
|
|
+ {pipeTipData.map((item) => this.renderTip(item))}
|
|
|
</Map>
|
|
|
- {/* <DrawDom draw={this.draw} /> */}
|
|
|
+ <DrawDom draw={this.draw} />
|
|
|
<Legend
|
|
|
list={[...data, { type: -1, name: "全部" }]}
|
|
|
active={active}
|
