扩展库

扩展库均基于百度开源库实现。

注意

以下属性表格中Size均为字面量{ width, height }Point均为字面量{ lng, lat },Enum均为对应常量。

MarkerClusterer-点聚合

属性类型描述
gridSizenumber网格大小
maxZoomnumber聚合的最大缩放级别
minClusterSizenumber单个聚合的最小数量
stylesArray聚合样式的风格集合
averageCenterboolean单个聚合的落脚点是否是聚合内所有标记的平均中心
import React from "react";
import { render } from "react-dom";
import { Map, Marker, MarkerClusterer } from "rc-bmap";

const points = [
  { lng: 116.418261, lat: 39.921984 },
  { lng: 116.423332, lat: 39.916532 },
  { lng: 116.419787, lat: 39.930658 },
  { lng: 116.418455, lat: 39.920921 },
  { lng: 116.418843, lat: 39.915516 },
  { lng: 116.42546, lat: 39.918503 },
  { lng: 116.423289, lat: 39.919989 },
  { lng: 116.418162, lat: 39.915051 },
  { lng: 116.422039, lat: 39.91782 },
  { lng: 116.41387, lat: 39.917253 },
  { lng: 116.41773, lat: 39.919426 },
  { lng: 116.421107, lat: 39.916445 },
  { lng: 116.417521, lat: 39.917943 },
  { lng: 116.419812, lat: 39.920836 },
  { lng: 116.420682, lat: 39.91463 },
  { lng: 116.415424, lat: 39.924675 },
  { lng: 116.419242, lat: 39.914509 },
  { lng: 116.422766, lat: 39.921408 },
  { lng: 116.421674, lat: 39.924396 },
  { lng: 116.427268, lat: 39.92267 },
  { lng: 116.417721, lat: 39.920034 },
  { lng: 116.412456, lat: 39.92667 },
  { lng: 116.420432, lat: 39.919114 },
  { lng: 116.425013, lat: 39.921611 },
  { lng: 116.418733, lat: 39.931037 },
  { lng: 116.419336, lat: 39.931134 },
  { lng: 116.413557, lat: 39.923254 },
  { lng: 116.418367, lat: 39.92943 },
  { lng: 116.424312, lat: 39.919621 },
  { lng: 116.423874, lat: 39.919447 },
  { lng: 116.424225, lat: 39.923091 },
  { lng: 116.417801, lat: 39.921854 },
  { lng: 116.417129, lat: 39.928227 },
  { lng: 116.426426, lat: 39.922286 },
  { lng: 116.421597, lat: 39.91948 },
  { lng: 116.423895, lat: 39.920787 },
  { lng: 116.423563, lat: 39.921197 },
  { lng: 116.417982, lat: 39.922547 },
  { lng: 116.426126, lat: 39.921938 },
  { lng: 116.42326, lat: 39.915782 },
  { lng: 116.419239, lat: 39.916759 },
  { lng: 116.417185, lat: 39.929123 },
  { lng: 116.417237, lat: 39.927518 },
  { lng: 116.417784, lat: 39.915754 },
  { lng: 116.420193, lat: 39.917061 },
  { lng: 116.422735, lat: 39.915619 },
  { lng: 116.418495, lat: 39.915958 },
  { lng: 116.416292, lat: 39.931166 },
  { lng: 116.419916, lat: 39.924055 },
  { lng: 116.42189, lat: 39.921308 },
  { lng: 116.413765, lat: 39.929376 },
  { lng: 116.418232, lat: 39.920348 },
  { lng: 116.417554, lat: 39.930511 },
  { lng: 116.418568, lat: 39.918161 },
  { lng: 116.413461, lat: 39.926306 },
  { lng: 116.42232, lat: 39.92161 },
  { lng: 116.4174, lat: 39.928616 },
  { lng: 116.424679, lat: 39.915499 },
  { lng: 116.42171, lat: 39.915738 },
  { lng: 116.417836, lat: 39.916998 },
  { lng: 116.420755, lat: 39.928001 },
  { lng: 116.414077, lat: 39.930655 },
  { lng: 116.426092, lat: 39.922995 },
  { lng: 116.41535, lat: 39.931054 },
  { lng: 116.413022, lat: 39.921895 },
  { lng: 116.415551, lat: 39.913373 },
  { lng: 116.421191, lat: 39.926572 },
  { lng: 116.419612, lat: 39.917119 },
  { lng: 116.418237, lat: 39.921337 },
  { lng: 116.423776, lat: 39.921919 },
  { lng: 116.417694, lat: 39.92536 },
  { lng: 116.415377, lat: 39.914137 },
  { lng: 116.417434, lat: 39.914394 },
  { lng: 116.42588, lat: 39.922622 },
  { lng: 116.418345, lat: 39.919467 },
  { lng: 116.426883, lat: 39.917171 },
  { lng: 116.423877, lat: 39.916659 },
  { lng: 116.415712, lat: 39.915613 },
  { lng: 116.419869, lat: 39.931416 },
  { lng: 116.416956, lat: 39.925377 },
  { lng: 116.42066, lat: 39.925017 },
  { lng: 116.416244, lat: 39.920215 },
  { lng: 116.41929, lat: 39.915908 },
  { lng: 116.422116, lat: 39.919658 },
  { lng: 116.4183, lat: 39.925015 },
  { lng: 116.421969, lat: 39.913527 },
  { lng: 116.422936, lat: 39.921854 },
  { lng: 116.41905, lat: 39.929217 },
  { lng: 116.424579, lat: 39.914987 },
  { lng: 116.42076, lat: 39.915251 },
  { lng: 116.425867, lat: 39.918989 }
];

