百度地图打点性能优化(海量点、mapv)

这篇具有很好参考价值的文章主要介绍了百度地图打点性能优化(海量点、mapv)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

百度地图打点性能优化(海量点、mapv)

原因

在百度地图api中,默认的点是下图的红点

百度地图打点性能优化(海量点、mapv),性能优化

而这种点位比较多的时候,就会出现加载卡顿问题

优化方法

想要进行方法优化,首先需要分析其原因。

数据获取方面

数据量比较庞大时,我们采用了分批调用获取的方法,采用异步的方式,可以利用await进行调用接口数据,这里是为了减轻服务端压力,把庞大的数据分批进行返回。

页面加载方面

渲染时为什么会出现卡顿现象,检查可以看出其原因

百度地图打点性能优化(海量点、mapv),性能优化

这是一个个dom结构,当海量数据同事渲染时,这里就涉及到大量的dom操作,造成重绘或重排,从而造成卡顿问题,所以解决问题的方法就是减少dom操作。

其中一种解决方法就是转化为canvas,canvas操作相对于DOM操作资源消耗较少,因为canvas操作是基于像素的绘制操作,不涉及到浏览器的解析和渲染过程。

而且百度地图在JavaScript API v3.0中给出了相应的解决方案 PointCollection属性

官方解释如下

PointCollection

此类表示海量点类,利用该类可同时在地图上展示万级别的点,目前仅适用于html5浏览器。

构造函数 描述
PointCollection(points: Array, opts: PointCollectionOptions) 创建海量点类。points为点的坐标集合,opts为点的绘制样式
方法 返回值 描述
setPoints(points: Array) none 设置要在地图上展示的点坐标集合
setStyles(styles: PointCollectionOption) none 点的样式,包括:大小"size"(可选,默认正常尺寸10*10px,SizeType类型),形状"shape"(可选,默认圆形,ShapeType类型),颜色"color"(可选,字符串类型)
clear() none 清除海量点

事件 参数 描述
click event{type, target,point} 鼠标点击点时会触发此事件
mouseover event{type, target,point} 鼠标移入点时会触发该事件
mouseout event{type, target,point} 鼠标移出点时会触发该事件

而该海量点就是将百度地图转化为canvas,使用该api可以解决卡顿效果,但是又有一些缺陷

兼容问题

某些浏览器不支持canvas绘制,这里就要做一个判断,通过下面代码判断是否能绘制即可

document.createElement("canvas").getContext("2d")

下面是对支持canvas的浏览器以及版本供参考

百度地图打点性能优化(海量点、mapv),性能优化

样式问题

海量点api中,它的样式是固定选择的几个,通过PointCollectionOptions中的ShapeType属性定义

官网给的几个形状如下

常量 描述
BMAP_POINT_SHAPE_CIRCLE 圆形,为默认形状
BMAP_POINT_SHAPE_STAR 星形
BMAP_POINT_SHAPE_SQUARE 方形
BMAP_POINT_SHAPE_RHOMBUS 菱形
BMAP_POINT_SHAPE_WATERDROP 水滴状,该类型无size和color属性属性定义

这几个形状说实话在地图上不是太好看。。。

如果UI对标点样式没有要求,皆大欢喜,不用再做处理了,但非要进行改正,这就需要换另一种处理方法了

这里百度地图也推荐了一种处理方法——Mapv

Mapv

Mapv 是一款地理信息可视化开源库,可以用来展示大量地理信息数据,点、线、面的数据,每种数据也有不同的展示类型,如直接打点、热力图、网格、聚合等方式展示数据,其也是将地图绘制成canvas

官网:https://mapv.baidu.com/

GitHub:https://github.com/huiyan-fe/mapv

在这里可以自定义标点图标,下面是举例设置图标的地方

示例:

var data = [
    // 点数据
    {
        geometry: {
            type: 'Point',
            coordinates: [123, 23]
        },
        fillStyle: 'red',
         // 支持image对象和url两种方式
        icon: [img, 'images/marker.png', 'images/star.png'][randomCount % 3],
        size: 30
    },
    {
        geometry: {
            type: 'Point',
            coordinates: [121, 33]
        },
        fillStyle: 'rgba(255, 255, 50, 0.5)',
        size: 90
    },
    // 线数据
    {
        geometry: {
            type: 'LineString',
            coordinates: [
                [123, 23], 
                [124, 24]
            ]
        },
        count: 30
    },
    // 面数据
    {
        geometry: {
            type: 'Polygon',
            coordinates: [
                [
                    [123, 23], 
                    [123, 23], 
                    [123, 23]
                ]
            ]
        },
        count: 30 * Math.random()
    }
];

var dataSet = new mapv.DataSet(data);

这里data中的属性配置项官方文档是这样描述的

mapv中主要都是展示地理信息数据用的,需要在数据中加个geometry字段,geometry字段的内容统一使用Geojson的规范,大家自行查阅资料配置即可。

