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中可以控制显示隐藏
  }
相关推荐
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头1 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's1 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络2 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
遗憾随她而去.2 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09013 小时前
浅析Web存储系统
前端