目录

• 百度地图 JavaScript API GL 地图聚合点、地图框选功能开发
• • 创建地图以及初始化交通流量图层
  • • BMapGL.Map
    • MapOptions
    • map.centerAndZoom() 对地图进行初始化
  • 设置地图元素
  • • displayOptions
  • 点覆盖物 (Marker)
  • • 使用自定义图片生成指定大小的 Marker，并且设置名称（label）
  • 信息窗体 (Infowindow)
  • • 关于 infowindow 自带的丑箭头以及立体阴影效果
  • 聚合点 (Cluster)
  • 热力图（heatmap）
  • 鼠标绘制工具
  • • 绘制（Draw）
    • 选择工具（Select）
    • 聚合点的框选

百度地图 JavaScript API GL 地图聚合点、地图框选功能开发

参考地址: 百度地图的开发者频道
注意：使用前要先登录百度账号申请一个浏览器端的 AK，详见 AK 申请

创建地图以及初始化交通流量图层

引用 GL 版本的 JS API：

初始化地图的 JavaScript 代码：

const map = new BMapGL.Map('map', {   // minZoom: 11,   // maxZoom: 20, }); map.centerAndZoom('武汉', 12, {   callback: () => {     // 一定要在回调中开启交通流量图层     map.setTrafficOn();   }, }); map.enableScrollWheelZoom(true); 

BMapGL.Map

BMapGL.Map 类是地图API的核心类，用来实例化一个地图。请注意 WebGL 版本的地图 API 的命名空间是BMapGL。

MapOptions

map.centerAndZoom() 对地图进行初始化

调用 new BMapGL.Map 之后需要使用 map.centerAndZoom() 对地图进行初始化，否则不能对地图进行任何操作。

入参：
centerAndZoom(center: Point , zoom: Number)

描述：
初始化地图，如果 center 的类型为 Point 时，zoom 必须赋值，范围 3-19 级，若调用高清底图（针对移动端开发）时，zoom 可赋值范围为 3-18 级。如果 center 类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据 center 适配最佳 zoom 级别。

设置地图元素

通过 map.setDisplayOptions({option: displayOptions }) 可以设置地图元素显隐。

displayOptions

点覆盖物 (Marker)

通过 Marker 构造函数可以根据经纬度在地图上生成各类的点覆盖物。

构造函数：Marker(point: Point , opts: MarkerOptions )

使用自定义图片生成指定大小的 Marker，并且设置名称（label）

示例：生成一个 32 * 47 像素的图片 Marker，并且将地图的中心点定位到点位的经纬度上。

map.centerAndZoom('武汉', 12, {   callback: () => {     // 构造一个包含经纬度和点位名称的数据     const data = {       lng: 114.32947483740818,       lat: 30.62295757673447,       name: '汉口江滩三期',     };      // 提前定义 Marker 的宽高     const width = 32;     const height = 47;      // 构造一个 Point 点位     const point = new BMapGL.Point(data.lng, data.lat);      // 构造一个 Marker     const marker = new BMapGL.Marker(point, {       icon: new BMapGL.Icon( // icon 接收一个 Icon 对象，通过 BMapGL.Icon 构造函数生成         '/marker-red.png', // 图标的绝对路径         new BMapGL.Size(width, height), // 图标的尺寸，通过 BMapGL.Size 构造函数生成         // Marker 的配置项，参考：         // https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html         {           // anchor 可以理解为要将图片的哪个坐标点位设置到对应的经纬度上，左上角为 (0,0) ，右下为正           // new BMapGL.Size(width / 2, height) 的意思就是将图片底边的中心点定到对应的经纬度上去           anchor: new BMapGL.Size(width / 2, height),           imageOffset: new BMapGL.Size(0, 0),           imageSize: new BMapGL.Size(width, height),         }       ),     });      // 设置 marker 的 z-index 层级     marker.setZIndex(2);      // 构造 label，参考：     // https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a3b8     const label = new BMapGL.Label(       // label 的 html       `data.name}">${data.name}`,        {         position: point,         // label 的偏移， (0,10) 代表向下偏移 10 像素         offset: new BMapGL.Size(0, 10),       }     );     // 使用 Object 对象描述 label 的样式     label.setStyle({       border: 0,       backgroundColor: 'rgba(0, 14, 17, 0.6)',       maxWidth: '120px',       // 使用 css 实现横向灵活居中而不是 offset       transform: 'translateX(-50%)',       whiteSpace: 'nowrap',       overflow: 'hidden',       textOverflow: 'ellipsis',       borderRadius: '4px',       padding: '2px 6px',       color: '#fff',       fontSize: '18px',     });     // 设置层级     label.setZIndex(2);     // 绑定 marker     marker.setLabel(label);     // 覆盖物上图     map.addOverlay(marker);     // 将地图定位到点位，并且设置层级为18     // noAnimation 设置为 true 可以取消 setViewport 的动画过程     map.setViewport(       {         center: point,         zoom: 18,       },       {         noAnimation: true,       }     );   }, }); map.enableScrollWheelZoom(true); 

信息窗体 (Infowindow)

通过构造函数生成infowindow对象并设置 HTML 内容：

// 构造 infowindow const infoWindowContent = `   
     
名称：${data.name}
     
位置：${data.lng},${data.lat}
   
   `; const infoWindow = new BMapGL.InfoWindow(infoWindowContent, {   title: '点位信息',   width: 360 }); // 点标记添加点击事件 marker.addEventListener('click', () => {   map.setViewport(     {       center: point,       zoom: 18,     },     {       noAnimation: true,       callback: () => {         map.openInfoWindow(infoWindow, point);         infoWindow.disableCloseOnClick();       },     }   ); }); 

关于 infowindow 自带的丑箭头以及立体阴影效果

百度地图渲染出的 infowindow 自带一个白色的箭头以及一个向右上方倾斜的阴影，如下图：

如果你不想要它，可以使用 css 隐藏自带箭头的图片元素以及自带的阴影，并自己用 css 写一个箭头，下面给一个简单的例子：

/* 隐藏箭头 */ img[src="http://webmap0.bdimg.com/image/api/iw_tail.png"] {   display: none; } /* 写一个普通箭头 */ .BMap_bubble_pop::after {   position: absolute;   top: 100%;   left: 50%;   content: '';   margin-left: -8px;   border-left: 8px solid transparent;   border-right: 8px solid transparent;   border-top: 8px solid #e4e4e4;   border-bottom: 8px solid transparent; } /* 隐藏阴影 */ .shadow[type='infowindow_shadow'] {   display: none; } 

聚合点 (Cluster)

BMapGL 中没有关于聚合点的渲染相关的类，那是因为百度将其放在了 MapVGL 中。

聚合点分为点聚合和图标聚合，如果想自定义不同聚合程度下的图标样式，推荐使用图标聚合 IconClusterLayer，代码参考官方示例即可。

热力图（heatmap）

热力图也是热力图分为 热力点 和 热力图，代码参考官方示例即可。

鼠标绘制工具

基于百度地图 JSAPI GL 版本，百度推出了 bmap-draw ，它提供了一系列 API 用于完成鼠标绘制的诸多功能，比如绘制矩形，圆形，多边形等。

绘制（Draw）

绘制类 用于鼠标绘制点线面，支持吸附绘制，是鼠标绘制的基础能力。开启之后鼠标会变成十字准星样式，按照提示操作鼠标即可完成图形的绘制。

选择工具（Select）

bmap-draw 提供了 Select 类用于地图中的 Marker 的框选，以 矩形框选 为例，配置项 type 设置为 DrawingType.DRAWING_RECTANGLE，基于绑定监听 OperateEventType.COMPLETE 事件，实现框选功能。

聚合点的框选

在 bmap-draw 的选择工具代码示例中可以看出选择工具默认支持的是 GeoJSONLayer 图层，也即点（marker）、线（polyline）、面（polygon），看起来似乎无法支持聚合图层的框选，但有时我们就是需要框选出地图上的聚合点，这时就需要使用百度推出的另一个工具 BMapGLLib。

BMapGLLib 是基于百度地图 JSAPI GL 版的 JavaScript 开源工具库。拥有一下能力：

1. 鼠标绘制工具条库 示例

   提供鼠标绘制点、线、面、多边形（矩形、圆）的编辑工具条的开源代码库。且用户可使用JavaScript API对应覆盖物（点、线、面等）类接口对其进行属性（如颜色、线宽等）设置、编辑（如开启线顶点编辑等）等功能。

2. 测距工具 示例

   百度地图的测距工具类，对外开放。 允许用户在地图上点击完成距离的测量。 使用者可以自定义测距线段的相关样式，例如线宽、颜色、测距结果所用的单位制等等。

3. 几何运算 示例

   GeoUtils类提供若干几何算法，用来帮助用户判断点与矩形、 圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。

4. 视角轨迹动画 示例

   TrackAnimation类提供视角轨迹动画展示效果。

5. 区域限制 示例

   百度地图浏览区域限制类，对外开放。 允许开发者输入限定浏览的地图区域的Bounds值， 则地图浏览者只能在限定区域内浏览地图。

6. 自定义信息窗口 顶部示例底部示例

   百度地图的infoBox。类似于infoWindow，比infoWindow更有灵活性，比如可以定制border，关闭按钮样式等。

7. 富标注 示例1示例2

   百度地图的富Marker类，对外开放。 允许用户在自定义丰富的Marker展现样式，并添加点击、双击、拖拽等事件。

8. 路书 示例

   百度地图路书类，实现Marker沿路线运动，对外开放。 用户可以在地图上自定义轨迹运动，支持暂停/停止功能，并可以自定义路过某个点的图片，文字介绍等。

下面是一个框选聚合点的完整示例：

                                                        
       圆形框选       矩形框选       多边形框选       关闭       清除     
     
           

其中有几个 API 比较关键，但是没找到具体的文档，只能从源码中获取相关信息：

1. iconClusterLayer.getClusterData

   该方法的入参为 Bound 和 Zoom，顾名思义是获取地图的聚合图层上对应的 Bound 和 Zoom 上所有的点，包括聚合点和普通点，一般情况下需要对返回值遍历判断类型

2. iconClusterLayer.getClusterPoints(id)

   通过聚合点的 id 获取聚合点下的所有的普通 marker 点的 geojson 数组。
   该方法的入参为聚合点的 geojson 数据的 id，在上面的 getClusterData 方法返回的聚合点数组中会返回。

3. BMapGLLib.GeoUtils.isPointInRect

   该方法判断一个点是否在一个矩形内

4. BMapGLLib.GeoUtils.isPointInPolygon

   该方法判断一个点是否在一个多边形内

5. BMapGLLib.GeoUtils.isPointInCircle

   该方法判断一个点是否在一个圆形内

over~