百度地图-图标过多卡顿解决方案

最新推荐文章于 2022-10-13 15:54:46 发布

原创

最新推荐文章于 2022-10-13 15:54:46 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#百度 #javascript #开发语言

本文探讨了在处理大量标记点时点聚合的卡顿问题，提供了使用自定义代码优化和通过百度地图API或mapv插件将图标转至canvas的解决方案。详细介绍了如何调整聚合参数和使用Canvas技术来改善地图性能。

点聚合

<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=xxxx"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

var map = new BMap.Map('map');
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
map.enableScrollWheelZoom();

// 随机生成markers经纬度
var MAX = 20;
var markers = [];
var pt = null;
var i = 0;
for (; i < MAX; i++) {
   
   
    pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
    var myIcon = new BMap.Icon('/images/default.png', new BMap.Size(48, 48));
    markers.push(new BMap.Marker(pt, {
   
    icon: myIcon }));
}

//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, {
   
    markers: markers });

在这里插入图片描述
点聚合弊端及解决方案

点聚合数量超过1w时，会有卡顿现象

解决方案：用以下代码代替 MarkerClusterer_min.js



/**
 * @fileoverview MarkerClusterer标记聚合器用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能。
 * 主入口类是<a href="symbols/BMapLib.MarkerClusterer.html">MarkerClusterer</a>，
 * 基于Baidu Map API 1.2。
 *
 * @author Baidu Map Api Group
 * @version 1.2
 */

/**
 * @namespace BMap的所有library类均放在BMapLib命名空间下
 */
var BMapLib = (window.BMapLib = BMapLib || {
   
   });
(function () {
   
   
    /**
     * 获取一个扩展的视图范围，把上下左右都扩大一样的像素值。
     * @param {Map} map BMap.Map的实例化对象
     * @param {BMap.Bounds} bounds BMap.Bounds的实例化对象
     * @param {Number} gridSize 要扩大的像素值
     *
     * @return {BMap.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);
        return new BMap.Bounds(newSW, newNE);
    };

    /**
     * 按照百度地图支持的世界范围对bounds进行边界处理
     * @param {BMap.Bounds} bounds BMap.Bounds的实例化对象
     *
     * @return {BMap.Bounds} 返回不越界的视图范围
     */
    var cutBoundsInRange = function (bounds) {
   
   
        var maxX = getRange(bounds.getNorthEast().lng, -180, 180);
        var minX = getRange(bounds.getSouthWest().lng, -180, 180);
        var maxY = getRange(bounds.getNorthEast().lat, -74, 74);
        var minY = getRange(bounds.getSouthWest().lat, -74, 74);
        return new BMap.Bounds(new BMap.Point(minX, minY), new BMap.Point(maxX, maxY));
    };

    /**
     * 对单个值进行边界处理。
     * @param {Number} i 要处理的数值
     * @param {Number} min 下边界值
     * @param {Number} max 上边界值
     *
     * @return {Number} 返回不越界的数值
     */
    var getRange = function (i, mix, max) {
   
   
        mix && (i = Math.max(i, mix));
        max && (i = Math.min(i, max));
        return i;
    };

    /**
     * 判断给定的对象是否为数组
     * @param {Object} source 要测试的对象
     *
     * @return {Boolean} 如果是数组返回true，否则返回false
     */
    var isArray = function (source) {
   
   
        return '[object Array]' === Object.prototype.toString.call(source);
    };

    /**
     * 返回item在source中的索引位置
     * @param {Object} item 要测试的对象
     * @param {Array} source 数组
     *
     * @return {Number} 如果在数组内，返回索引，否则返回-1
     */
    var indexOf = function (item, source) {
   
   
        var index = -1;
        if (isArray(source)) {
   
   
            if (source.indexOf) {
   
   
                index = source.indexOf(item);
            } else {
   
   
                for (var i = 0, m; (m = source[i]); i++) {
   
   
                    if (m === item) {
   
   
                        index = i;
                        break;
                    }
                }
            }
        }
        return index;
    };

    /**
     *@exports MarkerClusterer as BMapLib.MarkerClusterer
     */
    var MarkerClusterer =
        /**
         * MarkerClusterer
         * @class 用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能
         * @constructor
         * @param {Map} map 地图的一个实例。
         * @param {Json Object} options 可选参数，可选项包括：<br />
         *    markers {Array<Marker&