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中可以控制显示隐藏
  }
相关推荐
LaoZhangAI39 分钟前
Claude MCP模型上下文协议详解:AI与外部世界交互的革命性突破【2025最新指南】
前端
LaoZhangAI40 分钟前
2025最全Cursor MCP实用指南:15个高效工具彻底提升AI编程体验【实战攻略】
前端
Kagerou1 小时前
vue3基础知识(结合TypeScript)
前端
市民中心的蟋蟀1 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭1 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试
carterwu1 小时前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端
Face1 小时前
promise 规范应用
前端
Mintopia1 小时前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face1 小时前
事件循环
前端·javascript
ONE_Gua1 小时前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