Mapbox添加image图层

成果图

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

源码

javascript 复制代码
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}
    })
  }
}
相关推荐
FRing034 小时前
vue2干货总结7(自定义指令、插槽、单页应用程序、路由的使用(VueRouter))
开发语言·前端·vue.js·vue2
ruanno_top8 小时前
点全选,已选的被清空了:Transfer 三态复选框的三个 bug
vue.js
时间的情敌9 小时前
Cesium 加载 3D Tiles 倾斜摄影、压平、样式设置(Vue3 实战)
vue.js·3d·cesium
vjmap20 小时前
MCP 实战:在 WorkBuddy 里一句话让 AI 生成红军长征地图动画(唯杰 AI 地图动画 MCP 接入教程)
aigc·gis·mcp
usdoc文档预览1 天前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑
Java小卷1 天前
面向 schema 编程,轻松搞定 Element 虚拟化表格复杂应用场景
vue.js·低代码·element
仨孩子的爹1 天前
Lodop、hiprint 与 vue-print-designer:打印控件选型对比
vue.js
ruanno_top1 天前
四个 canvas 组件,在 2 倍屏上一直是糊的
vue.js
ruanno_top1 天前
一个脏数据能让整条折线消失:图表组件的四种数据契约
vue.js
我才是银古2 天前
6 小时做一部 10 分钟纪录片:DeepSeek 4.1 Flash + DeepSeek Harness 的完整制片记录
gis·deepseek·dsh