vue+mars3d给影像底图叠加炫酷效果

话不多说,直接上效果图:

在这里墙体其实是有一个不太明显的流动效果

实现方式:这里我使用了PolylineEntity+WallPrimitive,开始我用的是polygonEntity但是发现实现效果并不好,所有直接改用了线

map.vue文件:在methods方法中调用后台接口返回的数据

javascript 复制代码
//影像范围线
      initImageLine(){
        let vthis = this;
        getimageRangeLine().then(res=>{
          if(res.status == 0){
            let arr = res.wktList[0].lnglat
            vthis.graphicLayer_outerLine = initLine(this.map,arr)
          } 
        }).catch(err=>{
          console.log(err)
        })
      },

map.js文件:封装initLine方法,叠加在地图上展示

javascript 复制代码
  //叠加polygonEntity--最外层范围线
  function initLine(m,p){
    graphicLayer_outerLine = new mars3d.layer.GraphicLayer();
    m.addLayer(graphicLayer_outerLine)
      let polylineGraphic = new mars3d.graphic.PolylineEntity({
        positions: p,
        style: {
          width: 20,
          color: "#b3e0ff",
          depthFail: false,
          materialType: mars3d.MaterialType.PolylineGlow,
          materialOptions: {
            color: "#00FFFF", 
            glowPower: 0.1,
            taperPower: 0.5,
          }
        }
      })
      graphicLayer_outerLine.addGraphic(polylineGraphic)
      let wall = new mars3d.graphic.WallPrimitive({
        positions: p,
        style: {
          setHeight: -10000,
          diffHeight: 10000, // 墙高
          width: 10,
          materialType: mars3d.MaterialType.LineFlow,
          materialOptions: {
            image: "//data.mars3d.cn/img/textures/fence.png",
            color: "#0b88e3",
            repeatX: 2, // 重复数量
            axisY: true, // 竖直方向
            opacity: 0.7, // 透明度
            speed: 20, // 速度
          }
        },
        closed:true
      })
      graphicLayer_outerLine.addGraphic(wall)
      return graphicLayer_outerLine      //这里返回是因为我需要在map.vue中可以控制显示隐藏
  }
相关推荐
yngsqq16 分钟前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk19 分钟前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan21 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE25 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年26 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能37 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房37 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
轻语呢喃38 分钟前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂42 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7742 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor