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中可以控制显示隐藏
  }
相关推荐
www_pp_1 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue20 分钟前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码36 分钟前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛40 分钟前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim1 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端1 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_1 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia1 小时前
react 常用钩子 hooks 总结
前端·javascript·react.js