一、图表内容不显示
javascript
watch: {
chartData3: {
handler() {
this.init();
},
},
timeData3: {
handler() {
this.init();
},
},
},
添加上面代码可以动态监控数据,实现图表的展示。
二、背景图片报错显示不出来
解决方法:
css
background: url(~@/assets/login/e.png)
将引入改为 ~@方式引入即可
~@的意思: @是webpack设置的路径名,代表的是src目录,可以在build / webpack.base.conf.js更改设置
三、轨迹不随地图缩放而缩放
javascript
init() {
this.olSource_line = new VectorSource();
console.log("this.viewZoom1:", this.viewZoom);
this.olLayer_line = new VectorLayer({
source: this.olSource_line,
style: (feature) => {
console.log("this.viewZoom2:", this.viewZoom);
let coords = feature.getGeometry().getCoordinates();
return [
new Style({
stroke: new Stroke({
color: this.style.line_stroke,
width: this.viewZoom + 2,
}),
}),
...this.getPointsStyle(coords)
]
},
});
this.olMap.addLayer(this.olLayer_line);
}
地图缩放时this.viewZoom1在改变,但是this.viewZoom2不变。
解决方法:
添加监听函数监听数据变化
javascript
init() {
this.olSource_line = new VectorSource();
this.olLayer_line = new VectorLayer({
source: this.olSource_line,
style: (feature) => {
console.log("this.viewZoom:", this.viewZoom);
let coords = feature.getGeometry().getCoordinates();
return [
new Style({
stroke: new Stroke({
color: this.style.line_stroke,
width: this.viewZoom + 2,
}),
}),
...this.getPointsStyle(coords)
]
},
});
this.olMap.addLayer(this.olLayer_line);
// 添加地图缩放事件监听器
this.olMap.on('moveend', () => {
this.viewZoom = this.olMap.getView().getZoom();
this.updateLineStyle(); // 更新轨迹线样式
});
}
updateLineStyle() {
// 在这里更新轨迹线的样式,可以根据新的 this.viewZoom 值进行相应的样式调整
let styleFunction = (feature) => {
let coords = feature.getGeometry().getCoordinates();
console.log("this.viewZoom:", this.viewZoom);
return [
new Style({
stroke: new Stroke({
color: this.style.line_stroke,
width: this.viewZoom + 2,
}),
}),
...this.getPointsStyle(coords)
];
};
this.olLayer_line.setStyle(styleFunction);
}