render(
  <Map ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv" scrollWheelZoom>
    <MarkerClusterer averageCenter>
      {points.map((item, index) => {
        return <Marker key={index} point={item} />;
      })}
    </MarkerClusterer>
  </Map>,
  document.getElementById("app")
);

CurveLine-抛物线

CurveLine的属性与Polyline类似。

属性类型描述
pointsArray[Point]构成弧线的关键点
strokeColorstring弧线颜色
strokeWeightnumber弧线的宽度,以像素为单位
strokeOpacitynumber构成弧线的透明度
strokeStylestring弧线的样式,solid 或 dashed
massClearboolean是否在调用 map.clearOverlays 清除此覆盖物
clickingboolean是否响应点击事件
editingboolean是否启用编辑
import React from "react";
import { render } from "react-dom";
import { Map, CurveLine } from "rc-bmap";

const points = [
  { lng: 116.432045, lat: 39.910683 },
  { lng: 120.129721, lat: 30.314429 },
  { lng: 121.491121, lat: 25.127053 }
];

const events = {
  click() {
    console.log("CurveLine click");
  }
};

render(
  <Map ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv" scrollWheelZoom zoom={6}>
    <CurveLine
      points={points}
      strokeColor="blue"
      strokeWeight={3}
      strokeOpacity={0.5}
      editing
      events={events}
    />
  </Map>,
  document.getElementById("app")
);

DrawingManager-绘制工具

属性类型描述
anchorEnum绘制工具停靠位置
offsetSize工具停靠偏移值
drawingModesArray[Enum]绘制工具支持绘制的图形,从常量-DrawingMode 取值
circleOptionsobject所画的圆的可选参数,参考CircleOptions
polylineOptionsobject所画的点的可选参数,参考CircleOptions
markerOptionsobject所画的点的可选参数,参考CircleOptions
polygonOptionsobject所画的点的可选参数,参考PolygonOptions
rectangleOptionsobject所画的点的可选参数,参考PolygonOptions
eventsobject绑定事件

事件:

事件名描述
circlecomplete绘制圆完成事件
markercomplete绘制点完成事件
overlaycomplete鼠标绘制完成事件
polygoncomplete绘制多边形完成事件
polylinecomplete绘制线完成事件
rectanglecomplete绘制矩形完成事件
import React from "react";
import { render } from "react-dom";
import { Map, DrawingManager, DrawingMode } from "rc-bmap";

const events = {
  circlecomplete(e, overlay) {
    console.log(overlay);
  }
};

const offset = {
  width: 10,
  height: 10
};

const drawingModes = [DrawingMode.MARKER, DrawingMode.CIRCLE];

render(
  <Map ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv" scrollWheelZoom zoom={6}>
    <DrawingManager
      events={events}
      offset={offset}
      drawingModes={drawingModes}
    />
  </Map>,
  document.getElementById("app")
);

