百度地图js lite api 支持点聚合

时间：2023-03-10 00:28:11
百度地图js lite api 支持点聚合

百度地图lite api 是专门为h5 绘制海量点设计的，但是偏偏忽略掉了点聚合的需求，所以需要自己动手，做一次二次改造。

我们知道点聚合需要引入开源库:

MarkerClusterer:  http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer.js

TextIconOverlay: http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js

由于是开源库，我们可以直接把代码撸下来保存直接放到自己的业务里使用

我们在  MarkerClusterer  addMarkers的时候浏览器会报错，

是因为lite api中的map对象及bounds对象缺乏两个方法：

map.getDistance  及   bounds.containsPoint

getDistance方法是计算两个点之间的直线距离，返回数值为米，这个方法网上就有

 const EARTH_RADIUS = 6378137.0;

 const {PI} = Math;

 function getRad(d){

     return d*PI/180.0;

 }

 function getDistance(start,end){

     let lat1 = +start.lat;

     let lat2 = +end.lat;

     let lng1 = +start.lng;

     let lng2 = +end.lng;

     if(lat1==lat2 && lng1 == lng2){

         return 0;

     }

     let f = getRad((lat1 + lat2)/2);

     let g = getRad((lat1 - lat2)/2);

     let l = getRad((lng1 - lng2)/2);

     let sg = Math.sin(g);

     let sl = Math.sin(l);

     let sf = Math.sin(f);

     let s,c,w,r,d,h1,h2;

     let a = EARTH_RADIUS;

     let fl = 1/298.257;

     sg = sg*sg;

     sl = sl*sl;

     sf = sf*sf;

     s = sg*(1-sl) + (1-sf)*sl;

     c = (1-sg)*(1-sl) + sf*sl;

     w = Math.atan(Math.sqrt(s/c));

     r = Math.sqrt(s*c)/w;

     d = 2*w*a;

     h1 = (3*r -1)/2/c;

     h2 = (3*r +1)/2/s;

     return d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));

 }

我们把这个方法赋到map对象上

 var MarkerClusterer = function (map, options) {

     if (!map) {

         return;

     }

     map.getDistance = getDistance;  // 这里

     this._map = map;

     this._markers = [];

     this._clusters = [];

     var opts = options || {};

     this._gridSize = opts["gridSize"] || 60;

     this._maxZoom = opts["maxZoom"] || 18;

     this._minClusterSize = opts["minClusterSize"] || 2;

     this._isAverageCenter = false;

     if (opts['isAverageCenter'] != undefined) {

         this._isAverageCenter = opts['isAverageCenter'];

     }

     this._styles = opts["styles"] || [];

     var that = this;

     this._map.addEventListener("zoomend", function () {

         that._redraw();

     });

     this._map.addEventListener("moveend", function () {

         that._redraw();

     });

     var mkrs = opts["markers"];

     isArray(mkrs) && this.addMarkers(mkrs);

 };

map对象就补齐了

containsPoint 是计算点是否在bounds给定的区域中，这个更简单

 var getExtendedBounds = function (map, bounds, gridSize) {

     bounds = cutBoundsInRange(bounds);

     var pixelNE = map.pointToPixel(bounds.getNorthEast());

     var pixelSW = map.pointToPixel(bounds.getSouthWest());

     pixelNE.x += gridSize;

     pixelNE.y -= gridSize;

     pixelSW.x -= gridSize;

     pixelSW.y += gridSize;

     var newNE = map.pixelToPoint(pixelNE);

     var newSW = map.pixelToPoint(pixelSW);

     let nb =  new BMap.Bounds(newSW, newNE);

     // 写在这里

     nb.containsPoint = function(point){

         var lat = point.lat;

         var lng = point.lng;

         if(!point || !point.lat || !point.lng){

             return false;

         } else {

             return lat>this._swLat && lat < this._neLat && lng<this._neLng && lng>this._swLng;

         }

     }

     return nb;

 };

至此MarkerClusterer 改造完毕

然后是改造TextIconOverlay

由于lite api 返回的MarkerPane

 TextIconOverlay.prototype.initialize = function (map) {

             this._map = map;

             this._domElement = document.createElement('div');

             this._updateCss();

             this._updateText();

             this._updatePosition();

             this._bind();

  // 将markerMouseTarget 替换成markerPane

 this._map.getPanes().markerPane.appendChild(this._domElement);

             return this._domElement;

         };

这样就可以了

相关文章