vue+openlayers 显示等值面图片的效果

最新推荐文章于 2024-03-21 19:40:05 发布

今天也需要努力搬砖呐

最新推荐文章于 2024-03-21 19:40:05 发布

阅读量403

点赞数

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

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

版权

openlayers 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

vue+openlayers 显示静态的等值面图片的效果

在这里插入图片描述

1.首先去api官网将关于图片的import引入

import { fromLonLat, transform, toLonLat, transformExtent } from "ol/proj";
import ImageStatic from "ol/source/ImageStatic";
import ImageLayer from "ol/layer/Image";
import VectorSource from "ol/source/Vector";

2.实现在地图上贴图

  radarDataimg(){
         
         const extent = transformExtent(
            [60, 6, 140, 56],
            "EPSG:4326",
            "EPSG:3857"
          );
          let imageSource = new ImageStatic({
              url: "static/image/01.png",   //图片的路径
            // url: 'http://139.196.215.3:10243/static/ld.png',
            projection: "EPSG:3857",
            imageExtent: extent,
          });

          this.imageLayered = new ImageLayer({
            source: imageSource,
          });
          this.map.addLayer(this.imageLayered);
     
     },