vc-drawings 绘图后 如何选中和鼠标悬停改变颜色

[hanzhichao110]

鼠标悬停黄色区域时无法获取改区域属性 求大佬

[zouyaoji]

有个2思路
1、直接改。监听 vc-drawings 组件的面的事件。vc-drawings的面实际上是用的vc-polygon绘制的，所以只需要在vc-drawings上绑定:polygon-drawing-opts="polygonDrawingOpts" ，并在polygonDrawingOpts配置polygonOpts的事件即可。

  polygonDrawingOpts: {
    polygonOpts: {
      onMouseover: e => {
        console.log(e)
        const index = e.cesiumOject._vcPolylineIndex
        drawingsRef.value.getDrawingActionInstances()[3].cmpRef.value.renderDatas.value[index].polygonOpts.appearance = {
          type: 'MaterialAppearance',
          options: {
            material: {
              fabric: {
                type: 'Color',
                uniforms: {
                  color: 'red' // 你的选中颜色
                }
              }
            },
            faceForward: true,
            renderState: {
              cull: {
                enabled: false
              },
              depthTest: {
                enabled: false
              }
            }
          }
        }
      },
      onMouseout: e => {
        console.log(e)
        const index = e.cesiumOject._vcPolylineIndex
        drawingsRef.value.getDrawingActionInstances()[3].cmpRef.value.renderDatas.value[index].polygonOpts = {}
      }
    }
  }

如上所示，建议用响应的方式，通过e.cesiumOject._vcPolylineIndex拿到这个面在渲染数组中的索引，然后参考上面代码改。当然也可以就可以从e.pickedFeature.primitive中直接拿到cesium原始对象直接通过cesium的api改颜色了。

给的例子是鼠标悬停的，如果要选中的话要用onClick事件自己维护选中。下面方法的例子中有维护选中效果的思路。

2、间接改。vc-drawings 组件仅拿来绘制，每次绘制完后生成的面都用数据源实体来渲染，然后就比较好改颜色了，这儿有参考。
https://zouyaoji.top/vue-cesium-demo/dynamic-render/recursive-list

[hanzhichao110]

如果我想修改绘画的区域颜色怎么处理呢 默认是黄色 怎么改变线框的颜色和面的颜色

[zouyaoji]

改所有的就直接改 polygon-drawing-opts 即可，具体参考：
https://github.com/zouyaoji/vue-cesium/blob/dev/packages/components/drawings/src/defaultProps.ts
https://github.com/zouyaoji/vue-cesium/blob/dev/packages/composables/use-drawing/defaultOpts.ts

如果要单独改某一个就通过模板引用ref拿到renderDatas和索引去修改。
新问题建议新开，好让其他有类似问题的人搜索参考。

[hanzhichao110]

好的

[IKE1001]

大佬 问一下 没绘制之前 想实现动态定义绘制的面的颜色 该怎么弄呢（目前自定义颜色是可以修改的，动态不可以）

通过这种方式设置 是不行，有其他方式设置吗
const seleChange = (e) => {
// 选择动态设置颜色
if (e == 1) {
// setPolygonOpts.value.polygonOpts.appearance.options.material.fabric.uniforms.color = 'rgb(252, 0, 6,0.5)';
}
}

[zouyaoji]

#206