vue开发 百度地图 加载大量点导致卡顿解决方法（vue+vue-baidu-map+mapv）
2024-05-30 07:09:07
造成卡顿原因 及解决方法(解释可能有误！！！)
自行通过F12进入调试窗口，可以发现点标注Marker会以div元素在dom树中渲染出来，需要占用的内存大，渲染慢且大规模的 DOM 操作（会造成重绘或重排）也会造成用户操作阻塞，从而导致卡顿。而mapv则把所有的点转成canvas绘制出来，比div方式渲染性能更好。（因为canvas是无状态的，绘制的内容不能继续引用，不需要另外的内存来保存。而dom中需要存储相应对象数据）
另外，如果对点的图标没什么要求的也可以直接使用百度地图的 海量点（PointCollection
针对点的数量很大的情况，可以使用海量点进行展示）
mapv 简介
Mapv 是一款地理信息可视化开源库，可以用来展示大量地理信息数据，点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据
网站地址:http://mapv.baidu.com.
GitHub: https://github.com/huiyan-fe/mapv.
相关插件安装
npm install mapv
npm install vue-baidu-map
效果
参考代码及数据 （自行修改 直接用可能看不到效果！）
mapInfo.json 数据 格式
{"companyTotal": 3678,"redCompanyNum": 0,"yellowCompanyNum": 0,"greenCompanyNum": 3678,"fireAlarmNum": 0,"faultNum": 1,"offlineNum": 1,"companyInfo": [{"id": 1,"name": "农业银行","contacts": "李鑫","phone": "18000000000","address": null,"type": "三小场所","imgUrl": null,"safeLevel": 1,"lng": 113.595919,"lat": 22.343163},{"id": 2,"name": "海洋花园","contacts": "张平","phone": "18000000000","address": null,"type": "物业小区","imgUrl": null,"safeLevel": 1,"lng": 113.598704,"lat": 22.341241},{"id": 3,"name": "民营科技大厦","contacts": "李梁","phone": "18000000000","address": null,"type": "物业小区","imgUrl": null,"safeLevel": 1,"lng": 113.599638,"lat": 22.343046}],"deviceInfo": [{"id": 2,"gatewayIp": "0000000102","monitorType": "红外烟感","contacts": "张杰","phone": "18000000000","address": null,"imgUrl": "/file/image/6eab4a86gy1gde5u3csvvj20rs1aw4e1-20200703060155603.jpg","status": "故障","lng": 113.605387,"lat": 22.360561},{"id": 2,"gatewayIp": "0000000102","monitorType": "红外烟感","contacts": "张杰","phone": "18000000000","address": null,"imgUrl": "/file/image/6eab4a86gy1gde5u3csvvj20rs1aw4e1-20200703060155603.jpg","status": "离线","lng": 113.605387,"lat": 22.360561}]}
组件
<template><div id="map-area"><div class="map-info"><!-- <span class="info-label">网格单位: 24</span> --><el-checkbox-group v-model="checkList"><el-checkbox label="green"><img :src="iconlist[0]" class="mini-icon" />绿色单位: {{mapdata.greenCompanyNum}}</el-checkbox><el-checkbox label="yellow"><img :src="iconlist[1]" class="mini-icon" />黄色单位: {{mapdata.yellowCompanyNum}}</el-checkbox><el-checkbox label="red"><img :src="iconlist[2]" class="mini-icon" />红色单位: {{mapdata.redCompanyNum}}</el-checkbox><el-checkbox label="total" disabled>网格单位: {{mapdata.companyTotal}}</el-checkbox><br /><el-checkbox label="fault"><img :src="iconlist[3]" class="mini-icon" />故障: {{mapdata.faultNum}}</el-checkbox><el-checkbox label="fireAlarm"><img :src="iconlist[4]" class="mini-icon" />火警: {{mapdata.fireAlarmNum}}</el-checkbox><el-checkbox label="offline"><img :src="iconlist[5]" class="mini-icon" />离线: {{mapdata.offlineNum}}</el-checkbox></el-checkbox-group><!-- <span class="info-label">网格单位: {{mapdata.companyTotal}}</span> --></div><div class="map-top"><button class="top-btn">实时视频</button></div><baidu-mapclass="bm-view"ak="2byzIKBDF38EDp7aCRBW0ePqMob1dZGz"map-type="BMAP_NORMAL_MAP":scroll-wheel-zoom="true":center="center":zoom="zoom"@ready="handler"><bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation><bm-overlaypane="labelPane"ref="customOverlay":class="{sample: true, active}"v-if="show"@draw="draw"@mouseover.native="active = true;show =true; "><div class="map_content" @click="doSomething($event)"><div class="map_content_box"><div class="map_text_title"><el-tooltipclass="item"effect="dark":content="pointDetails.name"placement="top-start"><span class="max">{{pointDetails.name}}</span></el-tooltip><span class="more">点击查看详情</span></div><div class="map_text_body"><ul><li><span>分行负责人：{{pointDetails.fuzheren}}</span></li><li><span>巡查工作完成情况：{{pointDetails.wancheng}}</span></li><li><span>现有警情数量：{{pointDetails.xianyou}}</span></li></ul><ul><li><span>在职人数数量：{{pointDetails.zaizhi}}</span></li><li><span>未处理隐患数：{{pointDetails.weichuli}}</span></li><li><span>智能设备掉线：{{pointDetails.zhineng}}</span></li></ul></div></div></div></bm-overlay><bm-map-typeclass="anchor-cut":map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"anchor="BMAP_ANCHOR_BOTTOM_LEFT":type="'BMAP_HYBRID_MAP'"></bm-map-type></baidu-map><canvas id="canvas"></canvas><!-- <div class="mask"></div> --></div>
</template>
<script>
/* eslint-disable */
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
// 引入地图样式json文件
// import styleJson from "@/assets/json/custom_map_config";
import {BmMarker,BmOverlay,BmMapType,BmlMarkerClusterer,BmInfoWindow,BmGeolocation
} from "vue-baidu-map";
// import { getMapInfo } from "@/api/index";
export default {components: {BaiduMap,"bm-marker": BmMarker,"bm-overlay": BmOverlay,BmInfoWindow,BmlMarkerClusterer,"bm-map-type": BmMapType,BmGeolocation// "bm-navigation": BmNavigation},data() {return {center: { lng: 113.467977, lat: 22.371804 },zoom: 5,mapdata: {}, // 数据pointDetails: {name: "xx二级分行",fuzheren: "王行长",wancheng: "90%",xianyou: 2,zaizhi: 16,weichuli: 12,zhineng: 0},pointDetail: {}, // 详情checkList: ["green", "red", "yellow", "fault", "fireAlarm", "offline"], // 选中的图标fullList: ["green", "red", "yellow", "fault", "fireAlarm", "offline"], // 完整的图标iconlist: [// 多选框的图标require("@/assets/images/map/ls_big.png"),require("@/assets/images/map/yellow_big.png"), // 定位require("@/assets/images/map/hs_big.png"),require("@/assets/images/map/gz_big.png"),require("@/assets/images/map/hj_big.png"),require("@/assets/images/map/lx.png"),require("@/assets/images/map/green_btn.png")],pointBox: { lng: 0, lat: 0 },show: true,iconShow: false,active: false,pointList: [],card: {},showicon: {order: "",clickNum: 0,flag: true,green: true,red: true,yellow: true,fault: true,fireAlarm: true,offline: true},mapvLayer: {},rawData: {} // 原始地图数据};},watch: {checkList(value) {this.showicon = {};console.log(value);this.fullList.map(item => {if (value.indexOf(item) == -1) {this.showicon[item] = false;this.mapvLayer[item + "Layer"].hide();} else {this.showicon[item] = true;this.mapvLayer[item + "Layer"].show();}});}},created() {// let userInfo = this.$store.state.userInfo;// this.center = userInfo.dept.name;// if (userInfo.dept.level != 0) {// this.center = userInfo.dept.name;// }// if (userInfo.dept.level < 2) {// this.location = "";// } else if (userInfo.dept.level == 2) {// this.location = userInfo.dept.region.name;// } else {// this.location = "";// }// this.zoom = 5 + userInfo.dept.level;},mounted() {// getMapInfo().then(res => {// this.mapdata = res.data;// this.rawData = res.data;// console.log(res.data, this.rawData, "这是后端的数据");// });},methods: {pointColor(mark) {let result = {};switch (mark) {case 1:result = {type: 0,name: "green"};break;case 2:result = {type: 1,name: "yellow"};break;case 3:result = {type: 2,name: "red"};break;case "故障":result = {type: 3,name: "fault"};break;case "火警":result = {type: 4,name: "fireAlarm"};break;case "离线":result = {type: 5,name: "offline"};break;}return result;},handler({ BMap, map }) {// map.setMapStyle({ styleJson: styleJson });var mapv = require("mapv");// setInterval(() => {// console.log("定时任务启动");// }, 20000);// getMapInfo().then(res => {let res = {};res.data = require("../../assets/json/mapInfo.json");console.log("res.data", res.data);this.mapdata = res.data;let rawData = res.data;// 改变地图主题颜色// 黄色单位图标let yellowIcon = document.createElement("img");yellowIcon.src = require("@/assets/images/map/yellow_big.png");// 绿色单位图标let greenIcon = document.createElement("img");greenIcon.src = require("@/assets/images/map/ls_big.png");// 故障图标let faultIcon = document.createElement("img");faultIcon.src = require("@/assets/images/map/gz_big.png");// 火警图标let fireAlarmIcon = document.createElement("img");fireAlarmIcon.src = require("@/assets/images/map/hj_big.png");// 离线图标let offlineIcon = document.createElement("img");offlineIcon.src = require("@/assets/images/map/lx.png");// 红色单位图标let redIcon = document.createElement("img");redIcon.src = require("@/assets/images/map/hs_big.png");map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放// 中心坐标const that = this; // 改变this 指向// 图片加载完成redIcon.onload = function() {var randomCount = 15;// 储存各点数据let redData = [];let yellowData = [];let greenData = [];let faultData = [];let fireAlarmData = [];let offlineData = [];let { companyInfo, deviceInfo } = rawData;let pointList = [];if (companyInfo) {companyInfo.map((value, index) => {let company = that.pointColor(value.safeLevel);switch (company.type) {case 0:greenData.push({geometry: {type: "Point",coordinates: [value.lng, value.lat]},icon: greenIcon, // 图标order: index, // 脚标data: value, // 数据tag: "green"});break;case 1:yellowData.push({geometry: {type: "Point",coordinates: [value.lng, value.lat]},icon: yellowIcon, // 图标order: index, // 脚标data: value, // 数据tag: "yellow"});break;case 2:redData.push({geometry: {type: "Point",coordinates: [value.lng, value.lat]},icon: redIcon, // 图标order: index, // 脚标data: value, // 数据tag: "red"});break;}});}if (deviceInfo) {deviceInfo.map((value, index) => {let device = that.pointColor(value.status);switch (device.type) {case 3:faultData.push({geometry: {type: "Point",coordinates: [value.lng, value.lat]},icon: faultIcon, // 图标order: index, // 脚标data: value, // 数据tag: "fault"});break;case 4:fireAlarmData.push({geometry: {type: "Point",coordinates: [value.lng, value.lat]},icon: fireAlarmIcon, // 图标order: index, // 脚标data: value, // 数据tag: "fireAlarm"});break;case 5:offlineData.push({geometry: {type: "Point",coordinates: [value.lng, value.lat]},icon: offlineIcon, // 图标order: index, // 脚标data: value, // 数据tag: "offline"});break;}});}var redDataSet = new mapv.DataSet(redData);var yellowDataSet = new mapv.DataSet(yellowData);var greenDataSet = new mapv.DataSet(greenData);var faultDataSet = new mapv.DataSet(faultData);var fireAlarmDataSet = new mapv.DataSet(fireAlarmData);var offlineDataSet = new mapv.DataSet(offlineData);let nonce = 0;var options = {draw: "icon",methods: {// 默认鼠标进入图标显示信息栏 单击图标与信息栏以外区域隐藏信息栏// 初始点击一次图标 锁定信息栏 再次点击图标 解锁信息栏// 之后双击图标锁定信息栏 单击 解锁信息栏mousemove: s => {//图标点击事件if (s && that.showicon[s.tag] && that.showicon.flag) {nonce = 0;that.pointDetail = s.data;that.pointBox.lng = s.geometry.coordinates[0];that.pointBox.lat = s.geometry.coordinates[1];that.show = true;if (that.show && that.$refs.customOverlay) {that.$refs.customOverlay.reload();}}},click: m => {that.showicon.clickNum++;if (that.showicon.clickNum == 6) {that.showicon.clickNum = 0;}if (that.showicon.clickNum == 3) {if (!m) {that.show = false;that.showicon.flag = true;} else {that.showicon.flag = !that.showicon.flag;}}if (m && that.showicon[m.tag] && that.showicon.flag) {that.showicon.order = m.order;that.pointDetail = m.data;that.pointBox.lng = m.geometry.coordinates[0];that.pointBox.lat = m.geometry.coordinates[1];that.show = true;if (that.show && that.$refs.customOverlay) {that.$refs.customOverlay.reload();}}}},showText: true,avoid: true,size: 12,font: "16px Arial",fillStyle: "red",shadowColor: "red",shadowBlur: 0,textOffset: { x: 0, y: -16 }};// eslint-disable-next-line new-capthat.mapvLayer.redLayer = new mapv.baiduMapLayer(map,redDataSet,options);that.mapvLayer.yellowLayer = new mapv.baiduMapLayer(map,yellowDataSet,options);that.mapvLayer.greenLayer = new mapv.baiduMapLayer(map,greenDataSet,options);that.mapvLayer.offlineLayer = new mapv.baiduMapLayer(map,offlineDataSet,options);that.mapvLayer.faultLayer = new mapv.baiduMapLayer(map,faultDataSet,options);that.mapvLayer.fireAlarmLayer = new mapv.baiduMapLayer(map,fireAlarmDataSet,options);};// });},draw({ el, BMap, map }) {const { lng, lat } = this.pointBox;const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));el.style.left = pixel.x + 20 + "px";el.style.top = pixel.y + 20 + "px";},// 点击坐标点infoWindowOpen(e, index) {this.currentIndex = index;this.currentInfo = this.testlist[index];console.log("e", e);console.log("index", index);let splitArr = e.target.z.title.split("-");this.pointDetail = this.mapdata[splitArr[0]][splitArr[1]];// this.choosePoint(e.point);this.pointBox = e.point;try {e.stopPropagation(); //非IE浏览器} catch (e) {window.event.cancelBubble = true; //IE浏览器}this.show = true;},choosePoint(point) {let lng = point.lng.toFixed(3);let lat = point.lat.toFixed(3);this.pointList.forEach(value => {if (lng == value.longitude.toFixed(3)) {if (lat == value.latitude.toFixed(3)) {this.card = value;this.show = true;}}});},doSomething(e) {try {e.stopPropagation(); //非IE浏览器} catch (e) {window.event.cancelBubble = true; //IE浏览器}}}
};
</script>
<style lang="less">
</style>
<style lang="less" scoped>
// BMap_cpyCtrl BMap_noprint anchorBL#map-area {width: 570px;height: 520px;margin-top: 20px;position: relative;overflow: hidden;.bm-view {width: 100%;// height: 530px;height: calc(100% - 45px);position: relative;&/deep/.anchorBL {display: none;}&/deep/.BMap_noprint {display: initial;}&/deep/.BMap_cpyCtrl {display: none;}.map_content {display: flex;flex: 1;position: absolute;z-index: 999;left: 50%;width: auto;min-height: 80px;background: rgba(0, 0, 0, 0.7);padding: 10px 0 10px 10px;border-radius: 5px;img {width: 80px;height: 60px;}.show_detail {height: 20px;position: absolute;bottom: 0px;right: 10px;font-size: 12px;// transform: scale(0.85);// -webkit-transform-origin-x: left;font-family: Microsoft YaHei;}.max {font-size: 1.5rem;color: #00e997;font-weight: bold;}.more {cursor: pointer;color: #00ffff;}.map_content_box {display: flex;flex-direction: column;box-sizing: border-box;// padding-left: 20px;color: #ffffff;}.map_text_title {height: 16px;padding: 0;margin: 0;display: flex;align-items: center;width: 100%;span {width: auto;height: 100%;line-height: 16px;display: block;white-space: nowrap;}}.map_text_body {margin-top: 10px;padding-left: 5px;display: flex;ul {margin: 0;padding: 0;li {list-style: none;height: 18px;// width: 160px;padding: 0;margin: 0;display: flex;align-items: center;justify-content: space-between;overflow: hidden;line-height: 100%;span {font-size: 14px;font-weight: bold;width: 100%;height: 100%;white-space: nowrap;}}}}span {font-size: 12px;transform: scale(0.8);-webkit-transform-origin-x: left;font-family: Microsoft YaHei;}}}.mask {width: 100%;// height: 100%;height: calc(100% - 60px);position: absolute;top: 40px;left: 0;pointer-events: none;z-index: 10;background: radial-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0),rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.1),rgba(44, 90, 112, 0.2),rgba(44, 90, 112, 0.5),rgba(44, 90, 112, 0.8));}.map-info {width: 100%;height: 45px;line-height: 10px;font-size: 12px;color: #ffffff;text-align: left;display: flex;justify-content: flex-start;flex-wrap: wrap;.mini-icon {width: auto;height: 14px;margin-bottom: -2px;margin-right: 2px;}.info-label {display: block;width: auto;}.queryBox {margin-left: 5px;/deep/.el-input__inner {width: 120px;height: 20px;}/deep/.el-input__suffix {display: flex;justify-content: center;align-items: center;}display: inline-block;}}.map-top {position: absolute;top: 0px;z-index: 99;width: 100%;display: flex;justify-content: flex-end;color: #ffffff;font-size: 14px;height: 35px;pointer-events: none;.info-label {display: block;height: 35px;line-height: 35px;padding-left: 15px;}.top-btn {width: 88px;background: url("../../assets/images/map/green_btn.png");border: none;color: #ffffff;font-size: 14px;cursor: pointer;}.top-btn:hover {color: #e4e7ed;}}.message {width: 175px;height: 60px;position: absolute;bottom: 30px;right: 30px;z-index: 15;background: red;}.sample {position: absolute;}
}
.map-info &/deep/.el-checkbox {margin-right: 0px;margin-left: 10px;
}
.map-info &/deep/.el-checkbox__label {padding-left: 3px;color: #ffffff;font-size: 12px;
}
.map-info &/deep/.el-checkbox__input.is-disabled {display: none;
}
.map-info &/deep/.el-checkbox__input.is-disabled + span.el-checkbox__label {padding-left: 15px;
}
</style>
vue开发 百度地图 加载大量点导致卡顿解决方法（vue+vue-baidu-map+mapv）相关推荐
- SPA程序加载首界面eclipse卡顿解决笔记
最近在开发SPA程序项目时遇到一个问题,因为是在开发阶段,所以直接就在eclipse中启动项目. 每次进入首界面时,eclipse就会长时间卡顿,前端界面也加载不出来,很影响开发效率. 在查找问题的时 ...
- QTableWidget加载大量数据不卡顿
QTableWidget加载大量数据不卡顿解决办法 原因 解决方案 举例说明 重新鼠标事件 wheelEvent() 实现方法 事件过滤器 eventFilter() 实现方法 实现滑动加载 总结: ...
- c2010页面闪现_Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法 发布于 2020-2-22| 复制链接 vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然 ...
- Unity网页插件Embedded Browser（ZFBrowser）打包文件无法加载本地网页或网站网址解决方法
Unity网页插件Embedded Browser(ZFBrowser)打包文件无法加载本地网页或网站网址解决方法 问题:最近使用ZFBrowser开发VR嵌入网页发现出现一个问题,在编辑器模式下场景 ...
- Linux下C/C++程序编译链接加载过程中的常见问题及解决方法
Linux下C/C++程序编译链接加载过程中的常见问题及解决方法 1 头文件包含的问题 报错信息 该错误通常发生在编译时,常见报错信息如下: run.cpp:2:10: fatal error: dl ...
- 试图加载格式不正确的程序 解决方法
试图加载格式不正确的程序 解决方法 参考文章: (1)试图加载格式不正确的程序 解决方法 (2)https://www.cnblogs.com/94cool/archive/2012/11/06/27 ...
- PS安装扩展面板提示无法加载,因为它未经正确签署解决方法(适用于Mac/Win)
最近发现好多小伙伴在使用Photoshop Mac端或者win端安装ps扩展面板时,总会遇到Photoshop错误提示无法加载,因为它未经正确签署.今天小编就和大家分享解决Mac/Win端ps扩展面板 ...
- miui系统负一屏快递详情“显示数据加载异常，请点击重试”的解决方法
miui系统负一屏快递详情"显示数据加载异常,请点击重试"的解决方法 1.下载链接中,后缀为xml和bak的两个快应用服务框架的备份包 2.使用小米,设置 – 本地备份 功能 随便 ...
- Qt 加载百度地图 加载google地图
今天开始研究地图了 为以后的航线显示做准备 首先想到的是调用google的地图,凭自己的感觉 地图好像google比较牛一点 .但是在自己查资料的过程中遇到的一些事情让我选择了百度地图.话不多说 正 ...
最新文章
- 【web前端】可筛选[输入搜索]的select(重写)
- 桌面版应用_桌面版应用程序的前世今生
- Linux_NetworkManager_RHEL7
- linux命令11,每日一个linux命令11-more
- BZOJ 1022 Luogu P4279 [SHOI2008]小约翰的游戏 (博弈论)
- tensorflow对应的cudnn、cuda版本
- Matlab中的文件读取函数
- UI5 plugin - uploadCollection
- matlab二元方程组,用matlab解一个二元方程组,会的进,得到解再回答
- [cogs1065]绿豆蛙的归宿
- 办公 自动化 录制行为_我们可以自动化开放行为吗？
- GP学习（三）—How to run a geoprocessing tool
- python对象传递_Python参数传递对象的引用原理解析
- Python批量提取PDF文件中的文本
- 办公软件入门--word01
- matlab simulink 六自由度机械臂模糊控制pid
- 计算机指数函数符号,数学公式及符号大全
- 对应阻尼下的开环增益matlab,自动控制原理实验指导书MATLAB版解析.doc
- Discuz仿魔客吧模板/素材资源站模板/包含DIY文件
- 传奇GOM引擎授权过期解决方法.