百度地图 - 绘制海量点

简介

在开发大屏项目时，要在地图上一次显示上万个点。为了页面的性能，我们不能绘制上万个标注来展示。
有两种实现方式：

在地图的最上层使用画布覆盖上去，在这个画布上根据地理坐标和像素转换绘制点。所有的控制都要自己判断。
通过百度地图覆盖物函数Overlay，实现自定义画布覆盖物，在画布覆盖物绘制点。地图放大、缩小、位移，的回调由地图控制。

这里讲解第二种方式实现。

覆盖物

所有通过map.addOverlay()，添加到地图上的内容都是覆盖物。如标注、矢量图形元素信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
它们都继承于Overlay，覆盖物的抽象基类。此类不可实例化。

自定义覆盖物

继承Overlay，通过基类实现自定义覆盖物函数。

initialize()，用于初始化覆盖物，当调用map.addOverlay时，API将调用此方法。
draw()，当地图状态发生变化时，由系统调用对覆盖物进行绘制。
show()，显示覆盖物。
hide()，隐藏覆盖物。

通过实例化new BMapGL.Overlay()。修改初始化方法initialize添加画布，并返回该画布。修改draw函数，确认画布绘制的位置、大小，根据点坐标转化为像素坐标，在对应位置绘制点。最后通过map.addOverlay()放入地图。

      /*** @param map 地图实例* @param pts 多个点坐标* */function customlayer(map, pts) {// 百度var layer = new BMapGL.Overlay()layer.initialize = function () {this._map = map// 创建画布元素并添加到图层容器中let cvs = document.createElement('canvas')// onMapClick(cvs)// getPanes() 返回地图覆盖物容器列表// markerPane 标注图标所在的容器 --添加这个画布map.getPanes().markerPane.appendChild(cvs)// 获取画布对象this._cvs = cvsreturn cvs}layer.draw = function () {// 设置svg/canvas的合适位置// getSize() 返回地图 视图的大小，以像素表示let size = this._map.getSize()// 返回地图当前中心点 经纬度let center = this._map.getCenter()// 获取地图中心点相对于图层的位置// pointToOverlayPixel() 根据地理坐标获取对应的覆盖物容器的坐标let rel_xy = this._map.pointToOverlayPixel(center)// 获取地图中心点的绝对位置// pointToPixel() 经纬度坐标转换为像素坐标let abs_xy = this._map.pointToPixel(center)// 两个位置点的差值为画布的位置let left = rel_xy.x - abs_xy.xlet top = rel_xy.y - abs_xy.y// 设置 画布在 地图上的位置this._cvs.setAttribute('style', 'position:absolute;left:' + left + 'px;top:' + top + 'px;z-index:1')// 设置画布的大小 为地图的大小this._cvs.setAttribute('width', size.width)this._cvs.setAttribute('height', size.height)// draw(map, pts, this._cvs)}map.addOverlay(layer)}

绘制点

到这，我们只需要把点的地理坐标转换为像素坐标，并绘制到画布上就完成了。
当然为了功能更强大，这里我们在获取点坐标时，添加了点之间距离的判断，把在距离内的点组合为一个聚合点绘制。根据聚合数，判断并绘制不同的点样式。

      /*** @param map 地图实例* @param pots 多个点坐标* @param map 地图实例* */function draw(map, pots, canvas) {const arr = [] // 组装后的点// 画布 创建 绘图的环境let ctx = canvas.getContext('2d')// 清除画布内容ctx.clearRect(0, 0, canvas.width, canvas.height)// 聚合的距离let distance = 20// 返回覆盖物的 地理区 域 范围let bound = map.getBounds()if (bound.ne.lng < 0) {bound.ne.lng = Math.abs(bound.ne.lng)}// 点聚合的 计算pots.forEach((spot) => {// 判断点是否在地图展示范围内  // containsPoint() : 如果点的地理坐标位于此矩形内，则返回trueif (bound.containsPoint(spot)) {// 遍历点的集合，跟聚合数组中的元素做比较，如果在聚合范围内则聚合，// 如果没有在聚合范围内则在聚合数组中加入一项，并记录聚合的点数量let position = map.pointToPixel(spot)if (arr.length == 0) {arr.push({ count: 1, pos: position })} else {// 判断点是否在聚合范围内let flag = truefor (let i = 0; i < arr.length; i++) {let c = arr[i]let pos = c.posif (Math.abs(pos.x - position.x) <= distance && Math.abs(pos.y - position.y) <= distance) {c.count++flag = falsebreak}}if (flag) {arr.push({ count: 1, pos: position })}}}})// 遍历聚合的数据并且在画布上渲染// 根据count值判断是单点、聚合的点arr.forEach((item) => {let position = item.posif (item.count == 1) {ctx.beginPath()ctx.fillStyle = 'rgba(102, 0, 204, 0.6)'ctx.strokeStyle = 'rgba(102, 0, 204, 0.6)'ctx.lineWidth = 2ctx.arc(position.x, position.y, 5, 0, 2 * Math.PI)ctx.closePath()ctx.stroke()ctx.fill()} else {ctx.globalAlpha = 0.6ctx.beginPath()ctx.fillStyle = '#87CEFA'ctx.ellipse(position.x, position.y, 20, 10, 0, 0, 2 * Math.PI, true)ctx.closePath()ctx.fill()ctx.globalAlpha = 1ctx.fillStyle = 'red'ctx.font = 'bold 17px Arial'ctx.fillText(item.count, position.x - ctx.measureText(item.count).width / 2, position.y + 6)}})}

每一次地图修改，都会调用draw。为了地图更加流畅，这里添加地图的监听事件，当处于事件开始时，停止后面的绘制，并清空画布，结束事件后，在重新绘制。

function customlayer(map, pts) {let temEvent = false// 监听百度地图缩放事件map.addEventListener('zoomstart', function (e) {temEvent = true})map.addEventListener('zoomend', function (e) {temEvent = false})...layer.draw = function () {if (temEvent) {let ctx = this._cvs.getContext('2d')ctx.clearRect(0, 0, this._cvs.width, this._cvs.height)return}...}...
}

测试功能

var pts = []
for (var i = 0; i < 1000; i++) {pts.push(new BMapGL.Point(Math.random() * 10 + 115, Math.random() * 10 + 25))
}
customlayer(map, pts)

这里只是简单的介绍了使用画布在地图上绘制海量点。
有兴趣的可以继续完善这个功能，比如对每个点添加点击事件或鼠标移入的监听事件。增加外部函数修改点样式等。

百度地图 - 绘制海量点相关推荐

android+动态地图+效果图,Android百度地图绘制圆形，圆形半径可动态变化
问题:百度地图绘制圆形,圆形半径可随进度拖动条发生改变思路:圆形本身是一个覆盖物,可参考百度地图Demo中的OverlayDemo.java这个类进行实现.完成画圆之后,圆形半径如何随着进度条的拖动 ...
百度地图-绘制工具以及覆盖物的简单使用
这几天重拾了地图相关的功能,做一个小小的总结. 本文的示例的后端为flask框架,前端使用了bootstrap和jQuery以及百度地图API. 接下来是展示部分. 地图上的覆盖物表示高校所处的位置, ...
vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)
vue如何引入百度地图绘制工具百度地图绘制工具示例 http://developer.baidu.com/map/jsdemo.htm#f0_7 百度地图绘制工具api文档 http://api.m ...
百度地图绘制实时路线以及最短线路规划
如何使用百度地图绘制实时路线以及最短线路规划最近在做百度地图的实时路线绘制,发现一些问题,比如由于定位漂移带来的路线绘制偏差,还有由于定位漂移,导致人未走动时,也会绘制路线等.百度鹰眼的线路纠偏个人 ...
百度地图绘制多段驾车路线
百度地图绘制多段驾车路线直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...
百度地图绘制途径点/分段绘制路线
百度地图绘制途径点百度地图Api地址: https://lbsyun.baidu.com/ 公司项目中要求绘制物流信息,需体现途径点但是我在其中没有找到有关绘制路线,设定途径点的相关说明有一个非 ...
使用百度地图绘制点、线、面 | Javascript
写在前面: 本文为百度地图开发系列文章之一, 前期回顾: webGIS,基于百度地图的HelloWord实现如何使用前端css代码去掉百度地图左下角的图标使用百度地图绘制点.线.面 | Javas ...
Python调用百度地图绘制热力图密钥问题
首先奉上效果图: 问题描述: 因工作需求,必须用百度地图绘制热力图:发现因关于百度地图密钥的使用问题如下: 1.抓取经纬度信息状态码200: {"status":200," ...
百度地图API 海量点自定义添加信息
 <script type="text/javascript" src="http://api.map.baidu.com/a ...

百度地图 - 绘制海量点

简介

覆盖物

自定义覆盖物

绘制点

百度地图 - 绘制海量点相关推荐

最新文章

热门文章