vue开发 百度地图 显示图标过多导致卡顿解决方法(vue+vue-baidu-map+mapv)
造成卡顿原因 及解决方法(解释可能有误!!!)
自行通过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>
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 卧槽!VS Code 上竟然也能画流程图了???
作为一款开源的主流代码编辑器,VSCode 在发布之后一直受到不少开发者的喜爱。此前,我们也曾在公众号上分享过多篇文章,向大家推荐了不少 VSCode 上比较实用(或沙雕)的插件。因此,有很多水友也经常调侃道,这世界上就不存在 VSCode 做不到的事。看到大家对 VSCode 如此痴迷…...
2024/5/3 0:49:40 - spring,自定义注解,工厂模式,策略模式优化 if else,jdk1.7
最近项目中使用mqtt监听消息,再根据消息做各种处理,使用大量的if else,代码异常难维护,参考的地址找不到了。。。以下为实现:接收mqtt的接口类package com.mhm.mqttlistener;import org.apache.log4j.Logger;public interface MqttService {public void send(String topic…...
2024/5/2 11:29:51 - 【PAT】1147 Heaps (30分) [heap]
1147 Heaps (30分) #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <vector> #include<string> using namespace std;//m个堆,每个堆n个结点 //输出最大/最小/不是堆 + 后序遍历 vector<int>v; int m, n;void postOrder(int index) {…...
2024/5/2 23:06:13 - VUE项目中使用VUEX后,在IE浏览器访问为空白页面的解决方法
解决方法: 1)安装:cnpm install --save babel-polyfill 2)在build》webpack.base.conf.js文件中,添加’babel-polyfill’: ‘babel-polyfill’, entry: {// 在IE中使用VUEXbabel-polyfill: babel-polyfill,app: ./src/main.js }重新 npm run dev 后,发现可正常查看了...
2024/5/1 8:50:51 - 去掉disabled属性
用removeAttr(‘disabled’);...
2024/4/8 22:57:21 - 剑指 Offer 44. 数字序列中某一位的数字
数字以0123456789101112131415…的格式序列化到一个字符序列中。在这个序列中,第5位(从下标0开始计数)是5,第13位是1,第19位是4,等等。 请写一个函数,求任意第n位对应的数字。 思路: m) 数字按照0123。。101112.。开始排序,第n位是什么:int最大是有10位数,去除0第一…...
2024/5/1 20:27:29 - 五年电气成长路
截止2020年7.17,自己已经毕业五年了,来到公司整整五年。这一路,荆棘密布、欢声笑语。 直到昨天,第一个自己画板,自己调试、自己弄程序的项目算是初有成效了,外加两篇专利,算是给自己这五年画上了一个还不错的句号,但是电子工程师这条花路,才刚刚开始。 从15年毕业到工…...
2024/5/2 0:31:04 - Python基础语法笔记整理——只记录部分不熟少用的
重新整理python语法,不一定有样例 Reference 司守奎,孙玺青,《Python数学实验与建模》 vitu.aiprint()输出 #sep代表各输出之间用i隔开 print(...,sep=i) #end代表输出完前面,最后输出j print(...,end=j)input()输入 变量=input(提示字符串)循环 #正序输出 for i in range(i…...
2024/4/30 18:07:57 - 数组字符串对象
1 instanceof 运算符 用来检测 是否为数组 var arr = []; var obj = {}; console.log(arr instanceof Array); // false console.log(obj instanceof Object); // true2 Array.isArray(参数); H5新增的方法,ie9以上的浏览器支持 var arr = []; var obj = {}; console.log(Arr…...
2024/4/30 17:11:55 - python--基础知识点--__enter__、__exit__
我们前面文章介绍了迭代器和可迭代对象,这次介绍python的上下文管理。在python中实现了__enter__和__exit__方法,即支持上下文管理器协议。上下文管理器就是支持上下文管理器协议的对象,它是为了with而生。当with语句在开始运行时,会在上下文管理器对象上调用\ __enter__ 方…...
2024/4/30 22:07:47 - 如何给HTML元素添加事件
方式一:<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>HTML添加事件的方式一</title><script>function test(){console.log(111);}</script></head><body><input type="button&q…...
2024/5/2 9:01:33 - SpringBoot学习笔记(41-44)
41-【实验】-员工修改-重用页面-修改完成 1.回显员工信息: 用get的方式获取单个员工信息 Controller中使用 @GetMapping("emp/{id}")使用 @PathVariable("id")来获取请求路径中的id 获取后把获取到的对象放入model的数据对象中: model.setAttribute(&quo…...
2024/5/2 22:02:24 - shell脚本--使用3种方法实现石头剪刀布小游戏
文章目录第一种:使用if语句实现第二种:使用case语句实现第三种:if语句和case语句实现 这里我用了3种方法来实现石头剪刀布小游戏,对于新手来说应该是比较易懂的 第一种:使用if语句实现 [root@localhost opt]# vim youxi1.sh #!/bin/bash a=$[RANDOM%3+1] read -p…...
2024/4/29 10:33:52 - 小程序调取echarts API接口
1、将axios.js放到utils下面2、home.json引入axios.js3、home.js4、预览图...
2024/4/8 23:08:28 - 静态/动态与强/弱
本文翻译自:Static/Dynamic vs Strong/Weak I see these terms bandied around all over the place in programming and I have a vague notion of what they mean. 我看到这些术语在编程中遍布各地,我对它们的含义有一个模糊的概念。 A search shows me that such things ha…...
2024/4/30 17:15:53 - ROS程序开机自启动
1.概述 写了这么多ROS的launch脚本,怎么才能开机就启动呢,本文介绍1种方法,使用ROS的 robot_upstart包,下面以pibot_bringuppackage的bringup.launch`演示 2.robot_upstart包 2.1 安装 使用pibot_install_ros.sh一键安装工具即可安装所有pibot所需要的ROS包,如需单独安装su…...
2024/4/8 23:08:27 - wordpress后台打开慢/卡顿的解决方法
wordpress后台打开慢/卡顿的解决方法参考文章: (1)wordpress后台打开慢/卡顿的解决方法 (2)https://www.cnblogs.com/terryguan/p/4549360.html 备忘一下。...
2024/4/30 12:06:25 - css解决外边距溢出
css解决外边距溢出 溢出就是当内容较大,元素区域较小,就会发生溢出效果。外边距溢出就是在父元素没设置边框情况下,为子元素设置外边距,导致了父元素跟着子元素一起产生位移。 如何解决: 1.给父元素添加上边框或上内边距,弊端:会改变父元素实际占地高度。 2.在第一个子元…...
2024/4/8 23:08:24 - 树莓派从入坑到放弃(三) 安装PHPMYADMIN
一、phpMyAdmin phpMyAdmin是一个以PHP为基础,以Web-Base方式架构运行在网站主机上的MySQL的数据库管理工具,让管理者可以直接使用Web接口管理MySQL数据库。 二、安装phpMyAdmin sudo apt-get install phpmyadmin注意:phpmyadmin在安装时应为小写 注意:在选项中选择apache2…...
2024/4/8 23:08:23 - mysql常用函数介绍
流程控制函数 流程控制函数包含以下四种函数 • CASE value WHEN [compare_value] THEN result [WHEN [compare_value] THEN result ...] [ELSE result] END • 当value等于compare_value时,则返回result,否则返回else里的result, 如果没有else子句则返回null • mysql> …...
2024/5/1 10:28:18
最新文章
- ThreeJS:项目搭建
介绍如何基于Vite、Vue、React构建ThreeJS项目。 Vite项目 1. 初始化项目,命令:npm init vitelatest, 2. 安装依赖,命令:npm install, 3. 启动项目,命令:npm run dev。 4. 样式初始…...
2024/5/3 9:36:19 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 防止狗上沙发,写一个浏览器实时识别目标检测功能
家里有一条狗🐶,很喜欢乘人不备睡沙发🛋️,恰好最近刚搬家 狗迎来了掉毛期 不想让沙发上很多毛。所以希望能识别到狗,然后播放“gun 下去”的音频📣。 需求分析 需要一个摄像头📷 利用 chrome…...
2024/4/17 15:32:11 - YOLOv9架构图分享
YOLOv9是YOLO (You Only Look Once)系列实时目标检测系统的最新迭代。它建立在以前的版本之上,结合了深度学习技术和架构设计的进步,以在目标检测任务中实现卓越的性能。通过将可编程梯度信息(PGI)概念与广义ELAN (GELAN)架构相结合,YOLOv9在…...
2024/5/1 14:06:38 - Redis -- 缓存雪崩问题
缓存雪崩是指在同一时段大量的缓存key同时失效或者Redis服务宕机,导致大量请求到达数据库,带来巨大压力。 可能原因 : 同一时间大量的key到期 ; 解决方案: 给不同的Key的TTL添加随机值 利用Redis集群提高服务的可用性 给缓存业务添加降…...
2024/5/1 5:05:01 - 416. 分割等和子集问题(动态规划)
题目 题解 class Solution:def canPartition(self, nums: List[int]) -> bool:# badcaseif not nums:return True# 不能被2整除if sum(nums) % 2 ! 0:return False# 状态定义:dp[i][j]表示当背包容量为j,用前i个物品是否正好可以将背包填满ÿ…...
2024/5/2 11:19:01 - 【Java】ExcelWriter自适应宽度工具类(支持中文)
工具类 import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellType; import org.apache.poi.ss.usermodel.Row; import org.apache.poi.ss.usermodel.Sheet;/*** Excel工具类** author xiaoming* date 2023/11/17 10:40*/ public class ExcelUti…...
2024/5/2 16:04:58 - Spring cloud负载均衡@LoadBalanced LoadBalancerClient
LoadBalance vs Ribbon 由于Spring cloud2020之后移除了Ribbon,直接使用Spring Cloud LoadBalancer作为客户端负载均衡组件,我们讨论Spring负载均衡以Spring Cloud2020之后版本为主,学习Spring Cloud LoadBalance,暂不讨论Ribbon…...
2024/5/2 23:55:17 - TSINGSEE青犀AI智能分析+视频监控工业园区周界安全防范方案
一、背景需求分析 在工业产业园、化工园或生产制造园区中,周界防范意义重大,对园区的安全起到重要的作用。常规的安防方式是采用人员巡查,人力投入成本大而且效率低。周界一旦被破坏或入侵,会影响园区人员和资产安全,…...
2024/5/2 9:47:31 - VB.net WebBrowser网页元素抓取分析方法
在用WebBrowser编程实现网页操作自动化时,常要分析网页Html,例如网页在加载数据时,常会显示“系统处理中,请稍候..”,我们需要在数据加载完成后才能继续下一步操作,如何抓取这个信息的网页html元素变化&…...
2024/5/2 9:47:31 - 【Objective-C】Objective-C汇总
方法定义 参考:https://www.yiibai.com/objective_c/objective_c_functions.html Objective-C编程语言中方法定义的一般形式如下 - (return_type) method_name:( argumentType1 )argumentName1 joiningArgument2:( argumentType2 )argumentName2 ... joiningArgu…...
2024/5/2 6:03:07 - 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】
👨💻博客主页:花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】🌏题目描述🌏输入格…...
2024/5/2 9:47:30 - 【ES6.0】- 扩展运算符(...)
【ES6.0】- 扩展运算符... 文章目录 【ES6.0】- 扩展运算符...一、概述二、拷贝数组对象三、合并操作四、参数传递五、数组去重六、字符串转字符数组七、NodeList转数组八、解构变量九、打印日志十、总结 一、概述 **扩展运算符(...)**允许一个表达式在期望多个参数࿰…...
2024/5/2 23:47:43 - 摩根看好的前智能硬件头部品牌双11交易数据极度异常!——是模式创新还是饮鸩止渴?
文 | 螳螂观察 作者 | 李燃 双11狂欢已落下帷幕,各大品牌纷纷晒出优异的成绩单,摩根士丹利投资的智能硬件头部品牌凯迪仕也不例外。然而有爆料称,在自媒体平台发布霸榜各大榜单喜讯的凯迪仕智能锁,多个平台数据都表现出极度异常…...
2024/5/2 5:31:39 - Go语言常用命令详解(二)
文章目录 前言常用命令go bug示例参数说明 go doc示例参数说明 go env示例 go fix示例 go fmt示例 go generate示例 总结写在最后 前言 接着上一篇继续介绍Go语言的常用命令 常用命令 以下是一些常用的Go命令,这些命令可以帮助您在Go开发中进行编译、测试、运行和…...
2024/5/3 1:55:15 - 用欧拉路径判断图同构推出reverse合法性:1116T4
http://cplusoj.com/d/senior/p/SS231116D 假设我们要把 a a a 变成 b b b,我们在 a i a_i ai 和 a i 1 a_{i1} ai1 之间连边, b b b 同理,则 a a a 能变成 b b b 的充要条件是两图 A , B A,B A,B 同构。 必要性显然࿰…...
2024/5/2 9:47:28 - 【NGINX--1】基础知识
1、在 Debian/Ubuntu 上安装 NGINX 在 Debian 或 Ubuntu 机器上安装 NGINX 开源版。 更新已配置源的软件包信息,并安装一些有助于配置官方 NGINX 软件包仓库的软件包: apt-get update apt install -y curl gnupg2 ca-certificates lsb-release debian-…...
2024/5/2 9:47:27 - Hive默认分割符、存储格式与数据压缩
目录 1、Hive默认分割符2、Hive存储格式3、Hive数据压缩 1、Hive默认分割符 Hive创建表时指定的行受限(ROW FORMAT)配置标准HQL为: ... ROW FORMAT DELIMITED FIELDS TERMINATED BY \u0001 COLLECTION ITEMS TERMINATED BY , MAP KEYS TERMI…...
2024/5/3 1:55:09 - 【论文阅读】MAG:一种用于航天器遥测数据中有效异常检测的新方法
文章目录 摘要1 引言2 问题描述3 拟议框架4 所提出方法的细节A.数据预处理B.变量相关分析C.MAG模型D.异常分数 5 实验A.数据集和性能指标B.实验设置与平台C.结果和比较 6 结论 摘要 异常检测是保证航天器稳定性的关键。在航天器运行过程中,传感器和控制器产生大量周…...
2024/5/2 8:37:00 - --max-old-space-size=8192报错
vue项目运行时,如果经常运行慢,崩溃停止服务,报如下错误 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 因为在 Node 中,通过JavaScript使用内存时只能使用部分内存(64位系统&…...
2024/5/2 9:47:26 - 基于深度学习的恶意软件检测
恶意软件是指恶意软件犯罪者用来感染个人计算机或整个组织的网络的软件。 它利用目标系统漏洞,例如可以被劫持的合法软件(例如浏览器或 Web 应用程序插件)中的错误。 恶意软件渗透可能会造成灾难性的后果,包括数据被盗、勒索或网…...
2024/5/2 9:47:25 - JS原型对象prototype
让我简单的为大家介绍一下原型对象prototype吧! 使用原型实现方法共享 1.构造函数通过原型分配的函数是所有对象所 共享的。 2.JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象,所以我们也称为原型对象…...
2024/5/2 23:47:16 - C++中只能有一个实例的单例类
C中只能有一个实例的单例类 前面讨论的 President 类很不错,但存在一个缺陷:无法禁止通过实例化多个对象来创建多名总统: President One, Two, Three; 由于复制构造函数是私有的,其中每个对象都是不可复制的,但您的目…...
2024/5/2 18:46:52 - python django 小程序图书借阅源码
开发工具: PyCharm,mysql5.7,微信开发者工具 技术说明: python django html 小程序 功能介绍: 用户端: 登录注册(含授权登录) 首页显示搜索图书,轮播图࿰…...
2024/5/3 7:43:42 - 电子学会C/C++编程等级考试2022年03月(一级)真题解析
C/C++等级考试(1~8级)全部真题・点这里 第1题:双精度浮点数的输入输出 输入一个双精度浮点数,保留8位小数,输出这个浮点数。 时间限制:1000 内存限制:65536输入 只有一行,一个双精度浮点数。输出 一行,保留8位小数的浮点数。样例输入 3.1415926535798932样例输出 3.1…...
2024/5/3 1:54:59 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57