antv L7地图报错：context lost at Funciton

某天疯狂渲染地图组件，大概17次来回切换，屏幕重新渲染地图，最终它还是没能扛下所有，不幸崩塌。

分析可能的原因：

1、由于L7地图画布一直累加在页面上，old context 无法回溯更新，“新的来了，旧的依旧不去”，最后导致画布丢失。

解决方案：重新渲染新的地图画布之前，将上一次画布销毁，直接用的destroy()方法。

结果：重新渲染的时候看着是很丝滑，看上去旧的画布已经销毁不复还，再次试验发现10余次渲染之后又爆红报错了。

2、查看dom节点，发现地图组件是销毁了，它的底图（图上白色背景的）依旧保留，无数个canvas节点堆积如山。

解决方案：通过官方提供的destory()没办法解决这个bug，只能换一种思路。每次重新渲染地图画布，无非是想把新的数据灌进去再进行渲染，那我们就只画一个地图画布，接下来的操作，只更新数据，不更新画布。

updateData(layer: DRILL_LEVEL, newData: Array<{
[key: string]: any;
}>, joinByField?: [string, string]): void;

核心代码 : updateData()

import React, { useEffect, useState } from 'react';import { Scene, Control } from '@antv/l7';
import { DrillDownLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
import { getAccountMapList } from '../../../../../services/map/api';
import moment from 'moment';
import '../index.css';
import { format } from '../../utils';
import { Spin } from 'antd';let drillLayer: DrillDownLayer;
interface MapProps {selectTime: any;isDay: any;
}
const Map: React.FC<MapProps> = (props: any) => {const { selectTime, isDay } = props;const [loading, setLoading] = useState(false);let areaName = '' as any;let provinceData = [] as any;let cityDatas = [] as any;useEffect(() => {const scene = new Scene({id: 'mapWarning',map: new Mapbox({center: [116.2825, 39.9],pitch: 0,style: 'blank',zoom: 3,minZoom: 0,maxZoom: 10,}),});scene.on('loaded', () => {drillLayer = new DrillDownLayer(scene, {provinceData: provinceData,cityData: cityDatas,joinBy: ['NAME_CHN', 'name'],viewStart: 'Country',viewEnd: 'Province',drillDownEvent: async (props, type) => {console.log(props, type);},fill: {color: {field: 'alarmTotal',values: (value: any) => {if (value > 0 && value < 10) return '#B8E1FF';else if (value > 10 && value <= 100) return '#7DAAFF';else if (value > 100 && value <= 500) return '#3D76DD';else if (value > 500 && value <= 1000) return '#0047A5';else if (value > 1000 && value <= 10000) return '#001D70';else if (value > 10000) return '#051d3c';else return '#ccc';},},},country: {fill: {color: {field: 'alarmTotal',values: (value: any) => {if (value > 0 && value < 10) return '#B8E1FF';else if (value > 10 && value <= 100) return '#7DAAFF';else if (value > 100 && value <= 500) return '#3D76DD';else if (value > 500 && value <= 1000) return '#0047A5';else if (value > 1000 && value <= 10000) return '#001D70';else if (value > 10000) return '#051d3c';else return '#ccc';},},},},popup: {enable: true,Html: (props) => {if (props.alarmTotal > 0) {const startTime = selectTime[0] ? selectTime[0] : props.startTime;const endTime = selectTime[1] ? selectTime[1] : props.endTime;return `<div style="maxWidth:300"><span>时间：${moment(startTime).format('YYYY/MM/DD')}—${moment(endTime,).format('YYYY/MM/DD')}</span><br/><span>地域：${props.NAME_CHN}</span><br/><span>预警总量：${format(props.alarmTotal)}</span><br/><span>已处理预警量：${format(props.processedAlarmNum)}</span><br/><span>待处理预警量：${format(props.pendingAlarmNum)}</span><br/></div>`;} else {return `<span>暂无数据</span>`;}},},legend: {position: 'topright',},});});// 添加图例const color = ['#ccc', '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70', '#051d3c'];const legend = new Control({position: 'topleft',});legend.onAdd = function () {const el = document.createElement('div');el.className = 'infolegend legend';const grades = ['0', '1-9', '10-99', '100-499', '500-999', '1000-10000', '>10000'];for (let i = 0; i < grades.length; i++) {el.innerHTML += `<span style="margin-right: 24px"><i style="background:${color[i]};display: inline-block; width: 10px;height: 10px;"></i>${grades[i]}</span>`;}return el;};scene.addControl(legend);}, []);useEffect(() => {if (drillLayer) {const draw = async () => {setLoading(true);getAccountMapList({startTime: selectTime[0],endTime: selectTime[1],}).then((res: any) => {const list = res?.data || [];provinceData = list;for (let i = 0; i < list.length; i++) {const listChildren = list[i].children;if (listChildren) {listChildren.map((item: any) => {cityDatas.push(item);});}}setLoading(false);drillLayer.updateData('province', provinceData);drillLayer.updateData('city', cityDatas);});};draw();}}, [selectTime, areaName]);return (<Spin spinning={loading}><divid="mapWarning"style={{ height: '555px', justifyContent: 'center', position: 'relative' }}/></Spin>);
};export default Map;

一劳永逸～数据畅通无阻，交互也很丝滑

antv L7地图报错：context lost at Funciton相关推荐

maven 项目报错Context initialization failed
Context initialization failed 当我对maven 项目进行clean 的时候再次打开就报错Context initialization failed 同时i显示找不到dao ...
R语言ggplot绘制地图-报错汇总（一）
R语言ggplot绘制地图-报错汇总报错两例报错1: 报错2: 报错两例在用ggplot绘制地图时出现了两个报错,网上搜索了没有相关说明,虽然解决方式很蠢,但是可能对于出现同样报错的人会有帮助, ...
在vue项目中使用AntV L7地图下钻，异步调用不重复生成
AntV L7 地图下钻的踩坑生成实现地图下钻.样式.数据异步调用生成,以及细节. ==注释后有'@#@#*'为重要== ==如有不对请指出== 1.安装AntV L7以及相关的组件引用 2.在da ...
Antv L7地图可视化
此为系列博客 Tomcat本地服务器搭建+本地项目 Antv L7地图可视化 (当前位置) Antv + Tomcat L7地图本地资源可视化 Antv是一款阿里开发的可视化框架,实例数据如http ...
vue引入百度地图报错 BMap未定义 error ‘BMap‘ is not defined
vue项目引入百度地图报错 BMap未定义; 在经过了多次的测试后,修改webpack等配置文件后,发现了一个十分便捷的处理方法: 首先是在地图加载的方法中打印了window,发现BMap是挂载在w ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
MAP地图报错Unable to preventDefault inside passive event listener invocation.
地图每次鼠标点击.移入移出都会报 Unable to preventDefault inside passive event listener invocation. 不管是对接什么地图都会报错原因 ...
http请求报错context deadline exceeded (Client.Timeout exceeded while awaiting headers)
context deadline exceeded (Client.Timeout exceeded while awaiting headers) 原因: 目标地址不可达.网络不通导致: 出现此情况 ...
高德地图报错USERKEY_PLAT_NOMATCH解决办法 + 通过经纬度获取当前位置
一.场景我希望通过一个按钮能获取到当前的位置信息. 比如说街道.周围的地标啥的- 二.编写代码.执行.并发现问题 1.通过 js获取到经纬度, 2.通过高德地图api提供的地理逆解析获取到相关信息: ...

antv L7地图报错：context lost at Funciton

antv L7地图报错：context lost at Funciton相关推荐

最新文章

热门文章