Mapbox添加image图层

最新推荐文章于 2025-03-17 15:13:16 发布

原创最新推荐文章于 2025-03-17 15:13:16 发布 · 706 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mapbox #vue.js #gis

mapbox+leaflet 专栏收录该内容

64 篇文章

订阅专栏

文章介绍了如何在GIS项目中使用一个名为`initImageLayer`的函数，该函数用于处理图像图层的初始化，确保图像与地图的政区范围精确匹配，并能适应插值图等场景，通过更新URL和设置坐标来调整图层显示。

成果图

在这里插入图片描述
这个图层还是很有用的，一般会应用在插值图等值面、气象雷达卫星云图的各种图的场景，根据坐标范围可以正好的把图片拟合在政区范围里。

源码

export function initImageLayer(layer,val,bound,map){
  if(map.getSource(layer)){
    map.getSource(layer).updateImage({
      url:val,
      coordinates: bound
    })
  }else{
    map.addSource(layer, {
      'type': 'image',
      "url": val,
      "coordinates": bound
    })
    map.addLayer( {
      "id": layer,
      "source": layer,
      "type": "raster",
      "paint": {"raster-opacity": 0.85}
    })
  }
}