mapbox 工作问题暂时记录

mapbox样式修改

1.

mapbox直接用class名无法修改样式, 可以添加 :deep 来修改样式

2.

 map.value.getStyle().layers

这行代码可以获取页面中所有图层,可以判断图层id来做相应操作

3.

map.value.setLayoutProperty(layer.id, 'visibility', 'visible')//图层显示

map.value.setLayoutProperty(layer.id, 'visibility', 'none');//图层隐藏

layer.id为map.value.addlayer里的id

4.

vue3 echarts 报错 TypeError: this.dom.getContext is not a function

<div class="boxConten" v-for="item in listData" :key="item">
     <ul class="point-information-box" v-if="item.ranking == '1'"></ul>
     <div class="barchart-box" v-else-if="item.ranking == '2'">
         <!-- 方法一: -->
         <!-- <div ref="EchartsRef" :ref="pushBtnList" style="width: 150px; height: 140px"></div> -->
         <!-- 方法二: -->
         <div :ref="pushBtnList" style="width: 150px; height: 140px"></div>
     </div>
     <div class="barchart-box" v-else-if="item.ranking == '3'"></div>
     <div class="barchart-box" v-else></div>
 </div>

const listData = ref([
	{
		title: '当年统计详情',
		ranking: '1',
		list: [
			[
				{ num: 98, unit: '(%)', name: '检测点合格率' },
				{ num: 100, unit: '(%)', name: '样品合格率' },
			],
			[
				{ num: 356, unit: '(次)', name: '检测总次数' },
				{ num: 486, unit: '(个)', name: '样品总量' },
			],
			[
				{ num: 25, unit: '(次)', name: '指标异常总次数' },
				{ num: 4, unit: '(个)', name: '异常指标总数量' },
			],
		],
	},
	{
		title: '近12月合格率曲线',
		ranking: '2',
		switchoverText: [
			{ name: '检测点', show: true },
			{ name: '样品', show: false },
		],
		show: true,
	},
	{
		title: '近12月合格率曲线',
		ranking: '3',
		switchoverText: [
			{ name: '指标异常次数', show: true },
			{ name: '异常指标数量', show: false },
		],
		show: true,
	},
	{ title: '近12月异常指标占比', ranking: '4' },
]);
const EchartsRef = ref();
const pushBtnList = (el) => {
	EchartsRef.value = el;
};
onMounted(() => {
	initChart();
});
const initChart = () => {
	// 初始化图表
	let timeArr = ['2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02'];
	let valueArr = ['2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02'];
	initecharts(timeArr, valueArr);
};

//加载echarts图
const initecharts = (timeArr: any[], valueArr: any[]) => {
	//方法一
	//let myEcharts = echarts.init(EchartsRef.value[0] as unknown as HTMLElement);
	//方法二
	let myEcharts = echarts.init(EchartsRef.value as unknown as HTMLElement);
	let option = {
		tooltip: {
			trigger: 'axis',
		},
		grid: {
			right: '3%',
			left: '5%',
		},
		xAxis: {
			type: 'category',
			data: timeArr,
			// gridIndex: index,
			axisLabel: {
				fontFamily: 'OPPOSans',
				fontWeight: 500,
				fontSize: 10,
				color: '#3D3D3D',
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: false,
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#EBF0F5',
				},
			},
		},
		yAxis: {
			type: 'value',
			name: '',
			nameTextStyle: {
				fontFamily: 'OPPOSans',
				fontWeight: 500,
				fontSize: 12,
				color: '#3D3D3D',
			},
			axisLabel: {
				fontFamily: 'OPPOSans',
				fontWeight: 500,
				fontSize: 10,
				color: '#3D3D3D',
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#EBF0F5',
				},
			},
			axisLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
		},
		dataZoom: [
			{
				type: 'slider',
				show: true,
				xAxisIndex: [0],
				start: 0,
				end: 100,
				backgroundColor: 'none',
				fillerColor: 'rgba(168, 177, 188, 0.14);', //选中范围的填充颜色
				borderColor: '#EBF0F5',
			},
			{
				type: 'inside',
				xAxisIndex: [0],
			},
		],
		series: [
			{
				data: valueArr,
				type: 'line',
				smooth: true,
			},
		],
	};
	myEcharts.setOption(option);
	// 监听窗口变化，echarts重绘
	window.addEventListener('resize', function () {
		myEcharts.resize();
	});
};

报错总结: v-for 循环会影响到dom的生成, for循环了 会出现多个dom,你ref参数 由原来的 一个 变成了多个
方法一: 在for循环里生成echarts 使用ref绑定, 获取时需要[0]
方法二: 在for循环里生成echarts 使用动态ref绑定, 在pushBtnList里面赋值给 echarts绑定的值,并且不需要下标取值

持续更新…