Heatmap-热力图

属性类型描述
pointsArray[Point]热力图集合点
opacitynumber透明度
maxnumber权重最大值
radiusnumber热力圆半径
gradientobject热力图渐变区间,如: {.5:'rgb(0, 110, 255)',.8:'rgb(100, 0, 255)'},其中 key 表示插值的位置,取值范围 0 ~ 1,value 为颜色值。

WARNING

这里的 Point 相比以往需多传递一个 count 值, 即{ lng, lat, count }

import React from "react";
import { render } from "react-dom";
import { Map, Heatmap } from "rc-bmap";

const points = [
  { lng: 116.418261, lat: 39.921984, count: 50 },
  { lng: 116.423332, lat: 39.916532, count: 51 },
  { lng: 116.419787, lat: 39.930658, count: 15 },
  { lng: 116.418455, lat: 39.920921, count: 40 },
  { lng: 116.418843, lat: 39.915516, count: 100 },
  { lng: 116.42546, lat: 39.918503, count: 6 },
  { lng: 116.423289, lat: 39.919989, count: 18 },
  { lng: 116.418162, lat: 39.915051, count: 80 },
  { lng: 116.422039, lat: 39.91782, count: 11 },
  { lng: 116.41387, lat: 39.917253, count: 7 },
  { lng: 116.41773, lat: 39.919426, count: 42 },
  { lng: 116.421107, lat: 39.916445, count: 4 },
  { lng: 116.417521, lat: 39.917943, count: 27 },
  { lng: 116.419812, lat: 39.920836, count: 23 },
  { lng: 116.420682, lat: 39.91463, count: 60 },
  { lng: 116.415424, lat: 39.924675, count: 8 },
  { lng: 116.419242, lat: 39.914509, count: 15 },
  { lng: 116.422766, lat: 39.921408, count: 25 },
  { lng: 116.421674, lat: 39.924396, count: 21 },
  { lng: 116.427268, lat: 39.92267, count: 1 },
  { lng: 116.417721, lat: 39.920034, count: 51 },
  { lng: 116.412456, lat: 39.92667, count: 7 },
  { lng: 116.420432, lat: 39.919114, count: 11 },
  { lng: 116.425013, lat: 39.921611, count: 35 },
  { lng: 116.418733, lat: 39.931037, count: 22 },
  { lng: 116.419336, lat: 39.931134, count: 4 },
  { lng: 116.413557, lat: 39.923254, count: 5 },
  { lng: 116.418367, lat: 39.92943, count: 3 },
  { lng: 116.424312, lat: 39.919621, count: 100 },
  { lng: 116.423874, lat: 39.919447, count: 87 },
  { lng: 116.424225, lat: 39.923091, count: 32 },
  { lng: 116.417801, lat: 39.921854, count: 44 },
  { lng: 116.417129, lat: 39.928227, count: 21 },
  { lng: 116.426426, lat: 39.922286, count: 80 },
  { lng: 116.421597, lat: 39.91948, count: 32 },
  { lng: 116.423895, lat: 39.920787, count: 26 },
  { lng: 116.423563, lat: 39.921197, count: 17 },
  { lng: 116.417982, lat: 39.922547, count: 17 },
  { lng: 116.426126, lat: 39.921938, count: 25 },
  { lng: 116.42326, lat: 39.915782, count: 100 },
  { lng: 116.419239, lat: 39.916759, count: 39 },
  { lng: 116.417185, lat: 39.929123, count: 11 },
  { lng: 116.417237, lat: 39.927518, count: 9 },
  { lng: 116.417784, lat: 39.915754, count: 47 },
  { lng: 116.420193, lat: 39.917061, count: 52 },
  { lng: 116.422735, lat: 39.915619, count: 100 },
  { lng: 116.418495, lat: 39.915958, count: 46 },
  { lng: 116.416292, lat: 39.931166, count: 9 },
  { lng: 116.419916, lat: 39.924055, count: 8 },
  { lng: 116.42189, lat: 39.921308, count: 11 },
  { lng: 116.413765, lat: 39.929376, count: 3 },
  { lng: 116.418232, lat: 39.920348, count: 50 },
  { lng: 116.417554, lat: 39.930511, count: 15 },
  { lng: 116.418568, lat: 39.918161, count: 23 },
  { lng: 116.413461, lat: 39.926306, count: 3 },
  { lng: 116.42232, lat: 39.92161, count: 13 },
  { lng: 116.4174, lat: 39.928616, count: 6 },
  { lng: 116.424679, lat: 39.915499, count: 21 },
  { lng: 116.42171, lat: 39.915738, count: 29 },
  { lng: 116.417836, lat: 39.916998, count: 99 },
  { lng: 116.420755, lat: 39.928001, count: 10 },
  { lng: 116.414077, lat: 39.930655, count: 14 },
  { lng: 116.426092, lat: 39.922995, count: 16 },
  { lng: 116.41535, lat: 39.931054, count: 15 },
  { lng: 116.413022, lat: 39.921895, count: 13 },
  { lng: 116.415551, lat: 39.913373, count: 17 },
  { lng: 116.421191, lat: 39.926572, count: 1 },
  { lng: 116.419612, lat: 39.917119, count: 9 },
  { lng: 116.418237, lat: 39.921337, count: 54 },
  { lng: 116.423776, lat: 39.921919, count: 26 },
  { lng: 116.417694, lat: 39.92536, count: 17 },
  { lng: 116.415377, lat: 39.914137, count: 19 },
  { lng: 116.417434, lat: 39.914394, count: 43 },
  { lng: 116.42588, lat: 39.922622, count: 27 },
  { lng: 116.418345, lat: 39.919467, count: 8 },
  { lng: 116.426883, lat: 39.917171, count: 3 },
  { lng: 116.423877, lat: 39.916659, count: 34 },
  { lng: 116.415712, lat: 39.915613, count: 14 },
  { lng: 116.419869, lat: 39.931416, count: 12 },
  { lng: 116.416956, lat: 39.925377, count: 11 },
  { lng: 116.42066, lat: 39.925017, count: 38 },
  { lng: 116.416244, lat: 39.920215, count: 91 },
  { lng: 116.41929, lat: 39.915908, count: 54 },
  { lng: 116.422116, lat: 39.919658, count: 21 },
  { lng: 116.4183, lat: 39.925015, count: 15 },
  { lng: 116.421969, lat: 39.913527, count: 3 },
  { lng: 116.422936, lat: 39.921854, count: 24 },
  { lng: 116.41905, lat: 39.929217, count: 12 },
  { lng: 116.424579, lat: 39.914987, count: 57 },
  { lng: 116.42076, lat: 39.915251, count: 70 },
  { lng: 116.425867, lat: 39.918989, count: 8 }
];

