继上次Echarts散点图与百度地图结合后的卡顿问题

最新推荐文章于 2024-03-20 13:44:16 发布

James23vs24

最新推荐文章于 2024-03-20 13:44:16 发布

阅读量2.8k

点赞数 2

分类专栏： Echarts的使用学习文章标签：百度地图卡顿

本文链接：https://blog.csdn.net/james23vs24/article/details/80253011

版权

本文介绍了在Echarts散点图与百度地图结合时遇到的卡顿问题，通过使用PointCollection类成功提升了加载速度并简化了操作。最终展示效果良好，同时提到了标记点的shape和size可以通过官网提供的常量进行设置。

摘要由CSDN通过智能技术生成

之前想在百度地图上将设备的分布用散点图表示在百度地图上，虽然也成功实现了，但是发现一次性加载的点太多了的话，会出现一点卡顿问题，移动地图的时候不是很方便，而且因为每次移动，点也会重新计算方位，导致出现点和图分离的现象。之后去百度地图的网上学习了一下，了解到了百度地图提供了加载海量的点很方便的

PointCollection类。使用后确实加载快了很多，而且方便许多。

var map = new BMap.Map("map");                        // 创建Map实例
    map.centerAndZoom(new BMap.Point(105.000, 38.000), 5);     // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom();                        //启用滚轮放大缩小
    map.setMapStyle({style:'midnight'});              //这里是设置地图的风格，我设置的是午夜的风格
    if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
        var points = [];  // 添加海量点数据
        for (var i = 0; i < AjaxObject.count; i++) {//这里的AjaxObject是我从数据库中获取到的数据
          points.push(new BMap.Point(AjaxObject[i].last_map_x, AjaxObject[i].last_map_y));
        }
        var options