Cesium中el-tree点击其勾选框对应数据上球，点击球上部分出现弹窗和高亮，取消勾选球上数据消失

实现目标：点击el-tree中的勾选框，对应的数据渲染至地球上，点击地球上的对应数据，该处出现高亮及弹窗信息。取消勾选框后，高亮和弹窗信息均消失。

实现方法：

vue中el-tree：

<el-tree
							:data="treeData"
							:props="defaultProps"
							node-key="name"
							show-checkbox
							:default-expand-all="true"
							:expand-on-click-node="false"
							ref="treeBox"
							@check-change="handleCheckChange"
							@node-click="treeCheckedChange"
							:filter-node-method="filterNode"
							highlight-current
							:current-node-key="nowNodeId"
						>
						</el-tree>

import {  addOne, removeOne } from '@/earth/xxx.js' // 引入js中的调用方法
let curEntity // 全页面定义一个变量，方便后续使用
 

data中：树形结构数据通过接口获取，此处不在赘述

treeData: [], // 树数据--通过接口获取
			defaultProps: {
				children: 'groupList',
				label: 'name'
			}, //树形结构默认设置
			nowNodeId: '',
infoDialogShow：false  // 弹窗

methods中：

勾选多选框数据上球的方法：

handleCheckChange(data, ischeck, child) {
			if (data.parent) {
				if (ischeck) {
					let idArr = []  // 清空
					let params = {
						formId: 'xxxxx',
						params: [{ depxxx: data.parent.dexxx, groupList: [data.name] }]
					}
					// 调用第一个接口
					getDataByGroup(params).then((res) => {
						res.data.data.forEach((item) => {
							idArr.push(item.id)
						})
						// 调用第二个接口--第一个接口返回的信息是第二个接口的参数
						queryByNums(idArr).then((res) => {
							// 
							addOne(res.data.data, data.name, this.landClick) // 调用上球方法
						})
					})
				} else {
					removeOne(data.name) // 移除信息
					this.closeInfo() // 关闭弹窗
				}
			}
		},

详细信息弹窗，获取的信息通过接口调用

// 详细信息弹框
		showInfoDialog(id) {
			console.log(id)
			let param = {
				id: id
			}

			// 此处为调用接口并赋值的过程，不在赘述
				})
			})

			this.infoDialogShow = true // 弹窗展示
		},
		// 详细信息弹窗关闭
		closeInfo() {
			this.infoDialogShow = false // 弹窗关闭
			this.clearCurEntity() // 清除高亮
		},

点击事件及清除高亮：

// 点击事件
landClick(entity) {
			this.showInfoDialog(entity.name)
			if (curEntity) {
				curEntity._polygon.material = Cesium.Color.fromCssColorString(curEntity._customColor).withAlpha(0.7)
			}
			entity._polygon.material = Cesium.Color.fromCssColorString('#1256af').withAlpha(0.7)   // 设置的高亮颜色
			curEntity = entity
		},
		// 高亮清除
		clearCurEntity() {
			if (curEntity) {
				curEntity._polygon.material = Cesium.Color.fromCssColorString(curEntity._customColor).withAlpha(0.7)
				curEntity = null
			}
		},

js 文件中：

vue页面中调用了该方法，该方法主要进行了wkt数据像GeoJSON数据的转换、执行该方法时的视角飞行以及根据后端返回的不同数据确定渲染的颜色

export function addOnen(arr, group, clickFunc) {
    arr.forEach(item => {
        if (item.geo) {
           // wkt数据转换为GeoJson
            let geo = WKT.parse(item.geo)
          // 视角飞行
            viewer.scene.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(geo.coordinates[0][0][0][0], geo.coordinates[0][0][0][1], 1000), duration: 4 })

            // 根据后端返回的数据，确定落图的颜色
            if (item.status) {
                if (item.status.indexOf('未') != -1) {
                    addOneGeoJson(geo, '#d0f663', item, group, clickFunc)
                } else {
                    addOneGeoJson(geo, '#fc891e', item, group, clickFunc)
                }
            }

        }

    })

}

该方法主要对传递的数据进行球上的渲染：设置了group属性，作为勾选内容的特别标志，后续可根据该属性对其进行删除

export function addOneGeoJson(urlStr, colorStr, item, group, clickFunc) {
    let entity = null
    if (!urlStr) return
    Cesium.GeoJsonDataSource.load(urlStr).then((dataSource) => {
        let color = Cesium.Color.fromCssColorString(colorStr).withAlpha(0.5)
        dataSource.name = group
        if (group) {
            for (let i = 0; i < dataSource.entities.values.length; ++i) {
                entity = dataSource.entities.values[i]
                if (entity) {
                    // 形状总体
                    if (entity.polygon) {
                        entity.polygon = new Cesium.PolygonGraphics({
                            hierarchy: entity.polygon.hierarchy._value,
                            outline: false,
                            material: color,
                            classificationType: Cesium.ClassificationType.TERRAIN,
                            zIndex: 10,
                            outlineColor: color,
                            outlineWidth: 2,
                            extrudedHeight: 60,
                            show: true,

                        })
                        entity._name = item.id
                        entity._customColor = colorStr
                    }

                }
                entity['leftClick'] = clickFunc;
            }
        }
        dataSource.foundationId = item.foundationId;
        addGeoJsonData.push(dataSource)
        viewer.dataSources.add(dataSource)
        callback(dataSource.entities.values)
    })
}

移除球上渲染的方法：

export function removeOneGeoJson(group) {
    for (let i = 0; i < addGeoJsonData.length; ++i) {
        if (addGeoJsonData[i]._name && addGeoJsonData[i]._name == group) {
            console.log(addGeoJsonData[i]);
            viewer.dataSources.remove(addGeoJsonData[i])
            addGeoJsonData.splice(i, 1)
            i--
            console.log(addGeoJsonData);
        }
    } 
}

这样就实现了勾选数据进行渲染，点击出现高亮和弹窗（前提是项目中已经设置了全局监听），以及移除渲染的方法。