openlayers 实现等值面地图上贴图

最新推荐文章于 2022-11-18 17:08:48 发布

今天也需要努力搬砖呐

最新推荐文章于 2022-11-18 17:08:48 发布

阅读量776

点赞数

分类专栏： openlayers 文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/weixin_46262744/article/details/123862821

版权

openlayers 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

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);
    }