帮我把代码换一个表达方式，但变量和名称不要改

当然可以，以下是对你提供的代码进行了一些结构上的调整，使其更简洁易读，同时保留了原有的变量和名称： ```javascript import './style.css'; import * as Cesium from 'cesium'; import { CesiumBegin } from "./js/CesiumBegin.js"; import { CesiumImageryLayers7 } from "./js/CesiumImageryLayers.js"; import { TianWMTSimg, TianWMTSter, TianWMTSvec, DWMS } from "./js/CesiumImageryLayers.js"; const cesiumContainer = "cesiumContainer"; const viewerOptions = { timeline: false, animation: false, fullscreenButton: false, }; const viewer = CesiumBegin.init(cesiumContainer, viewerOptions); viewer.imageryLayers.removeAll(); const sceneModes = { '2D': Cesium.SceneMode.SCENE2D, '3D': Cesium.SceneMode.SCENE3D, }; document.getElementById('2D').addEventListener('click', () => setSceneMode(sceneModes['2D'])); document.getElementById('3D').addEventListener('click', () => setSceneMode(sceneModes['3D'])); CesiumImageryLayers7.ImageryLayer(viewer, 1); CesiumImageryLayers7.ImageryLayer(viewer, 2); CesiumImageryLayers7.ImageryLayer(viewer, 3); TianWMTSimg.addTianWMTSimg(viewer); TianWMTSter.addTianWMTSter(viewer); TianWMTSvec.addTianWMTSvec(viewer); DWMS.addWMS(viewer); const imageryLayers = viewer.imageryLayers; imageryLayers.get(0).show = true; for (let i = 1; i < imageryLayers.length; i++) { imageryLayers.get(i).show = false; } const buttons = { 'b1': [0], 'b2': [1], 'b3': [2], 'b4': [3, 4], 'b5': [5, 6], 'b6': [7, 8], 'DZMU': [9], }; Object.keys(buttons).forEach(buttonId => { const layersToShow = buttons[buttonId]; document.getElementById(buttonId).addEventListener('click', () => toggleLayers(layersToShow)); }); function setSceneMode(mode) { viewer.scene.mode = mode; } function toggleLayers(layersToShow) { for (let i = 0; i < imageryLayers.length; i++) { imageryLayers.get(i).show = layersToShow.includes(i); } } const camera = viewer.camera; const handler = viewer.screenSpaceEventHandler; function decimalToDMS(decimal, isLatitude) { const degrees = Math.floor(Math.abs(decimal)); const minutes = Math.floor((Math.abs(decimal) - degrees) * 60); const seconds = ((Math.abs(decimal) - degrees - minutes / 60) * 3600).toFixed(2); return `${degrees}度 ${minutes}分 ${seconds}秒 ${decimal >= 0 ? (isLatitude ? 'N' : 'E') : (isLatitude ? 'S' : 'W')}`; } function mouseMoving(e) { const worldPoint = camera.pickEllipsoid(e.endPosition); if (worldPoint) { const geoPoint = Cesium.Cartographic.fromCartesian(worldPoint); const lat = Cesium.Math.toDegrees(geoPoint.latitude); const lon = Cesium.Math.toDegrees(geoPoint.longitude); const alt = (camera.positionCartographic.height / 1000).toFixed(3); const latDMS = decimalToDMS(lat, true); const lonDMS = decimalToDMS(lon, false); const xyz = document.getElementById('xyz'); xyz.style.display = 'block'; xyz.innerHTML = `${latDMS}, ${lonDMS}, ${alt} km`; } else { document.getElementById('xyz').style.display = 'none'; } } handler.setInputAction(mouseMoving, Cesium.ScreenSpaceEventType.MOUSE_MOVE); const cameraActions = { 'zoomIn': () => viewer.camera.zoomIn(), 'zoomOut': () => viewer.camera.zoomOut(), 'rotateLeft': () => viewer.camera.rotateLeft(Cesium.Math.toRadians(30)), 'rotateRight': () => viewer.camera.rotateRight(Cesium.Math.toRadians(30)), 'rotateUp': () => viewer.camera.rotateUp(Cesium.Math.toRadians(30)), 'rotateDown': () => viewer.camera.rotateDown(Cesium.Math.toRadians(30)), }; Object.keys(cameraActions).forEach(actionId => { document.getElementById(actionId).addEventListener('click', cameraActions[actionId]); }); let earthquakeData = []; let currentPage = 1; let itemsPerPage = 9; let cylinderPrimitives = []; function loadEarthquakeDataAndFilter() { fetch('json/earthquake.json') .then(response => response.ok ? response.json() : Promise.reject(new Error('网络响应不是OK'))) .then(data => { if (!data || !data.features || !Array.isArray(data.features)) { throw new Error('数据格式错误'); } earthquakeData = data.features; filterEarthquakes(); }) .catch(error => console.error('获取数据失败:', error)); } function displayResults() { const parent = document.getElementById('entitylist'); parent.innerHTML = ''; clearCylinders(); const pagedData = getPagedData(); if (!pagedData || pagedData.length === 0) { parent.innerHTML = '没有找到匹配的地震事件'; return; } pagedData.forEach(item => { const coordinates = item.geometry?.coordinates; if (Array.isArray(coordinates) && coordinates.length >= 2) { const [longitude, latitude] = coordinates; const button = createQuakeButton(item, longitude, latitude); parent.appendChild(button); } else { console.error('无效的坐标数据', coordinates); } }); updatePagination(); } function createQuakeButton(item, longitude, latitude) { const button = document.createElement('button'); button.className = 'btn btn-outline-danger quake-button'; button.innerHTML = `震中: ${item.properties.震中位}, 震级: ${item.properties.震级}, 时间: ${item.properties.发震日}`; button.addEventListener('click', () => viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, 500000), duration: 2 })); return button; } function getPagedData() { const start = (currentPage - 1) * itemsPerPage; const end = currentPage * itemsPerPage; return earthquakeData.slice(start, end); } function updatePagination() { const totalPages = Math.ceil(earthquakeData.length / itemsPerPage); const paginationContainer = document.getElementById('pagination'); paginationContainer.innerHTML = ''; const prevButton = createPaginationButton('上一页', currentPage !== 1, () => changePage(currentPage - 1)); const nextButton = createPaginationButton('下一页', currentPage !== totalPages, () => changePage(currentPage + 1)); paginationContainer.appendChild(prevButton); paginationContainer.appendChild(nextButton); } function createPaginationButton(text, disabled, onClick) { const button = document.createElement('button'); button.innerText = text; button.disabled = disabled; button.addEventListener('click', onClick); return button; } function changePage(page) { currentPage = page; displayResults(); } function clearFilters() { document.getElementById('minMagnitude').value = ''; document.getElementById('maxMagnitude').value = ''; document.getElementById('startDate').value = ''; document.getElementById('endDate').value = ''; document.getElementById('location').value = ''; const parent = document.getElementById('entitylist'); parent.innerHTML = ''; clearCylinders(); currentPage = 1; } function clearCylinders() { cylinderPrimitives.forEach(primitive => viewer.scene.primitives.remove(primitive)); cylinderPrimitives = []; } function filterEarthquakes() { const minMagnitude = parseFloat(document.getElementById('minMagnitude').value) || -Infinity; const maxMagnitude = parseFloat(document.getElementById('maxMagnitude').value) || Infinity; const startDate = document.getElementById('startDate').value; const endDate = document.getElementById('endDate').value; const location = document.getElementById('location').value.toLowerCase(); const filteredData = earthquakeData.filter(item => { const magnitude = item.properties.震级; const date = item.properties.发震日; const isMagnitudeValid = magnitude >= minMagnitude && magnitude <= maxMagnitude; const isDateValid = (!startDate || date >= startDate) && (!endDate || date <= endDate); const isLocationValid = location ? item.properties.震中位.toLowerCase().includes(location) : true; return isMagnitudeValid && isLocationValid && isDateValid; }); earthquakeData = filteredData; currentPage = 1; displayResults(); } document.getElementById('search').addEventListener('click', loadEarthquakeDataAndFilter); document.getElementById('clear').addEventListener('click', clearFilters); document.getElementById('toggleForm').addEventListener('click', () => { const queryForm = document.getElementById('queryForm'); queryForm.style.display = queryForm.style.display === "none" || queryForm.style.display === "" ? "block" : "none"; }); const geourl = 'json/earthquake.json'; let dataSource; let isVisible = false; document.getElementById('DZ').addEventListener('click', () => { if (isVisible) { viewer.dataSources.remove(dataSource); } else { Cesium.GeoJsonDataSource.load(geourl, { clampToGround: true, markerSymbol: undefined, markerSize: 0, markerColor: Cesium.Color.TRANSPARENT, stroke: Cesium.Color.TRANSPARENT, fill: Cesium.Color.TRANSPARENT }).then(ds => { dataSource = ds; viewer.dataSources.add(dataSource); dataSource.entities.values.forEach(entity => { const magnitude = entity.properties['震级']; let pointSize = 5; let color = Cesium.Color.WHITE; if (magnitude < 4) color = Cesium.Color.BLUE; else if (magnitude < 5) color = Cesium.Color.GREEN; else if (magnitude < 6) color = Cesium.Color.LIGHTYELLOW; else if (magnitude < 7) color = Cesium.Color.YELLOW; else if (magnitude < 8) color = Cesium.Color.ORANGE; else color = Cesium.Color.RED; entity.point = new Cesium.PointGraphics({ color: color, pixelSize: pointSize, outlineColor: Cesium.Color.TRANSPARENT, outlineWidth: 0 }); entity.billboard = undefined; entity.label = undefined; }); }); } isVisible = !isVisible; }); ``` ### 主要改进点： 1. **函数化**：将一些重复的代码提取到函数中，如 `setSceneMode`、`toggleLayers`、`createQuakeButton`、`createPaginationButton`。 2. **对象映射**：使用对象映射来简化事件绑定，如 `sceneModes` 和 `cameraActions`。 3. **循环替换**：使用循环替代重复的代码块，如 `toggleLayers` 中的层显示控制。 4. **代码结构优化**：将相关的代码块组织在一起，提高代码的可读性和维护性。