话不多说,直接上效果图:
在这里墙体其实是有一个不太明显的流动效果
实现方式:这里我使用了PolylineEntity+WallPrimitive,开始我用的是polygonEntity但是发现实现效果并不好,所有直接改用了线
map.vue文件:在methods方法中调用后台接口返回的数据
//影像范围线initImageLine(){let vthis = this;getimageRangeLine().then(res=>{if(res.status == 0){let arr = res.wktList[0].lnglatvthis.graphicLayer_outerLine = initLine(this.map,arr)} }).catch(err=>{console.log(err)})},
map.js文件:封装initLine方法,叠加在地图上展示
//叠加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中可以控制显示隐藏}