这里只是一个简单示例,具体实现参考官方文档

参考资料

百度地图jsapi v3

jsapi v3类参考文档

mapv官网

mapv官方文档文章来源地址https://www.toymoban.com/news/detail-779121.html

到了这里,关于百度地图打点性能优化(海量点、mapv)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp中map组件打点/地图上显示圆/设置map圆的透明度(十六进制颜色透明度)

    一般来说我们都是想设置成透明的圆,十六进制的后两位表示颜色 eg:#0000006A 6A就是表示透明度,数字越大透明度越高

    2024年02月12日
    浏览(50)
  • 如何将测绘数据加载到三维地图中,解决海量测绘数据在线管理难题?

    《四维轻云》是四川兴域技术团队基于浏览器打造的一款地理空间数据在线管理平台,可实现TB级大规模倾斜摄影三维模型、正射影像、激光点云、数字高程模型等数据在线发布、管理及分享,并支持私有化部署和高阶功能定制化开发,解决了海量测绘数据在线管理难题。 在

    2024年02月08日
    浏览(56)
  • 高德地图通过图层layer实现对海量点的可视化渲染

    在正文开始之前我先说说我为啥会使用这个技术来实现数据的可视化。 事情是这样的,我接手了一个项目,里面有个需求是在地图上标记出他们公司的产品的使用分布。我接手的时候呢,我前面的那位大哥是 使用marker点覆盖物,加上for循环来渲染实现的 ,可能他在维护这个

    2024年02月15日
    浏览(82)
  • 如何构建一个大型搜索引擎——百度如何抓取海量数据并为用户找到信息?

    作者:禅与计算机程序设计艺术 搜索引擎是互联网的一个重要组成部分,它作为信息检索入口承载着互联网上海量的可用信息。百度是一个著名的搜索引擎,拥有超过9亿用户、超过7亿流量、超过150万网页被索引,是中国最大的中文搜索引擎。从2005年百度的诞生到今日,百度

    2024年02月08日
    浏览(59)
  • 百度小程序开发平台源码系统:海量模板,定义移动时代的最佳体验 附带完整的搭建教程

    移动互联网的飞速发展,小程序成为了众多企业和开发者的新宠。今天来给大家分享一个百度小程序的开发平台,带完整的搭建教程。 以下是部分代码示例: 系统特色功能一览:     1.海量模板,快速搭建 百度小程序开发平台源码系统提供了海量的模板,涵盖了各种行业和

    2024年01月18日
    浏览(38)
  • vue使用百度地图获取可视区域四角坐标(百度地图四角坐标,百度地图3D可视区域四角坐标)

    百度地图api只提供了左下角和右上角两个坐标,左上角坐标和右下角坐标需要自己操作获取,方法如下: 然后在地图上添加监听事件, 这样用户在拖拽或缩放地图时也可以获取到地图可视区域的四角坐标: 创作不易,感觉有用就一键三连,感谢(●\\\'◡\\\'●)

    2024年02月11日
    浏览(73)
  • html 导入百度地图 网页中如何导入百度地图

    先看案例如图所示 首先我们需要知道我们想要标注地点的经纬度 经纬度查询网址如下 图中以同程大厦为例 经纬度查询定位 拾取坐标系统 经纬度查询地图 好了 准备工作做好 现在开始编码~ 第一步 html css部分 注意点1. #map 命名 不要随意更改 如影响到您的布局 您可以在外面

    2023年04月08日
    浏览(49)
  • 海量kafka数据入es速度优化处理

    主要是涉及到kafka 消费端到es 的数据处理 kafka端 1、批量消费(效果相当明显) 2、kafka 设置topic多分区,增加kafka的消费并行度(效果相当明显) es 端 1、采用批量插入,批量插入效率较单条插入效率高很多(效果相当明显,一次批量插入数据大小限制在5M内) 2、调整es 中索

    2024年02月12日
    浏览(61)
  • 高德地图与百度地图坐标相互转化

    1. WGS-84原始坐标系 ,一般用国际GPS纪录仪记录下来的经纬度,通过GPS定位拿到的原始经纬度,Google和高德地图定位的的经纬度(国外)都是基于WGS-84坐标系的;但是在国内是不允许直接用WGS84坐标系标注的,必须经过加密后才能使用; 2. GCJ-02坐标系 ,又名“火星坐标系

    2024年02月16日
    浏览(41)
  • 【QT--使用百度地图API显示地图并绘制路线】

    先吐槽一下下,本身qt学的就不咋滴,谁想到第一件事就是让写一个上位机工具,根据CAN总线传来的位置信息,在地图上去绘制路线,并获取当前路段的限速信息等。当听到这个需求的时候,第一时间是有点懵逼的。自己原本是没接触过这方面的知识,而且qt学的也特别的垃圾

    2024年01月24日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包