vue+openlayers 实现地图贴等值面
在ol项目里每次都有这个需求,所一在这里记录下,下次就有下手思路了
首先在data中定义值
imagesUrl: "", //等值面
imageLayered: {}, //图片
然后我们在methods中去写方法
dzmData(val) {
setTimeout(() => {
//调接口
this.postRequest("/parsing/weather/getIsosurface?type=t2").then(
(res) => {
let data = res.data.result;
//图片形式
this.imagesUrl = "data:image/jpg;base64," + data;
const extent = transformExtent(
[73, 4, 135, 53],
"EPSG:4326",
"EPSG:3857"
);
let imageSource = new ImageStatic({
url: this.imagesUrl,
projection: "EPSG:3857",
imageExtent: extent,
// projection: null
locationFlag: "temperatureFieldImgSource",
});
this.imageLayered = new ImageLayer({
source: imageSource,
locationFlag: "temperatureFieldImgLayer",
visible: true,
});
//添加到地图事例
this.map.addLayer(this.imageLayered);
console.log("渲染wanch");
}
);
}, 1);
}
由此我们就可以实现等值面图片方法了~