render(
  <Map ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv" scrollWheelZoom>
    <Heatmap points={points} radius={20} max={100} />
  </Map>,
  document.getElementById("app")
);

TrafficControl-路况控件

属性类型描述
anchorEnum控件停靠位置
import React from "react";
import { render } from "react-dom";
import { Map, TrafficControl, ControlAnchor } from "rc-bmap";

render(
  <Map ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv" scrollWheelZoom>
    <TrafficControl anchor={ControlAnchor.BOTTOM_RIGHT} />
  </Map>,
  document.getElementById("app")
);

DistanceTool-测距工具

属性类型描述
followTextstring测距过程中,提示框文字
unitstring测距结果所用的单位制,可接受的属性为"metric"表示米制和"us"表示美国传统单位,
lineColorstring折线颜色
lineStrokestring折线宽度
opacitystring透明度
lineStylestring折线的样式,只可设置 solid 和 dashed
cursorstring跟随的鼠标样式

事件:

事件名描述
onaddpoint测距过程中,每次点击底图添加节点时触发
ondrawend测距时,每次双击底图结束当前测距折线时触发
import React from "react";
import { render } from "react-dom";
import { Map, DistanceTool } from "rc-bmap";

let tool;
const getTool = instance => {
  tool = instance;
};

const mapMounted = map => {
  tool.open(); // 开启测距状态
  // tool.close(); // 关闭测距状态
};

const events = {
  onaddpoint() {
    console.log("on add");
  }
};

render(
  <Map
    ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv"
    scrollWheelZoom
    mapMounted={mapMounted}
  >
    <DistanceTool getInstance={getTool} events={events} />
  </Map>,
  document.getElementById("app")
);