Cesium JS项目外部EventListeners.js控制台日志不显示问题

一、控制台日志不显示的排查与修复 #

1. 确保DOM加载完成再绑定事件 #

用type="module"引入脚本时，即便加了defer，也可能出现DOM元素未渲染完成就执行脚本的情况，导致document.getElementById('drop-dowm--Buildings-select')返回null，事件监听器根本没绑定上。

修改EventListeners.js，等待DOM加载完成后再执行逻辑：

// 修正axios导入路径，指向node_modules中的实际文件
import axios from '../node_modules/axios/dist/axios.min.js'; 
import { activate3DTileFeaturePicking } from "./appCesium.js";

// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', async () => {
  const selectElement = document.getElementById('drop-dowm--Buildings-select');
  
  // 先检查元素是否存在，避免后续代码报错
  if (!selectElement) {
    console.error('下拉选择框元素未找到，请检查ID拼写');
    return;
  }

  selectElement.addEventListener('change', async function () {
    console.log('选择框触发change事件', selectElement);
    const selectedOptions = this.selectedOptions;
    const optionSelectionArr = [];
    
    try {
      const response = await axios.get('http://localhost:3300/Things');
      // 先打印确认API返回的数据结构，避免层级错误
      console.log('API返回数据:', response.data);
      
      // 修正数据层级：如果response.data.value已是数组，无需再取apiData.value
      const apiData = response.data.value;
      const filteredData = apiData.filter(item => 
        Array.from(selectedOptions).some(option => option.text === item.name)
      );
      
      console.log('过滤后的数据:', filteredData);
      optionSelectionArr.push(filteredData);
      filteredData.forEach(item => activate3DTileFeaturePicking(item));
      
      return optionSelectionArr;
    } catch (err) { // 避免和导入的console.error变量冲突，改用err命名
      console.error('获取数据失败:', err);
    }
  });
});

2. 修正axios导入路径 #

浏览器模块无法直接识别import axios from 'axios'（它不知道node_modules的位置），需要指定axios的实际文件路径，直接引用node_modules中的dist文件即可。

3. 排查数据结构与变量冲突 #

• 原代码中apiData.value.filter存在层级错误：如果response.data.value已是数组，apiData.value会返回undefined，导致filter报错；同时导入import { error } from "console"会和catch中的error变量冲突，无法正确打印错误信息。
• 检查下拉框ID拼写：确认drop-dowm--Buildings-select中的dowm是否应为down，ID错误会直接导致元素找不到，事件无法绑定。

二、实现Cesium 3D对象选中高亮功能 #

在appCesium.js中实现activate3DTileFeaturePicking函数，通过Cesium API修改选中要素的样式：

import * as Cesium from '../node_modules/cesium/Build/Cesium/Cesium.js';

// 保存之前选中的要素，用于取消高亮状态
let highlightedFeature = null;

export function activate3DTileFeaturePicking(buildingData) {
  // 假设你已初始化Cesium Viewer并挂载到全局window对象
  const viewer = window.cesiumViewer; 

  // 取消之前的高亮样式
  if (highlightedFeature) {
    highlightedFeature.style = undefined;
    highlightedFeature = null;
  }

  // 遍历3DTileset，匹配目标建筑并设置高亮
  viewer.scene.primitives.getAllAsync().then(primitives => {
    primitives.forEach(primitive => {
      if (primitive instanceof Cesium.Cesium3DTileset) {
        // 监听要素选中事件
        primitive.selectedFeatures.addEventListener((feature) => {
          // 根据建筑数据的name属性匹配要素
          if (feature.getProperty('name') === buildingData.name) {
            highlightedFeature = feature;
            // 设置高亮样式（黄色）
            feature.style = new Cesium.Cesium3DTileStyle({
              color: 'color("yellow")',
              show: true
            });
            console.log('已高亮建筑:', buildingData.name);
          }
        });
      }
    });
  });
}

注意事项 #

• 确保Cesium Viewer已正确初始化，且能通过全局变量或模块导出访问。
• 根据你的3DTiles数据结构，调整要素属性的匹配逻辑（比如用id替代name）。

内容的提问来源于stack exchange，提问作者Wizzy01