mapv修改源码实现图标和管道到统一页面显示，图标和管道和点击

八分钟de温暖

已于 2024-04-30 15:53:44 修改

阅读量740

点赞数 8

文章标签： vue 百度地图大数据卡顿

于 2024-04-10 09:12:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_40466351/article/details/137563186

版权

一、效果图

在这里插入图片描述

二、背景

map 地图添加marker，是操作的dom，而mapv是使用的canvas方式，所以性能要好

三、Mapv和MapVGL的区别

百度地图 JavaScript API GL快速升级和mapVGL的使用
Mapv 是一款基于百度地图的大数据可视化开源库，可以用来展示大量的点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。

MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。

四、为什么要修改mapv的源码

原因1：type为“simple”不能自定义图标
原因2：type为“icon”不能添加line线
原因3: type为“icon”和“simple”能实现line线和自定义图标，但是是两个图层，不能同时点击
所有，定义type为“simple”时。同时去处理icon和line线

五、修改步骤

1、去mapv 下载源码,安装依赖并运行
地理信息可视化开源库
 github地址

2、当icon有值的时候，去调用import DrawIcon from “…/draw/icon”; icon里面的draw方法画自定义图标
在这里插入图片描述
3、当类型为simple 时，自定义图标是没有点击事件的，点击事件是通过path去判断的，所以模拟画一个rect去实现点击事件

4、还有会用到的方法有

 var dataSet = new mapv.DataSet(data);
 var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
 mapvLayer.destroy();// 销毁layer
 mapvLayer.clearData();// 清除数据
 dataSet.set({ //重新设置数据
    geometry: {
          type: 'LineString',
         coordinates: coordinates
      },
      properties: {
          count: 0
     },
  });

mapvLayer.setOptions(options); //重新设置options

5、参加文件为road.html

6、github 地址为：
修改后的mapv

7、常见地图数据大卡顿的问题

1、mapv；（多层级点击问题）多个图层变成一个图层
2、分层级：省市区
3、海量点(图标不能更换)，添加管道有没有问题呢？
4、按可视区域请求点数据；
5、数据进行抽稀
6、点聚合（百度地图点聚合点击事件卡顿问题解决） -https://blog.youkuaiyun.com/qq_23447231/article/details/132872794

注意：浏览器缩放不等于100%时，拖动会出现重影的问题。浏览器设置为100%，2万多个点显示不成问题