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中可以控制显示隐藏
  }
相关推荐
w2sfot2 分钟前
Passing Arguments as an Object in JavaScript
开发语言·javascript·ecmascript
烛阴16 分钟前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
吃饭最爱20 分钟前
html的基础知识
前端·html
我没想到原来他们都是一堆坏人21 分钟前
(未完待续...)如何编写一个用于构建python web项目镜像的dockerfile文件
java·前端·python
前端Hardy42 分钟前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy43 分钟前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙1 小时前
替代 Object.freeze 的精准只读模式
前端·javascript
web前端1231 小时前
Java客户端开发指南 - 与Web开发对比分析
前端
龙在天1 小时前
前端 9大 设计模式
前端
搞个锤子哟1 小时前
网站页面放大缩小带来的问题
前端