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


    问题场景:

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

    1. function addDemoGraphic3(graphicLayer) {
    2. const graphic = new mars3d.graphic.PolylineVolumeEntity({
    3. positions: [
    4. [117.358187, 31.838662, 12.23],
    5. [117.4384, 31.819405, 11.78]
    6. ],
    7. style: {
    8. shape: "circle",
    9. radius: 80,
    10. cornerType: Cesium.CornerType.BEVELED,
    11. materialType: mars3d.MaterialType.LineFlow,
    12. materialOptions: {
    13. color: "#1a9850",
    14. image: "img/textures/fence-line.png",
    15. speed: 10,
    16. repeat_x: 6
    17. }
    18. },
    19. attr: { remark: "示例3" }
    20. })
    21. graphic.on(mars3d.EventType.click, function (event) {
    22. event.stopPropagation();
    23. console.log("管道点击事件")
    24. // 切换颜色
    25. console.log("旧颜色:", graphic.style.materialOptions.color)
    26. if (graphic.style.materialOptions.color === "#1a9850") {
    27. graphic.style.materialOptions.color = "#61fa08";
    28. console.log("新颜色:", graphic.style.materialOptions.color)
    29. } else {
    30. console.log("切换颜色:默认颜色")
    31. graphic.style.materialOptions.color = "#1a9850";
    32. }
    33. console.log("新颜色:::", graphic.style.materialOptions)
    34. console.log("坐标:::", graphic.positions)
    35. // 更新管道的样式
    36. graphic.setStyle(graphic.style);
    37. graphicLayer.needUpdate = true;
    38. })
    39. graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
    40. }

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

    正确语法参考:

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

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

    当前效果:

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

    相关代码:

    1. graphic.on(mars3d.EventType.click, function (event) {
    2. event.stopPropagation();
    3. console.log("管道点击事件")
    4. // 切换颜色
    5. console.log("旧颜色:", graphic.style.materialOptions.color)
    6. let newColor = "#61fa08"
    7. if (graphic.style.materialOptions.color === "#1a9850") {
    8. newColor = "#61fa08";
    9. } else {
    10. newColor = "#1a9850";
    11. }
    12. console.log("新颜色:::", graphic.style.materialOptions)
    13. console.log("坐标:::", graphic.positions)
    14. // 更新管道的样式
    15. graphic.setStyle(
    16. {
    17. materialOptions: {
    18. color: newColor,
    19. image: "img/textures/fence-line.png",
    20. speed: 10,
    21. repeat_x: 6
    22. }
    23. }
    24. );
    25. })
    26. graphicLayer.addGraphic(graphic)

  • 相关阅读:
    分享篇:我用数据分析做副业
    java基于Springboot+vue的宠物销售商城网站 elementui
    Lua中文语言编程源码-第二节,更改lbaselib.c基础库模块, 使Lua支持中文关键词(与操作相关的)
    12 带音视频、多媒体、2D3D显示加速的嵌入式类芯片介绍
    【Vue 开发实战】基础篇 # 2:组件基础及组件注册
    音视频同步原理
    Shell脚本中常见的几种变量类型
    从文件加密到到视频文件进度条播放揭秘
    视频剪辑必备,5个音效素材网
    什么是应用生命周期管理 (ALM)
  • 原文地址:https://blog.csdn.net/m0_69803146/article/details/140457033