PolylineVolumeEntity通过materialOptions设置颜色,点击切换颜色

157 篇文章 2 订阅
140 篇文章 0 订阅

问题场景:

实现点击管道切换颜色功能。管道未使用style.materialOptions的创建管道方式可以正常切换颜色。但是使用了materialOptions设置颜色方式创建的管道,点击后管道消失不见。具体代码如下:

function addDemoGraphic3(graphicLayer) {
const graphic = new mars3d.graphic.PolylineVolumeEntity({
positions: [
[117.358187, 31.838662, 12.23],
[117.4384, 31.819405, 11.78]
],
style: {
shape: "circle",
radius: 80,
cornerType: Cesium.CornerType.BEVELED,
materialType: mars3d.MaterialType.LineFlow,
materialOptions: {
color: "#1a9850",
image: "img/textures/fence-line.png",
speed: 10,
repeat_x: 6
}
},
attr: { remark: "示例3" }
})
graphic.on(mars3d.EventType.click, function (event) {
event.stopPropagation();
console.log("管道点击事件")
// 切换颜色
console.log("旧颜色:", graphic.style.materialOptions.color)
if (graphic.style.materialOptions.color === "#1a9850") {
graphic.style.materialOptions.color = "#61fa08";
console.log("新颜色:", graphic.style.materialOptions.color)
} else {
console.log("切换颜色:默认颜色")
graphic.style.materialOptions.color = "#1a9850";
}
console.log("新颜色:::", graphic.style.materialOptions)
console.log("坐标:::", graphic.positions)

// 更新管道的样式
graphic.setStyle(graphic.style);
graphicLayer.needUpdate = true;

})
graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
} 

点击后管道消失不见的原因是:

正确语法参考:

graphic.setStyle({...graphic.style})
最好的修改方式建议:

graphic.setStyle({ materialOptions: { color :"RED"}})

当前效果:

PolylineVolumeEntity通过materialOptions设置颜色,点击切换颜色。

相关代码:

graphic.on(mars3d.EventType.click, function (event) {
    event.stopPropagation();
    console.log("管道点击事件")
    // 切换颜色
    console.log("旧颜色:", graphic.style.materialOptions.color)
    let newColor = "#61fa08"
    if (graphic.style.materialOptions.color === "#1a9850") {
      newColor = "#61fa08";
    } else {
      newColor = "#1a9850";
    }
    console.log("新颜色:::", graphic.style.materialOptions)
    console.log("坐标:::", graphic.positions)

    // 更新管道的样式
    graphic.setStyle(
      {
        materialOptions: {
          color: newColor,
          image: "img/textures/fence-line.png",
          speed: 10,
          repeat_x: 6
        }
      }
    );
  })
  graphicLayer.addGraphic(graphic)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值