entity.polygon.material = Cesium.Color.fromCssColorString(entity.properties._color._value).alpha('0.5'); 这样写奥错

时间: 2024-12-23 07:24:12 AIGC 浏览: 70
这段代码是在Cesium.js库中操作场景元素的材质颜色,`entity.polygon.material` 是指向该元素使用的材质对象。`Cesium.Color.fromCssColorString()` 函数将CSS颜色字符串转换成Cesium的颜色对象,`entity.properties._color._value` 应该是一个包含颜色信息的属性值,`alpha('0.5')` 是设置新颜色的透明度为0.5(半透明)。 这样写的意图是先从CSS颜色字符串获取颜色,然后调整其透明度。然而,这个写法有一个潜在的问题。`_color._value` 可能不是一个有效的CSS颜色字符串,如果没有正确的解析,可能会导致错误。此外,`alpha` 函数可能不是Cesium直接提供的,而是自定义的一个函数,或者是库中某个插件的一部分。 正确的做法应该是检查 `_color._value` 是否有效,并确保`fromCssColorString` 和 `alpha` 方法在当前上下文可用。完整的示例应该像这样: ```javascript // 检查颜色属性是否可用并且是有效的CSS颜色 var colorString = entity.properties._color._value; if (colorString && typeof Cesium.Color.fromCssColorString === 'function') { var cesiumColor = Cesium.Color.fromCssColorString(colorString); cesiumColor.alpha = 0.5; entity.polygon.material.color = cesiumColor; } else { console.error("Invalid or unsupported color string or color property"); } ```
阅读全文

相关推荐

<template> </template> <script> import * as Cesium from 'cesium'; import 'cesium/Build/Cesium/Widgets/widgets.css'; import CircleRippleMaterialProperty from './CircleRippleMaterialProperty'; export default { name: 'CesiumRippleEffect', data() { return { viewer: null, rippleEntity: null }; }, mounted() { this.initCesium(); }, beforeDestroy() { if (this.viewer) { // 安全销毁Viewer this.viewer.destroy(); this.viewer = null; } }, methods: { async initCesium() { try { // 安全初始化Cesium Viewer this.viewer = new Cesium.Viewer('cesium-container', { animation: false, timeline: false, baseLayerPicker: false, geocoder: false, homeButton: false, sceneModePicker: false, navigationHelpButton: false, fullscreenButton: true, // 添加安全沙箱配置 contextOptions: { webgl: { preserveDrawingBuffer: true }, allowTextureFilterAnisotropic: true } }); // 添加波纹圆效果 this.addRippleEffect(); // 安全调整相机位置(使用??替代弃用的defaultValue) const defaultPosition = Cesium.Cartesian3.fromDegrees(113.194006, 27.399411, 2000); const destination = defaultPosition; await this.viewer.camera.flyTo({ destination, orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-60), roll: 0 }, duration: 2.0 }); // 添加安全的事件监听器 this.viewer.scene.postRender.addEventListener(this.handlePostRender, this); } catch (error) { console.error('Cesium初始化错误:', error); } }, addRippleEffect() { try { // 指定坐标 (113.194006, 27.399411) const position = Cesium.Cartesian3.fromDegrees(113.194006, 27.399411); // 创建波纹圆实体(使用??替代弃用的defaultValue) const rippleOptions = { color: Cesium.Color.fromCssColorString("#00FFFF").withAlpha(0.6), speed: 3.0, count: 6, gradient: 0.1 }; this.rippleEntity = this.viewer.entities.add({ name: '动态波纹圆', position: position, ellipse: { semiMinorAxis: 500.0, semiMajorAxis: 500.0, height: 0, material: new CircleRippleMaterialProperty(rippleOptions) } }); // 添加参考点 this.viewer.entities.add({ position: position, point: { pixelSize: 10, color: Cesium.Color.RED } }); } catch (error) { console.error('添加波纹效果错误:', error); } }, // 安全的后渲染处理 handlePostRender() { // 这里可以添加每帧执行的逻辑 }, // 可选:动态更新波纹参数 updateRippleParams() { if (this.rippleEntity && this.rippleEntity.ellipse.material) { // 使用安全访问 this.rippleEntity.ellipse.material.speed = 4.0; this.rippleEntity.ellipse.material.count = 8; } } } }; // 加载株洲矢量数据 const loadZhuzhouVector = async (viewer) => { try { // 1. 加载株洲市整体边界(绿色填充) const cityDataSource = await Cesium.GeoJsonDataSource.load( "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=430200", { clampToGround: true, stroke: Cesium.Color.GREEN.withAlpha(0.8), strokeWidth: 2, fill: Cesium.Color.GREEN.withAlpha(0.3) } ); viewer.dataSources.add(cityDataSource); // 2. 加载株洲各区县边界(白色边框) const countyDataSource = await Cesium.GeoJsonDataSource.load( "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=430200_full", { clampToGround: true, stroke: Cesium.Color.WHITE, strokeWidth: 1, fill: Cesium.Color.TRANSPARENT } ); viewer.dataSources.add(countyDataSource); // 添加区县标签 countyDataSource.entities.values.forEach(entity => { if (entity.polygon && entity.properties && entity.properties.name) { const hierarchy = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()); const center = Cesium.BoundingSphere.fromPoints(hierarchy.positions).center; entity.label = { text: entity.properties.name, font: '18px 黑体', fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 3, style: Cesium.LabelStyle.FILL_AND_OUTLINE, verticalOrigin: Cesium.VerticalOrigin.CENTER, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, pixelOffset: new Cesium.Cartesian2(0, 0), disableDepthTestDistance: Number.POSITIVE_INFINITY, scaleByDistance: new Cesium.NearFarScalar(1e3, 1.0, 1e6, 0.5) }; entity.position = center; } }); // 3. 定位到株洲范围 const rectangle = Cesium.Rectangle.fromDegrees(113.50, 24.94, 113.60, 26.84); viewer.camera.flyTo({ destination: rectangle, orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-70), roll: 0 }, duration: 2 }); } catch (error) { console.error("加载株洲数据失败:", error); const chinaRectangle = Cesium.Rectangle.fromDegrees(73.0, 3.0, 136.0, 59.0); viewer.camera.flyTo({ destination: chinaRectangle }); } }; </script> <style scoped> .cesium-container { width: 100%; height: 100vh; position: relative; /* 确保Cesium容器有正确的层级 */ z-index: 0; } /* 添加安全边界 */ #cesium-container ::v-deep .cesium-widget { border: none; overflow: hidden; } #cesium-container ::v-deep .cesium-widget canvas { display: block; } </style> 修改完善,实现加载株洲地区影像并在指定区域加载动态波纹圆功能,将视野定位在株洲

var circle = new Cesium.CircleGeometry({ center: Cesium.Cartesian3.fromDegrees(val.longitude, val.latitude), radius: 8000, segments: 32, extrudedHeight: 0, perPositionHeight: true }); var geometry = Cesium.CircleGeometry.createGeometry(circle); const instance = new Cesium.GeometryInstance({ geometry: geometry, }); const pline = this.getCircleLine(val.longitude,val.latitude,8000) const polylineGeometry = new Cesium.PolylineGeometry({ positions: pline, width: 4.0, vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT }); const polylineInstance = new Cesium.GeometryInstance({ geometry: Cesium.PolylineGeometry.createGeometry(polylineGeometry) }); var primitives = new Cesium.Primitive({ geometryInstances: instance, appearance: new Cesium.MaterialAppearance({ material: new Cesium.Material({ fabric: { type: "Color", uniforms: { color: Cesium.Color.fromCssColorString("#2963C3").withAlpha(0.1) } }, }), translucent: true, // 设置renderState来控制深度测试 renderState: { depthTest: { enabled:true, // 是否启用深度测试 }, depthMask: false, } }), asynchronous: false, show:true, allowPicking: false, zIndex: 0 }) var primitivesLine = new Cesium.Primitive({ geometryInstances: polylineInstance, appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType("Color", { color: Cesium.Color.fromCssColorString("#2963C3").withAlpha(1) }), translucent: true, // 设置renderState来控制深度测试 renderState: { depthTest: { enabled:true, // 是否启用深度测试 }, depthMask: false, } }), asynchronous: false, show:true, allowPicking: false, zIndex: 1 }) this.circleEntityMap.set(val,primitives) this.circleEntityLineMap.set(val,primitivesLine) this.circleEntity = window.viewer.scene.primitives.add(primitives); this.circleEntityOutline = window.viewer.scene.primitives.add(primitivesLine);开启了深度监测。会有部分在地下怎么能贴地呢

<template> 晴 31℃/西北风 株洲市"天空地水"动态监测平台 {{ currentTime }} {{ currentWeek }} <select v-model="projectionType" @change="switchProjectionType"> <option value="c">经纬度投影</option> <option value="w">球面墨卡托投影</option> </select> <select v-model="selectedMapType" @change="switchMapType"> <option v-for="option in mapOptions" :value="option.value" :key="option.value"> {{ option.label }} </option> </select> <select v-model="networkType" @change="switchNetworkType"> <option value="internal">内网地图</option> <option value="external">外网地图</option> </select> </template> <script setup> import { ref, onMounted } from 'vue'; import * as Cesium from 'cesium'; import "cesium/Build/Cesium/Widgets/widgets.css"; // 天地图服务密钥 const TIANDITU_TOKEN = '72d487f15710ca558987b9baaba13736'; // 当前时间和星期 const currentTime = ref(""); const currentWeek = ref(""); const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; const updateTime = () => { const now = new Date(); currentTime.value = now.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).replace(/\//g, '-').replace(/(\d{4})-(\d{2})-(\d{2})/, '$ 1年$ 2月$ 3日'); currentWeek.value = weekMap[now.getDay()]; }; setInterval(updateTime, 1000); updateTime(); // 网络类型选择 const networkType = ref('external'); // 默认外网 // 地图类型选择 const selectedMapType = ref('img_c'); // 默认显示影像+注记 // 投影类型选择 const projectionType = ref('c'); // 默认经纬度投影 // 地图选项配置 const mapOptions = ref([ { value: 'img_c', label: '影像+注记' }, { value: 'vec_c', label: '矢量+注记' } ]); // Cesium相关变量 let viewer = null; let tiandituLayers = { baseLayer: null, annotationLayer: null }; // 网络类型切换 const switchNetworkType = () => { // 重置投影类型为默认值 projectionType.value = 'c'; // 根据网络类型更新地图选项 if (networkType.value === 'internal') { mapOptions.value = [ { value: 'img_c', label: '内网影像地图' }, { value: 'vec_c', label: '内网矢量地图' } ]; // 设置内网默认地图类型 selectedMapType.value = 'img_c'; } else { mapOptions.value = [ { value: 'img', label: '天地图影像' }, { value: 'img_c', label: '影像+注记' }, { value: 'vec', label: '矢量地图' }, { value: 'vec_c', label: '矢量+注记' }, { value: 'ter', label: '地形图' } ]; // 设置外网默认地图类型 selectedMapType.value = 'img_c'; } // 重新加载地图 loadMapService(selectedMapType.value); // 重新加载石河子数据并定位 loadShiheziVector(viewer, projectionType.value); setTimeout(flyToShihezi, 500); }; // 地图类型切换 const switchMapType = () => { if (viewer) { loadMapService(selectedMapType.value); } }; // // 投影类型切换 // const switchProjectionType = () => { // if (viewer && networkType.value === 'external') { // loadMapService(selectedMapType.value); // } // }; // 加载地图服务 const loadMapService = (type) => { if (!viewer || !viewer.imageryLayers) return; // 清除现有图层 if (tiandituLayers.baseLayer) viewer.imageryLayers.remove(tiandituLayers.baseLayer); if (tiandituLayers.annotationLayer) viewer.imageryLayers.remove(tiandituLayers.annotationLayer); if (networkType.value === 'internal') { // 内网地图服务 - 只支持c投影 const baseUrl = "http://59.255.48.160:81"; if (type === 'img_c') { // 内网影像地图 tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: ${baseUrl}/img_c/wmts, layer: "img", style: "default", tileMatrixSetID: "c", format: "tiles", credit: new Cesium.Credit("内网影像地图"), maximumLevel: 18 }) ); } else if (type === 'vec_c') { // 内网矢量地图 tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: ${baseUrl}/vec_c/wmts, layer: "vec", style: "default", tileMatrixSetID: "c", format: "tiles", credit: new Cesium.Credit("内网矢量地图"), maximumLevel: 18 }) ); } } else { // 外网天地图服务 - 支持c和w投影 // 根据投影类型动态构建URL const baseUrlTemplate = https://t{s}.tianditu.gov.cn/{layer}_${projectionType.value}/wmts?tk=${TIANDITU_TOKEN}; // 图层配置映射表 - 根据投影类型调整图层名称 const layerConfigs = { img: { layer: "img", credit: "天地图影像" }, img_c: { baseLayer: { layer: "img", credit: "天地图影像" }, annotationLayer: { layer: projectionType.value === 'c' ? "cia" : "cia_w", credit: "天地图注记" } }, vec: { layer: "vec", credit: "天地图矢量" }, vec_c: { baseLayer: { layer: "vec", credit: "天地图矢量" }, annotationLayer: { layer: projectionType.value === 'c' ? "cva" : "cva_w", credit: "天地图注记" } }, ter: { layer: "ter", credit: "天地图地形" } }; const config = layerConfigs[type]; if (!config) return; // 添加基础图层 tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: baseUrlTemplate.replace('{layer}', config.layer || config.baseLayer.layer), layer: config.layer || config.baseLayer.layer, style: "default", tileMatrixSetID: projectionType.value, // 使用选择的投影类型 format: "tiles", credit: new Cesium.Credit(config.credit || config.baseLayer.credit), subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], maximumLevel: 18 }) ); // 添加注记图层(如果需要) if (config.annotationLayer) { tiandituLayers.annotationLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: baseUrlTemplate.replace('{layer}', config.annotationLayer.layer), layer: config.annotationLayer.layer, style: "default", tileMatrixSetID: projectionType.value, // 使用选择的投影类型 format: "tiles", credit: new Cesium.Credit(config.annotationLayer.credit), subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], maximumLevel: 18 }) ); } } }; // // 加载株洲矢量数据 // const loadZhuzhouVector = async (viewer) => { // try { // // 加载株洲市整体边界 // const cityDataSource = await Cesium.GeoJsonDataSource.load( // "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=430200", // { // clampToGround: true, // stroke: Cesium.Color.GREEN.withAlpha(0.8), // strokeWidth: 2, // fill: Cesium.Color.WHITE.withAlpha(0.3) // } // ); // viewer.dataSources.add(cityDataSource); // // 加载株洲各区县边界 // const countyDataSource = await Cesium.GeoJsonDataSource.load( // "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=430200_full", // { // clampToGround: true, // stroke: Cesium.Color.WHITE, // strokeWidth: 1, // fill: Cesium.Color.TRANSPARENT // } // ); // viewer.dataSources.add(countyDataSource); // // 添加区县标签 // countyDataSource.entities.values.forEach(entity => { // if (entity.polygon && entity.properties && entity.properties.name) { // const hierarchy = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()); // const center = Cesium.BoundingSphere.fromPoints(hierarchy.positions).center; // entity.label = { // text: entity.properties.name, // font: '18px 黑体', // fillColor: Cesium.Color.WHITE, // outlineColor: Cesium.Color.BLACK, // outlineWidth: 3, // style: Cesium.LabelStyle.FILL_AND_OUTLINE, // verticalOrigin: Cesium.VerticalOrigin.CENTER, // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // pixelOffset: new Cesium.Cartesian2(0, 0), // disableDepthTestDistance: Number.POSITIVE_INFINITY, // scaleByDistance: new Cesium.NearFarScalar(1e3, 1.0, 1e6, 0.5) // }; // entity.position = center; // } // }); // // 定位到株洲范围 // const rectangle = Cesium.Rectangle.fromDegrees(113.50, 24.94, 113.60, 26.84); // viewer.camera.flyTo({ // destination: rectangle, // orientation: { // heading: Cesium.Math.toRadians(0), // pitch: Cesium.Math.toRadians(-70), // roll: 0 // }, // duration: 2 // }); // } catch (error) { // console.error("加载株洲数据失败:", error); // const chinaRectangle = Cesium.Rectangle.fromDegrees(73.0, 3.0, 136.0, 59.0); // viewer.camera.flyTo({ // destination: chinaRectangle // }); // } // }; // 修改加载石河子矢量数据 // 保存石河子范围矩形 const shiheziRectangle = ref(null); // 加载石河子矢量数据(修复版) const loadShiheziVector = async (viewer) => { try { // 清除现有石河子数据 const dataSources = viewer.dataSources; for (let i = dataSources.length - 1; i >= 0; i--) { if (dataSources.get(i).name === 'shihezi') { dataSources.remove(dataSources.get(i)); } } // 加载石河子市整体边界 const cityDataSource = await Cesium.GeoJsonDataSource.load( "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=659001", { clampToGround: true, stroke: Cesium.Color.GREEN.withAlpha(0.8), strokeWidth: 2, fill: Cesium.Color.WHITE.withAlpha(0.3), name: 'shihezi' // 添加标识 } ); viewer.dataSources.add(cityDataSource); // 添加石河子市标签 cityDataSource.entities.values.forEach(entity => { if (entity.polygon && entity.properties && entity.properties.name) { const hierarchy = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()); const positions = hierarchy.positions; // 计算地理中心 const center = Cesium.BoundingSphere.fromPoints(positions).center; entity.label = { text: "石河子市", font: '18px 黑体', fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 3, style: Cesium.LabelStyle.FILL_AND_OUTLINE, verticalOrigin: Cesium.VerticalOrigin.CENTER, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, pixelOffset: new Cesium.Cartesian2(0, 0), disableDepthTestDistance: Number.POSITIVE_INFINITY, scaleByDistance: new Cesium.NearFarScalar(1e3, 1.0, 1e6, 0.5) }; entity.position = center; } }); // 保存石河子范围(地理坐标) const positions = cityDataSource.entities.values[0].polygon.hierarchy.getValue().positions; const cartographicPositions = positions.map(pos => Cesium.Cartographic.fromCartesian(pos) ); const minLon = Math.min(...cartographicPositions.map(p => p.longitude)); const maxLon = Math.max(...cartographicPositions.map(p => p.longitude)); const minLat = Math.min(...cartographicPositions.map(p => p.latitude)); const maxLat = Math.max(...cartographicPositions.map(p => p.latitude)); shiheziRectangle.value = new Cesium.Rectangle( minLon, minLat, maxLon, maxLat ); } catch (error) { console.error("加载石河子数据失败:", error); } }; // 定位到石河子(修复版) const flyToShihezi = () => { if (viewer && shiheziRectangle.value) { // 根据当前投影类型转换坐标 let destination; if (projectionType.value === 'c') { // 经纬度投影直接使用地理坐标 destination = shiheziRectangle.value; } else { // 墨卡托投影需要转换坐标 const west = Cesium.Math.toDegrees(shiheziRectangle.value.west); const south = Cesium.Math.toDegrees(shiheziRectangle.value.south); const east = Cesium.Math.toDegrees(shiheziRectangle.value.east); const north = Cesium.Math.toDegrees(shiheziRectangle.value.north); // 计算墨卡托坐标 const sw = Cesium.WebMercatorProjection.geodeticToWebMercator( new Cesium.Cartographic(shiheziRectangle.value.west, shiheziRectangle.value.south) ); const ne = Cesium.WebMercatorProjection.geodeticToWebMercator( new Cesium.Cartographic(shiheziRectangle.value.east, shiheziRectangle.value.north) ); destination = new Cesium.Rectangle( sw.x, sw.y, ne.x, ne.y ); } viewer.camera.flyTo({ destination: destination, orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-70), roll: 0 }, duration: 1 }); } }; // 投影类型切换(修复版) const switchProjectionType = () => { if (viewer && networkType.value === 'external') { // 重新加载地图 loadMapService(selectedMapType.value); // 重新定位到石河子 setTimeout(flyToShihezi, 500); } }; onMounted(async () => { try { // 设置Cesium Ion访问令牌 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZTdiZDBhZS0xNzBhLTRjZGUtOTY4NC1kYzA5ZDEyNGEyNjUiLCJpZCI6MzE2OTI5LCJpYXQiOjE3NTEzMzg2Mzh9.9QHGIwaWkUOX0NOSre5369rrf1k6bGhZu7xUQia4JmE'; // 初始化Cesium Viewer viewer = new Cesium.Viewer('cesiumContainer', { baseLayerPicker: false, timeline: false, animation: false, geocoder: false, sceneModePicker: false, navigationHelpButton: false, homeButton: false, selectionIndicator: false, infoBox: false, navigationInstructionsInitiallyVisible: false, scene3DOnly: true, terrainProvider: new Cesium.EllipsoidTerrainProvider(), imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ url: https://t{s}.tianditu.gov.cn/img_w/wmts?tk=${TIANDITU_TOKEN}, layer: "img", style: "default", tileMatrixSetID: "w", subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], maximumLevel: 18 }) }); // 强制设置中国视角 viewer.camera.setView({ destination: Cesium.Rectangle.fromDegrees(73.0, 3.0, 136.0, 59.0) }); // // 加载株洲数据 // loadZhuzhouVector(viewer); // 加载石河子数据(修改为调用新函数) // 加载石河子数据 await loadShiheziVector(viewer); flyToShihezi(); // 加载地图服务 loadMapService(selectedMapType.value); } catch (error) { console.error("初始化失败:", error); } }); </script> <style scoped> /* 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", sans-serif; } .monitor-container { width: 100vw; height: 100vh; background: radial-gradient(circle at center, #0c2a50 0%, #0a1a35 100%); overflow: hidden; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; } /* 顶部导航栏样式 - 重新布局 */ .top-bar { height: 70px; background: linear-gradient(90deg, #0a1a35 0%, #1a3a6e 50%, #0a1a35 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; position: relative; z-index: 100; border-bottom: 1px solid rgba(0, 150, 255, 0.3); } /* 左侧区域 */ .left-section { display: flex; align-items: center; flex: 0 0 auto; } /* 中间区域 */ .center-section { flex: 1 1 auto; display: flex; justify-content: center; } /* 右侧区域 */ .right-section { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; } /* 控件组 */ .controls-group { display: flex; gap: 10px; } /* 天气模块 */ .weather-module { display: flex; align-items: center; color: white; font-size: 14px; min-width: 120px; justify-content: center; } .weather-icon { color: #ffcc00; margin-right: 8px; font-size: 16px; } /* 梯形标题样式 */ .platform-title { position: relative; z-index: 10; max-width: 500px; /* 限制最大宽度 */ } .trapezoid-bg { position: relative; padding: 0 40px; height: 70px; display: flex; align-items: center; } .trapezoid-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 60, 113, 0.6); clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%); z-index: -1; } .platform-title h1 { font-size: 24px; font-weight: bold; background: linear-gradient(to bottom, #a2e7eb, #00f2fe); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 8px rgba(0, 242, 254, 0.3); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; } /* 时间模块 */ .time-module { color: white; font-size: 14px; min-width: 220px; text-align: center; white-space: nowrap; } /* 所有控件统一样式 */ .network-switcher select, .map-switcher select, .projection-switcher select { background: rgba(10, 26, 53, 0.8); color: #66ffff; border: 1px solid rgba(0, 150, 255, 0.5); border-radius: 4px; padding: 6px 12px; font-size: 14px; outline: none; cursor: pointer; box-shadow: 0 0 8px rgba(0, 150, 255, 0.3); transition: all 0.3s ease; min-width: 120px; } .network-switcher select:hover, .map-switcher select:hover, .projection-switcher select:hover { background: rgba(26, 58, 110, 0.8); border-color: #00f2fe; box-shadow: 0 0 12px rgba(0, 242, 254, 0.5); } .network-switcher select:focus, .map-switcher select:focus, .projection-switcher select:focus { border-color: #00f2fe; } /* Cesium容器 */ #cesiumContainer { width: 100%; height: calc(100vh - 70px); background-color: #000; position: relative; } /* 响应式调整 */ @media (max-width: 1600px) { .platform-title h1 { font-size: 20px; } .weather-module, .time-module { font-size: 13px; } .network-switcher select, .map-switcher select, .projection-switcher select { padding: 5px 10px; font-size: 13px; min-width: 110px; } } @media (max-width: 1400px) { .platform-title h1 { font-size: 18px; } .trapezoid-bg { padding: 0 30px; } .time-module { min-width: 180px; } .controls-group { gap: 8px; } } @media (max-width: 1200px) { .platform-title h1 { font-size: 16px; } .trapezoid-bg { padding: 0 20px; } .time-module { min-width: 160px; font-size: 12px; } .network-switcher select, .map-switcher select, .projection-switcher select { padding: 4px 8px; font-size: 12px; min-width: 100px; } } @media (max-width: 992px) { .time-module { display: none; } .platform-title h1 { font-size: 14px; } .trapezoid-bg { padding: 0 15px; } .weather-module { min-width: auto; } .network-switcher select, .map-switcher select, .projection-switcher select { padding: 4px 6px; font-size: 11px; min-width: 90px; } } @media (max-width: 768px) { .weather-module { display: none; } .platform-title h1 { font-size: 12px; } .trapezoid-bg { padding: 0 10px; } .controls-group { gap: 5px; } .network-switcher select, .map-switcher select, .projection-switcher select { min-width: 80px; } } </style> 再检查一下,默认设置为墨卡托投影,然后切换到经纬度时这个位置还是没有变化

<template> 晴 31℃/西北风 株洲市"天空地水"动态监测平台 {{ currentTime }} {{ currentWeek }} <select v-model="projectionType" @change="switchProjectionType"> <option value="c">经纬度投影</option> <option value="w">球面墨卡托投影</option> </select> <select v-model="selectedMapType" @change="switchMapType"> <option v-for="option in mapOptions" :value="option.value" :key="option.value"> {{ option.label }} </option> </select> <select v-model="networkType" @change="switchNetworkType"> <option value="internal">内网地图</option> <option value="external">外网地图</option> </select> </template> <script setup> import { ref, onMounted } from 'vue'; import * as Cesium from 'cesium'; import "cesium/Build/Cesium/Widgets/widgets.css"; // 天地图服务密钥 const TIANDITU_TOKEN = '72d487f15710ca558987b9baaba13736'; // 当前时间和星期 const currentTime = ref(""); const currentWeek = ref(""); const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; const updateTime = () => { const now = new Date(); currentTime.value = now.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).replace(/\//g, '-').replace(/(\d{4})-(\d{2})-(\d{2})/, '$ 1年$ 2月$ 3日'); currentWeek.value = weekMap[now.getDay()]; }; setInterval(updateTime, 1000); updateTime(); // 网络类型选择 const networkType = ref('external'); // 默认外网 // 地图类型选择 const selectedMapType = ref('img_c'); // 默认显示影像+注记 // 投影类型选择 const projectionType = ref('c'); // 默认经纬度投影 // 地图选项配置 const mapOptions = ref([ { value: 'img_c', label: '影像+注记' }, { value: 'vec_c', label: '矢量+注记' } ]); // Cesium相关变量 let viewer = null; let tiandituLayers = { baseLayer: null, annotationLayer: null }; // 网络类型切换 const switchNetworkType = () => { // 重置投影类型为默认值 projectionType.value = 'c'; // 根据网络类型更新地图选项 if (networkType.value === 'internal') { mapOptions.value = [ { value: 'img_c', label: '内网影像地图' }, { value: 'vec_c', label: '内网矢量地图' } ]; // 设置内网默认地图类型 selectedMapType.value = 'img_c'; } else { mapOptions.value = [ { value: 'img', label: '天地图影像' }, { value: 'img_c', label: '影像+注记' }, { value: 'vec', label: '矢量地图' }, { value: 'vec_c', label: '矢量+注记' }, { value: 'ter', label: '地形图' } ]; // 设置外网默认地图类型 selectedMapType.value = 'img_c'; } // 重新加载地图 loadMapService(selectedMapType.value); // 重新加载石河子数据并定位 loadShiheziVector(viewer, projectionType.value); setTimeout(flyToShihezi, 500); }; // 地图类型切换 const switchMapType = () => { if (viewer) { loadMapService(selectedMapType.value); } }; // // 投影类型切换 // const switchProjectionType = () => { // if (viewer && networkType.value === 'external') { // loadMapService(selectedMapType.value); // } // }; // 加载地图服务 const loadMapService = (type) => { if (!viewer || !viewer.imageryLayers) return; // 清除现有图层 if (tiandituLayers.baseLayer) viewer.imageryLayers.remove(tiandituLayers.baseLayer); if (tiandituLayers.annotationLayer) viewer.imageryLayers.remove(tiandituLayers.annotationLayer); if (networkType.value === 'internal') { // 内网地图服务 - 只支持c投影 const baseUrl = "http://59.255.48.160:81"; if (type === 'img_c') { // 内网影像地图 tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: ${baseUrl}/img_c/wmts, layer: "img", style: "default", tileMatrixSetID: "c", format: "tiles", credit: new Cesium.Credit("内网影像地图"), maximumLevel: 18 }) ); } else if (type === 'vec_c') { // 内网矢量地图 tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: ${baseUrl}/vec_c/wmts, layer: "vec", style: "default", tileMatrixSetID: "c", format: "tiles", credit: new Cesium.Credit("内网矢量地图"), maximumLevel: 18 }) ); } } else { // 外网天地图服务 - 支持c和w投影 // 根据投影类型动态构建URL const baseUrlTemplate = https://t{s}.tianditu.gov.cn/{layer}_${projectionType.value}/wmts?tk=${TIANDITU_TOKEN}; // 图层配置映射表 - 根据投影类型调整图层名称 const layerConfigs = { img: { layer: "img", credit: "天地图影像" }, img_c: { baseLayer: { layer: "img", credit: "天地图影像" }, annotationLayer: { layer: projectionType.value === 'c' ? "cia" : "cia_w", credit: "天地图注记" } }, vec: { layer: "vec", credit: "天地图矢量" }, vec_c: { baseLayer: { layer: "vec", credit: "天地图矢量" }, annotationLayer: { layer: projectionType.value === 'c' ? "cva" : "cva_w", credit: "天地图注记" } }, ter: { layer: "ter", credit: "天地图地形" } }; const config = layerConfigs[type]; if (!config) return; // 添加基础图层 tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: baseUrlTemplate.replace('{layer}', config.layer || config.baseLayer.layer), layer: config.layer || config.baseLayer.layer, style: "default", tileMatrixSetID: projectionType.value, // 使用选择的投影类型 format: "tiles", credit: new Cesium.Credit(config.credit || config.baseLayer.credit), subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], maximumLevel: 18 }) ); // 添加注记图层(如果需要) if (config.annotationLayer) { tiandituLayers.annotationLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: baseUrlTemplate.replace('{layer}', config.annotationLayer.layer), layer: config.annotationLayer.layer, style: "default", tileMatrixSetID: projectionType.value, // 使用选择的投影类型 format: "tiles", credit: new Cesium.Credit(config.annotationLayer.credit), subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], maximumLevel: 18 }) ); } } }; // // 加载株洲矢量数据 // const loadZhuzhouVector = async (viewer) => { // try { // // 加载株洲市整体边界 // const cityDataSource = await Cesium.GeoJsonDataSource.load( // "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=430200", // { // clampToGround: true, // stroke: Cesium.Color.GREEN.withAlpha(0.8), // strokeWidth: 2, // fill: Cesium.Color.WHITE.withAlpha(0.3) // } // ); // viewer.dataSources.add(cityDataSource); // // 加载株洲各区县边界 // const countyDataSource = await Cesium.GeoJsonDataSource.load( // "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=430200_full", // { // clampToGround: true, // stroke: Cesium.Color.WHITE, // strokeWidth: 1, // fill: Cesium.Color.TRANSPARENT // } // ); // viewer.dataSources.add(countyDataSource); // // 添加区县标签 // countyDataSource.entities.values.forEach(entity => { // if (entity.polygon && entity.properties && entity.properties.name) { // const hierarchy = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()); // const center = Cesium.BoundingSphere.fromPoints(hierarchy.positions).center; // entity.label = { // text: entity.properties.name, // font: '18px 黑体', // fillColor: Cesium.Color.WHITE, // outlineColor: Cesium.Color.BLACK, // outlineWidth: 3, // style: Cesium.LabelStyle.FILL_AND_OUTLINE, // verticalOrigin: Cesium.VerticalOrigin.CENTER, // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // pixelOffset: new Cesium.Cartesian2(0, 0), // disableDepthTestDistance: Number.POSITIVE_INFINITY, // scaleByDistance: new Cesium.NearFarScalar(1e3, 1.0, 1e6, 0.5) // }; // entity.position = center; // } // }); // // 定位到株洲范围 // const rectangle = Cesium.Rectangle.fromDegrees(113.50, 24.94, 113.60, 26.84); // viewer.camera.flyTo({ // destination: rectangle, // orientation: { // heading: Cesium.Math.toRadians(0), // pitch: Cesium.Math.toRadians(-70), // roll: 0 // }, // duration: 2 // }); // } catch (error) { // console.error("加载株洲数据失败:", error); // const chinaRectangle = Cesium.Rectangle.fromDegrees(73.0, 3.0, 136.0, 59.0); // viewer.camera.flyTo({ // destination: chinaRectangle // }); // } // }; // 修改加载石河子矢量数据 // 保存石河子范围矩形 const shiheziRectangle = ref(null); // 加载石河子矢量数据(新增函数) const loadShiheziVector = async (viewer, projectionType = 'c') => { try { // 清除现有石河子数据 const dataSources = viewer.dataSources; for (let i = dataSources.length - 1; i >= 0; i--) { if (dataSources.get(i).name === 'shihezi') { dataSources.remove(dataSources.get(i)); } } // 加载石河子市整体边界 const cityDataSource = await Cesium.GeoJsonDataSource.load( "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=659001", { clampToGround: true, stroke: Cesium.Color.GREEN.withAlpha(0.8), strokeWidth: 2, fill: Cesium.Color.WHITE.withAlpha(0.3), name: 'shihezi' // 添加标识 } ); viewer.dataSources.add(cityDataSource); // 添加石河子市标签 cityDataSource.entities.values.forEach(entity => { if (entity.polygon && entity.properties && entity.properties.name) { const hierarchy = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()); const positions = hierarchy.positions; // 根据投影类型转换坐标 let center; if (projectionType === 'c') { // 经纬度投影直接使用地理中心 center = Cesium.BoundingSphere.fromPoints(positions).center; } else { // 墨卡托投影需要转换坐标 const cartographicPositions = positions.map(pos => Cesium.Cartographic.fromCartesian(pos) ); // 计算平均经纬度 const avgLon = cartographicPositions.reduce((sum, pos) => sum + pos.longitude, 0) / cartographicPositions.length; const avgLat = cartographicPositions.reduce((sum, pos) => sum + pos.latitude, 0) / cartographicPositions.length; // 转换为墨卡托坐标 center = Cesium.Cartesian3.fromDegrees( Cesium.Math.toDegrees(avgLon), Cesium.Math.toDegrees(avgLat) ); } entity.label = { text: "石河子市", font: '18px 黑体', fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 3, style: Cesium.LabelStyle.FILL_AND_OUTLINE, verticalOrigin: Cesium.VerticalOrigin.CENTER, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, pixelOffset: new Cesium.Cartesian2(0, 0), disableDepthTestDistance: Number.POSITIVE_INFINITY, scaleByDistance: new Cesium.NearFarScalar(1e3, 1.0, 1e6, 0.5) }; entity.position = center; } }); // 保存石河子范围 const positions = cityDataSource.entities.values[0].polygon.hierarchy.getValue().positions; const cartographicPositions = positions.map(pos => Cesium.Cartographic.fromCartesian(pos) ); const minLon = Math.min(...cartographicPositions.map(p => p.longitude)); const maxLon = Math.max(...cartographicPositions.map(p => p.longitude)); const minLat = Math.min(...cartographicPositions.map(p => p.latitude)); const maxLat = Math.max(...cartographicPositions.map(p => p.latitude)); shiheziRectangle.value = new Cesium.Rectangle( minLon, minLat, maxLon, maxLat ); } catch (error) { console.error("加载石河子数据失败:", error); } }; // 定位到石河子(新增函数) const flyToShihezi = () => { if (viewer && shiheziRectangle.value) { viewer.camera.flyTo({ destination: shiheziRectangle.value, orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-70), roll: 0 }, duration: 1 }); } }; // 投影类型切换 const switchProjectionType = () => { if (viewer && networkType.value === 'external') { loadMapService(selectedMapType.value); // 重新加载石河子数据并定位 loadShiheziVector(viewer, projectionType.value); setTimeout(flyToShihezi, 500); } }; onMounted(async () => { try { // 设置Cesium Ion访问令牌 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZTdiZDBhZS0xNzBhLTRjZGUtOTY4NC1kYzA5ZDEyNGEyNjUiLCJpZCI6MzE2OTI5LCJpYXQiOjE3NTEzMzg2Mzh9.9QHGIwaWkUOX0NOSre5369rrf1k6bGhZu7xUQia4JmE'; // 初始化Cesium Viewer viewer = new Cesium.Viewer('cesiumContainer', { baseLayerPicker: false, timeline: false, animation: false, geocoder: false, sceneModePicker: false, navigationHelpButton: false, homeButton: false, selectionIndicator: false, infoBox: false, navigationInstructionsInitiallyVisible: false, scene3DOnly: true, terrainProvider: new Cesium.EllipsoidTerrainProvider(), imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ url: https://t{s}.tianditu.gov.cn/img_w/wmts?tk=${TIANDITU_TOKEN}, layer: "img", style: "default", tileMatrixSetID: "w", subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], maximumLevel: 18 }) }); // 强制设置中国视角 viewer.camera.setView({ destination: Cesium.Rectangle.fromDegrees(73.0, 3.0, 136.0, 59.0) }); // // 加载株洲数据 // loadZhuzhouVector(viewer); // 加载石河子数据(修改为调用新函数) await loadShiheziVector(viewer); flyToShihezi(); // 加载地图服务 loadMapService(selectedMapType.value); } catch (error) { console.error("初始化失败:", error); } }); </script> <style scoped> /* 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", sans-serif; } .monitor-container { width: 100vw; height: 100vh; background: radial-gradient(circle at center, #0c2a50 0%, #0a1a35 100%); overflow: hidden; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; } /* 顶部导航栏样式 - 重新布局 */ .top-bar { height: 70px; background: linear-gradient(90deg, #0a1a35 0%, #1a3a6e 50%, #0a1a35 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; position: relative; z-index: 100; border-bottom: 1px solid rgba(0, 150, 255, 0.3); } /* 左侧区域 */ .left-section { display: flex; align-items: center; flex: 0 0 auto; } /* 中间区域 */ .center-section { flex: 1 1 auto; display: flex; justify-content: center; } /* 右侧区域 */ .right-section { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; } /* 控件组 */ .controls-group { display: flex; gap: 10px; } /* 天气模块 */ .weather-module { display: flex; align-items: center; color: white; font-size: 14px; min-width: 120px; justify-content: center; } .weather-icon { color: #ffcc00; margin-right: 8px; font-size: 16px; } /* 梯形标题样式 */ .platform-title { position: relative; z-index: 10; max-width: 500px; /* 限制最大宽度 */ } .trapezoid-bg { position: relative; padding: 0 40px; height: 70px; display: flex; align-items: center; } .trapezoid-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 60, 113, 0.6); clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%); z-index: -1; } .platform-title h1 { font-size: 24px; font-weight: bold; background: linear-gradient(to bottom, #a2e7eb, #00f2fe); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 8px rgba(0, 242, 254, 0.3); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; } /* 时间模块 */ .time-module { color: white; font-size: 14px; min-width: 220px; text-align: center; white-space: nowrap; } /* 所有控件统一样式 */ .network-switcher select, .map-switcher select, .projection-switcher select { background: rgba(10, 26, 53, 0.8); color: #66ffff; border: 1px solid rgba(0, 150, 255, 0.5); border-radius: 4px; padding: 6px 12px; font-size: 14px; outline: none; cursor: pointer; box-shadow: 0 0 8px rgba(0, 150, 255, 0.3); transition: all 0.3s ease; min-width: 120px; } .network-switcher select:hover, .map-switcher select:hover, .projection-switcher select:hover { background: rgba(26, 58, 110, 0.8); border-color: #00f2fe; box-shadow: 0 0 12px rgba(0, 242, 254, 0.5); } .network-switcher select:focus, .map-switcher select:focus, .projection-switcher select:focus { border-color: #00f2fe; } /* Cesium容器 */ #cesiumContainer { width: 100%; height: calc(100vh - 70px); background-color: #000; position: relative; } /* 响应式调整 */ @media (max-width: 1600px) { .platform-title h1 { font-size: 20px; } .weather-module, .time-module { font-size: 13px; } .network-switcher select, .map-switcher select, .projection-switcher select { padding: 5px 10px; font-size: 13px; min-width: 110px; } } @media (max-width: 1400px) { .platform-title h1 { font-size: 18px; } .trapezoid-bg { padding: 0 30px; } .time-module { min-width: 180px; } .controls-group { gap: 8px; } } @media (max-width: 1200px) { .platform-title h1 { font-size: 16px; } .trapezoid-bg { padding: 0 20px; } .time-module { min-width: 160px; font-size: 12px; } .network-switcher select, .map-switcher select, .projection-switcher select { padding: 4px 8px; font-size: 12px; min-width: 100px; } } @media (max-width: 992px) { .time-module { display: none; } .platform-title h1 { font-size: 14px; } .trapezoid-bg { padding: 0 15px; } .weather-module { min-width: auto; } .network-switcher select, .map-switcher select, .projection-switcher select { padding: 4px 6px; font-size: 11px; min-width: 90px; } } @media (max-width: 768px) { .weather-module { display: none; } .platform-title h1 { font-size: 12px; } .trapezoid-bg { padding: 0 10px; } .controls-group { gap: 5px; } .network-switcher select, .map-switcher select, .projection-switcher select { min-width: 80px; } } </style> 检查代码,还是有问题,切换到经纬度投影时石河子位置还是不对,没有切换

runtime-core.esm-bundler.js:268 Uncaught TypeError: Cesium.UrlTemplateTerrainProvider is not a constructor at loadMapService (CesiumViewer.vue:163:30) at switchMapType (CesiumViewer.vue:135:5) at callWithErrorHandling (runtime-core.esm-bundler.js:199:19) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:206:17) at HTMLSelectElement.invoker (runtime-dom.esm-bundler.js:729:5) 如上所示报错,还是没有加载三维地形图,修改下面代码:<template> 晴 31℃/西北风 株洲市"天空地水"动态监测平台 {{ currentTime }} {{ currentWeek }} <select v-model="projectionType" @change="switchProjectionType"> <option value="c">经纬度投影</option> <option value="w">球面墨卡托投影</option> </select> <select v-model="selectedMapType" @change="switchMapType"> <option v-for="option in mapOptions" :value="option.value" :key="option.value"> {{ option.label }} </option> </select> <select v-model="networkType" @change="switchNetworkType"> <option value="external">外网地图</option> <option value="internal">内网地图</option> </select> 三维地形模式 </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue'; // 天地图服务密钥 const TIANDITU_TOKEN = '72d487f15710ca558987b9baaba13736'; // 当前时间和星期 const currentTime = ref(""); const currentWeek = ref(""); const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; const updateTime = () => { const now = new Date(); currentTime.value = now.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).replace(/\//g, '-').replace(/(\d{4})-(\d{2})-(\d{2})/, '$ 1年$ 2月$ 3日'); currentWeek.value = weekMap[now.getDay()]; }; // 网络类型选择 const networkType = ref('external'); // 地图类型选择 const selectedMapType = ref('img_c'); // 投影类型选择 const projectionType = ref('c'); // 三维地形启用状态 const terrainEnabled = ref(false); // 地图选项配置 const mapOptions = ref([ { value: 'img_c', label: '影像+注记' }, { value: 'vec_c', label: '矢量+注记' }, { value: 'terrain', label: '三维地形图' } ]); // Cesium相关变量 let viewer = null; let tiandituLayers = { baseLayer: null, annotationLayer: null }; let timeInterval = null; // 石河子范围矩形 const shiheziRectangle = ref(null); // 网络类型切换 const switchNetworkType = () => { if (networkType.value === 'internal') { mapOptions.value = [ { value: 'img', label: '内网影像地图' }, { value: 'vec', label: '内网矢量地图' } ]; selectedMapType.value = 'img'; terrainEnabled.value = false; } else { mapOptions.value = [ { value: 'img_c', label: '影像+注记' }, { value: 'vec_c', label: '矢量+注记' }, { value: 'terrain', label: '三维地形图' } ]; selectedMapType.value = 'img_c'; } loadMapService(selectedMapType.value); loadShiheziVector(); setTimeout(flyToShihezi, 500); }; // 地图类型切换 const switchMapType = () => { if (viewer) { terrainEnabled.value = selectedMapType.value === 'terrain'; loadMapService(selectedMapType.value); } }; // 投影类型切换 const switchProjectionType = () => { if (viewer) { loadMapService(selectedMapType.value); setTimeout(flyToShihezi, 500); } }; // 加载地图服务 const loadMapService = (type) => { if (!viewer || !viewer.imageryLayers) return; // 清除现有图层 if (tiandituLayers.baseLayer) viewer.imageryLayers.remove(tiandituLayers.baseLayer); if (tiandituLayers.annotationLayer) viewer.imageryLayers.remove(tiandituLayers.annotationLayer); // 处理三维地形模式 if (type === 'terrain') { // 设置三维地形 if (!(viewer.scene.terrainProvider instanceof Cesium.CesiumTerrainProvider)) { viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(); } // 修复:使用正确的 UrlTemplateTerrainProvider viewer.terrainProvider = new Cesium.UrlTemplateTerrainProvider({ url: https://t{s}.tianditu.gov.cn/mapservice/swdx?tk=${TIANDITU_TOKEN}, subdomains: ['0','1','2','3','4','5','6','7'] }); // 添加地形注记层 const annoUrl = projectionType.value === 'c' ? https://t{s}.tianditu.gov.cn/cta/wmts?tk=${TIANDITU_TOKEN} : https://t{s}.tianditu.gov.cn/cta_w/wmts?tk=${TIANDITU_TOKEN}; tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: annoUrl, layer: projectionType.value === 'c' ? 'cta' : 'cta_w', style: "default", tileMatrixSetID: projectionType.value, format: "tiles", subdomains: ['0','1','2','3','4','5','6','7'], maximumLevel: 18, credit: new Cesium.Credit("天地图地形注记") }) ); } else { // 确保不使用三维地形 viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(); if (networkType.value === 'internal') { // 内网地图服务 const baseUrl = "http://59.255.48.160:81"; const projectionSuffix = projectionType.value === 'c' ? '_c' : '_w'; if (type === 'img') { // 内网影像地图 tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: ${baseUrl}/img${projectionSuffix}/wmts, layer: "img", style: "default", tileMatrixSetID: projectionType.value, format: "tiles", credit: new Cesium.Credit("内网影像地图"), maximumLevel: 18 }) ); } else if (type === 'vec') { // 内网矢量地图 tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: ${baseUrl}/vec${projectionSuffix}/wmts, layer: "vec", style: "default", tileMatrixSetID: projectionType.value, format: "tiles", credit: new Cesium.Credit("内网矢量地图"), maximumLevel: 18 }) ); } } else { // 外网天地图服务 const baseUrlTemplate = https://t{s}.tianditu.gov.cn/{layer}_${projectionType.value}/wmts?tk=${TIANDITU_TOKEN}; const layerConfigs = { img_c: { baseLayer: { layer: "img", credit: "天地图影像" }, annotationLayer: { layer: projectionType.value === 'c' ? "cia" : "cia_w", credit: "天地图注记" } }, vec_c: { baseLayer: { layer: "vec", credit: "天地图矢量" }, annotationLayer: { layer: projectionType.value === 'c' ? "cva" : "cva_w", credit: "天地图注记" } } }; const config = layerConfigs[type]; if (!config) return; // 添加基础图层 tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: baseUrlTemplate.replace('{layer}', config.baseLayer.layer), layer: config.baseLayer.layer, style: "default", tileMatrixSetID: projectionType.value, format: "tiles", credit: new Cesium.Credit(config.baseLayer.credit), subdomains: ['0','1','2','3','4','5','6','7'], maximumLevel: 18 }) ); // 添加注记图层 tiandituLayers.annotationLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: baseUrlTemplate.replace('{layer}', config.annotationLayer.layer), layer: config.annotationLayer.layer, style: "default", tileMatrixSetID: projectionType.value, format: "tiles", credit: new Cesium.Credit(config.annotationLayer.credit), subdomains: ['0','1','2','3','4','5','6','7'], maximumLevel: 18 }) ); } } }; // 加载石河子矢量数据 const loadShiheziVector = async () => { if (!viewer) return; try { // 清除现有石河子数据 const dataSources = viewer.dataSources; for (let i = dataSources.length - 1; i >= 0; i--) { if (dataSources.get(i).name === 'shihezi') { dataSources.remove(dataSources.get(i)); } } // 加载石河子市整体边界 const cityDataSource = await Cesium.GeoJsonDataSource.load( "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=659001", { clampToGround: true, stroke: Cesium.Color.GREEN.withAlpha(0.8), strokeWidth: 2, fill: Cesium.Color.WHITE.withAlpha(0.3), name: 'shihezi' } ); viewer.dataSources.add(cityDataSource); // 添加石河子市标签 cityDataSource.entities.values.forEach(entity => { if (entity.polygon && entity.properties && entity.properties.name) { const hierarchy = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()); const positions = hierarchy.positions; const center = Cesium.BoundingSphere.fromPoints(positions).center; entity.label = { text: "石河子市", font: '18px 黑体', fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 3, style: Cesium.LabelStyle.FILL_AND_OUTLINE, verticalOrigin: Cesium.VerticalOrigin.CENTER, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, pixelOffset: new Cesium.Cartesian2(0, 0), disableDepthTestDistance: Number.POSITIVE_INFINITY, scaleByDistance: new Cesium.NearFarScalar(1e3, 1.0, 1e6, 0.5) }; entity.position = center; } }); // 保存石河子范围 const positions = cityDataSource.entities.values[0].polygon.hierarchy.getValue().positions; const cartographicPositions = positions.map(pos => Cesium.Cartographic.fromCartesian(pos)); const minLon = Math.min(...cartographicPositions.map(p => p.longitude)); const maxLon = Math.max(...cartographicPositions.map(p => p.longitude)); const minLat = Math.min(...cartographicPositions.map(p => p.latitude)); const maxLat = Math.max(...cartographicPositions.map(p => p.latitude)); shiheziRectangle.value = new Cesium.Rectangle(minLon, minLat, maxLon, maxLat); } catch (error) { console.error("加载石河子数据失败:", error); } }; // 定位到石河子 const flyToShihezi = () => { if (viewer && shiheziRectangle.value) { // 根据当前投影类型转换坐标 let destination; if (projectionType.value === 'c') { destination = shiheziRectangle.value; } else { const sw = Cesium.WebMercatorProjection.geodeticToWebMercator( new Cesium.Cartographic(shiheziRectangle.value.west, shiheziRectangle.value.south) ); const ne = Cesium.WebMercatorProjection.geodeticToWebMercator( new Cesium.Cartographic(shiheziRectangle.value.east, shiheziRectangle.value.north) ); destination = new Cesium.Rectangle(sw.x, sw.y, ne.x, ne.y); } viewer.camera.flyTo({ destination: destination, orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-70), roll: 0 }, duration: 1 }); } }; onMounted(async () => { try { // 设置Cesium Ion访问令牌 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZTdiZDBhZS0xNzBhLTRjZGUtOTY4NC1kYzA5ZDEyNGEyNjUiLCJpZCI6MzE2OTI5LCJpYXQiOjE3NTEzMzg2Mzh9.9QHGIwaWkUOX0NOSre5369rrf1k6bGhZu7xUQia4JmE'; // 初始化时间更新 timeInterval = setInterval(updateTime, 1000); updateTime(); // 初始化Cesium Viewer viewer = new Cesium.Viewer('cesiumContainer', { baseLayerPicker: false, timeline: false, animation: false, geocoder: false, sceneModePicker: false, navigationHelpButton: false, homeButton: false, selectionIndicator: false, infoBox: false, navigationInstructionsInitiallyVisible: false, scene3DOnly: true, terrainProvider: new Cesium.EllipsoidTerrainProvider(), imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ url: https://t{s}.tianditu.gov.cn/img_${projectionType.value}/wmts?tk=${TIANDITU_TOKEN}, layer: "img", style: "default", tileMatrixSetID: projectionType.value, subdomains: ['0','1','2','3','4','5','6','7'], maximumLevel: 18 }) }); // 强制设置中国视角 viewer.camera.setView({ destination: Cesium.Rectangle.fromDegrees(73.0, 3.0, 136.0, 59.0) }); // 加载石河子数据 await loadShiheziVector(); flyToShihezi(); // 加载地图服务 loadMapService(selectedMapType.value); } catch (error) { console.error("初始化失败:", error); } }); onBeforeUnmount(() => { // 清除定时器 if (timeInterval) clearInterval(timeInterval); // 销毁Cesium Viewer if (viewer) { viewer.destroy(); viewer = null; } }); </script> <style scoped> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", sans-serif; } .monitor-container { width: 100vw; height: 100vh; background: radial-gradient(circle at center, #0c2a50 0%, #0a1a35 100%); overflow: hidden; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; } .top-bar { height: 70px; background: linear-gradient(90deg, #0a1a35 0%, #1a3a6e 50%, #0a1a35 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; position: relative; z-index: 100; border-bottom: 1px solid rgba(0, 150, 255, 0.3); } .left-section { display: flex; align-items: center; flex: 0 0 auto; } .center-section { flex: 1 1 auto; display: flex; justify-content: center; } .right-section { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; } .controls-group { display: flex; gap: 10px; } .weather-module { display: flex; align-items: center; color: white; font-size: 14px; min-width: 120px; justify-content: center; } .weather-icon { color: #ffcc00; margin-right: 8px; font-size: 16px; } .platform-title { position: relative; z-index: 10; max-width: 500px; } .trapezoid-bg { position: relative; padding: 0 40px; height: 70px; display: flex; align-items: center; } .trapezoid-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 60, 113, 0.6); clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%); z-index: -1; } .platform-title h1 { font-size: 24px; font-weight: bold; background: linear-gradient(to bottom, #a2e7eb, #00f2fe); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 8px rgba(0, 242, 254, 0.3); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; } .time-module { color: white; font-size: 14px; min-width: 220px; text-align: center; white-space: nowrap; } .network-switcher select, .map-switcher select, .projection-switcher select { background: rgba(10, 26, 53, 0.8); color: #66ffff; border: 1px solid rgba(0, 150, 255, 0.5); border-radius: 4px; padding: 6px 12px; font-size: 14px; outline: none; cursor: pointer; box-shadow: 0 0 8px rgba(0, 150, 255, 0.3); transition: all 0.3s ease; min-width: 120px; } .network-switcher select:hover, .map-switcher select:hover, .projection-switcher select:hover { background: rgba(26, 58, 110, 0.8); border-color: #00f2fe; box-shadow: 0 0 12px rgba(0, 242, 254, 0.5); } .network-switcher select:focus, .map-switcher select:focus, .projection-switcher select:focus { border-color: #00f2fe; } #cesiumContainer { width: 100%; height: calc(100vh - 70px); background-color: #000; position: relative; } .terrain-badge { position: absolute; top: 80px; right: 20px; padding: 6px 12px; background: rgba(0, 150, 255, 0.3); color: #66ffff; border-radius: 4px; font-size: 12px; display: flex; align-items: center; gap: 6px; z-index: 100; backdrop-filter: blur(5px); } @media (max-width: 1600px) { .platform-title h1 { font-size: 20px; } .weather-module, .time-module { font-size: 13px; } .network-switcher select, .map-switcher select, .projection-switcher select { padding: 5px 10px; font-size: 13px; min-width: 110px; } } @media (max-width: 1400px) { .platform-title h1 { font-size: 18px; } .trapezoid-bg { padding: 0 30px; } .time-module { min-width: 180px; } .controls-group { gap: 8px; } } @media (max-width: 1200px) { .platform-title h1 { font-size: 16px; } .trapezoid-bg { padding: 0 20px; } .time-module { min-width: 160px; font-size: 12px; } .network-switcher select, .map-switcher select, .projection-switcher select { padding: 4px 8px; font-size: 12px; min-width: 100px; } } @media (max-width: 992px) { .time-module { display: none; } .platform-title h1 { font-size: 14px; } .trapezoid-bg { padding: 0 15px; } .weather-module { min-width: auto; } .network-switcher select, .map-switcher select, .projection-switcher select { padding: 4px 6px; font-size: 11px; min-width: 90px; } } @media (max-width: 768px) { .weather-module { display: none; } .platform-title h1 { font-size: 12px; } .trapezoid-bg { padding: 0 10px; } .controls-group { gap: 5px; } .network-switcher select, .map-switcher select, .projection-switcher select { min-width: 80px; } } </style>

class drawGrid { constructor(options) { this.minLon = options.minLon; this.minLat = options.minLat; this.maxLon = options.maxLon; this.maxLat = options.maxLat; this.lonStep = 6; // 经度步长6度 this.latStep = 4; // 纬度步长4度 this.baseHeight = 445280; // 基础高度 this.boxHeight = 50; // 盒子高度 this.gridEntities = []; this.viewer = options.viewer; } drawGrid() { // 循环创建网格 for (let lon = this.minLon; lon < this.maxLon; lon += this.lonStep) { for (let lat = this.minLat; lat < this.maxLat; lat += this.latStep) { // 计算当前网格的四个角点(经纬度,度) const west = lon; const east = lon + this.lonStep; const south = lat; const north = lat + this.latStep; // 只处理特定网格(i=0, j=0或j=1) const i = Math.floor((lon - this.minLon) / this.lonStep); const j = Math.floor((lat - this.minLat) / this.latStep); if (!((j === 0 || j === 1) && i === 0)) { continue; } // 将四个角点转换为弧度 const westRad = Cesium.Math.toRadians(west); const eastRad = Cesium.Math.toRadians(east); const southRad = Cesium.Math.toRadians(south); const northRad = Cesium.Math.toRadians(north); // 计算四个角点的笛卡尔坐标 const leftTop = Cesium.Cartesian3.fromRadians(westRad, northRad, this.baseHeight / 2); const rightTop = Cesium.Cartesian3.fromRadians(eastRad, northRad, this.baseHeight / 2); const leftBottom = Cesium.Cartesian3.fromRadians(westRad, southRad, this.baseHeight / 2); const rightBottom = Cesium.Cartesian3.fromRadians(eastRad, southRad, this.baseHeight / 2); // 计算中心点 const center = new Cesium.Cartesian3( (leftTop.x + rightTop.x + leftBottom.x + rightBottom.x) / 4, (leftTop.y + rightTop.y + leftBottom.y + rightBottom.y) / 4, (leftTop.z + rightTop.z + leftBottom.z + rightBottom.z) / 4 ); // 计算网格宽度(东西方向) const width = Cesium.Cartesian3.distance(leftTop, rightTop); // 计算网格深度(南北方向) const depth = Cesium.Cartesian3.distance(leftTop, leftBottom); // 创建网格实体 const entity = this.viewer.entities.add({ position: center, box: { dimensions: new Cesium.Cartesian3(width, depth, this.baseHeight), material: new Cesium.ColorMaterialProperty( Cesium.Color.fromRandom({ alpha: 0.5 }) ), outline: true, outlineColor: Cesium.Color.BLACK, outlineWidth: 2 }, properties: { gridId: grid_${i}_${j}, lonIndex: i, latIndex: j, // 存储四个角点信息,便于后续使用 corners: { leftTop: [west, north], rightTop: [east, north], leftBottom: [west, south], rightBottom: [east, south] } } }); this.gridEntities.push(entity); } } } } export default drawGrid; 我想将我设置的网格是严丝合缝的效果,现在会有缝隙,麻烦修改一下我的代码

<template> <Search @location-selected="handleLocationSelected" /> <LocationBar v-if="loaded" :update-interval="100" :use-dms-format="useDmsFormat" /> </template> <style> /* @import "/temp/css/divGraphic.css"; */ </style> <script setup lang="ts"> import { computed, onUnmounted, onMounted, reactive } from "vue"; import LocationBar from "./location-bar.vue"; import Search from "./search.vue"; import initMap from "./init"; import { ref } from "vue"; import { throttle } from 'lodash'; import { loadRipplePoints, createMultipleRippleCircles } from './circle.js'; import { $prototype } from "../../main.ts"; const miniMapContainer = ref<HTMLElement>(); let viewIndicator: Rectangle; // 视图指示器样式 const currentPosition = reactive({ longitude: 113.361538, latitude: 27.339318, }); // 株洲市范围常量 const ZHUZHOU_EXTENT = { west: 112.5, // 株洲市西边界 east: 114.5, // 株洲市东边界 south: 26.0, // 株洲市南边界 north: 28.0 // 株洲市北边界 }; const rippleEntities = ref<any[]>([]); // 存储波纹圆实体 const heightThreshold = 80000; // 高度阈值(米),高于此值隐藏波纹圆 // 修复1:重新定义 indicatorStyle 为 ref const indicatorStyle = ref({ left: '50%', top: '50%', display: "block" }); const updateRippleVisibility = throttle(() => { if (!$prototype.$map || rippleEntities.value.length === 0) return; // 修复1:将 shouldShow 提取到块级作用域外部 let shouldShow = false; // 获取相机高度 const cartographic = $prototype.$map.camera.positionCartographic; // 修复2:添加空值检查 if (cartographic) { const cameraHeight = cartographic.height; shouldShow = cameraHeight > heightThreshold; } // 修复3:确保 shouldShow 已定义 rippleEntities.value.forEach(entity => { entity.show = shouldShow; }); }, 200); // 更新指示器位置 const updateIndicatorPosition = () => { if (!$prototype.$map) return; const camera = $prototype.$map.camera; const rect = camera.computeViewRectangle(); if (!rect) return; // 计算在株洲市范围内的相对位置 const center = Cesium.Rectangle.center(rect); const lon = Cesium.Math.toDegrees(center.longitude); const lat = Cesium.Math.toDegrees(center.latitude); // 确保位置在株洲市范围内 const constrainedLon = Math.max(ZHUZHOU_EXTENT.west, Math.min(ZHUZHOU_EXTENT.east, lon)); const constrainedLat = Math.max(ZHUZHOU_EXTENT.south, Math.min(ZHUZHOU_EXTENT.north, lat)); const lonPercent = ((constrainedLon - ZHUZHOU_EXTENT.west) / (ZHUZHOU_EXTENT.east - ZHUZHOU_EXTENT.west)) * 100; const latPercent = 100 - ((constrainedLat - ZHUZHOU_EXTENT.south) / (ZHUZHOU_EXTENT.north - ZHUZHOU_EXTENT.south)) * 100; // 更新CSS指示器 indicatorStyle.value = { left: ${lonPercent}%, top: ${latPercent}%, display: "block" }; }; // 更新鹰眼地图 - 只更新指示器位置 const updateOverview = () => { if (!$prototype.$map || !overviewViewer.value) return; // 获取主地图的当前视图中心 const rectangle = $prototype.$map.camera.computeViewRectangle(); if (!rectangle) return; // 更新指示器位置 updateIndicatorPosition(); }; const overviewViewer = ref(null); // 初始化鹰眼地图 - 使用全球底图+株洲市叠加层 const initMiniMap = () => { Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxMDhlNDdmYy03NzFhLTQ1ZTQtOWQ3NS1lZDAzNDc3YjE4NDYiLCJpZCI6MzAxNzQyLCJpYXQiOjE3NDcwNTMyMDN9.eaez8rQxVbPv2LKEU0sMDclPWyHKhh1tR27Vg-_rQSM"; if (!miniMapContainer.value) return; // 创建全球底图提供器 const worldProvider = new Cesium.UrlTemplateImageryProvider({ url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", minimumLevel: 0, maximumLevel: 19, tilingScheme: new Cesium.WebMercatorTilingScheme(), }); // 创建株洲市专用影像提供器 // const zhuzhouProvider = new Cesium.UrlTemplateImageryProvider({ // url: "http://124.232.190.30:9000/proxy/pk1725866655224/map/zzzsyx_18/{z}/{x}/{y}.png", // minimumLevel: 1, // maximumLevel: 17, // tilingScheme: new Cesium.WebMercatorTilingScheme(), // }); // 鹰眼地图初始化 - 使用全球底图 overviewViewer.value = new Cesium.Viewer(miniMapContainer.value, { sceneMode: Cesium.SceneMode.SCENE2D, baseLayerPicker: false, homeButton: false, timeline: false, navigationHelpButton: false, animation: false, scene3DOnly: true, selectionIndicator: false, infoBox: false, imageryProvider: worldProvider, // 使用全球底图 terrainProvider: undefined, mapProjection: new Cesium.WebMercatorProjection(), skyBox: false, skyAtmosphere: false }); // 添加株洲市影像作为叠加层 // const zhuzhouLayer = overviewViewer.value.imageryLayers.addImageryProvider(zhuzhouProvider); // 在鹰眼地图添加株洲市白色边界 addMiniMapBoundary(); // 设置固定视野为株洲市范围 overviewViewer.value.camera.setView({ destination: Cesium.Rectangle.fromDegrees( ZHUZHOU_EXTENT.west, ZHUZHOU_EXTENT.south, ZHUZHOU_EXTENT.east, ZHUZHOU_EXTENT.north ) }); // 隐藏控件 const toolbar = overviewViewer.value.container.getElementsByClassName("cesium-viewer-toolbar")[0]; if (toolbar) toolbar.style.display = "none"; // 隐藏版权信息 overviewViewer.value.cesiumWidget.creditContainer.style.display = "none"; // 初始化视图指示器 initRectangle(); }; // 在鹰眼地图添加白色边界 function addMiniMapBoundary() { if (!overviewViewer.value) return; // 加载株洲市边界GeoJSON const boundary = overviewViewer.value.dataSources.add( Cesium.GeoJsonDataSource.load("/shp_zz.geojson", { stroke: Cesium.Color.WHITE, fill: false, strokeWidth: 2, clampToGround: true }) ); boundary.then((dataSource) => { const entities = dataSource.entities.values; for (let entity of entities) { if (entity.polyline) { // 设置白色边界样式 entity.polyline.material = Cesium.Color.WHITE; entity.polyline.width = 2; entity.polyline.clampToGround = true; } } }); } // 初始化视图指示器 function initRectangle() { // 创建视图指示器(株洲市范围框) viewIndicator = overviewViewer.value.entities.add({ rectangle: { coordinates: Cesium.Rectangle.fromDegrees( ZHUZHOU_EXTENT.west, ZHUZHOU_EXTENT.south, ZHUZHOU_EXTENT.east, ZHUZHOU_EXTENT.north ), material: Cesium.Color.RED.withAlpha(0.3), outline: true, outlineColor: Cesium.Color.RED, outlineWidth: 2, }, }); } const loaded = ref(false); const useDmsFormat = ref(false); function addDemoGraphics() { const chinaBoundary = $prototype.$map.dataSources.add( Cesium.GeoJsonDataSource.load("/shp_zz.geojson", { stroke: Cesium.Color.WHITE, fill: false, clampToGround: true, describe: null, }) ); chinaBoundary.then((dataSource) => { const entities = dataSource.entities.values; for (let entity of entities) { if (entity.polyline) { entity.polyline.fill = false; } } }); } function flyToDes() { const center = Cesium.Cartesian3.fromDegrees(-98.0, 40.0); $prototype.$map.camera.flyTo({ destination: new Cesium.Cartesian3( -2432812.6687511606, 5559483.804371395, 2832009.419525571 ), orientation: { heading: 6.283185307179421, pitch: -1.0472145569408116, roll: 6.2831853071795205, }, complete: function () {}, }); } // 监听主地图相机变化 const setupCameraListener = () => { $prototype.$map.camera.changed.addEventListener(updateOverview); }; // 鹰眼地图点击处理 const handleMiniMapClick = (event: MouseEvent) => { if (!miniMapContainer.value || !overviewViewer.value) return; const rect = miniMapContainer.value.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; // 计算在固定范围内的相对位置 const xPercent = (x / rect.width) * 100; const yPercent = (y / rect.height) * 100; // 转换为株洲市范围内的经纬度 const lon = ZHUZHOU_EXTENT.west + (xPercent / 100) * (ZHUZHOU_EXTENT.east - ZHUZHOU_EXTENT.west); const lat = ZHUZHOU_EXTENT.north - (yPercent / 100) * (ZHUZHOU_EXTENT.north - ZHUZHOU_EXTENT.south); // 主地图飞向点击位置 $prototype.$map.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(lon, lat, 1000000), }); }; function addImage() { var rightImageProvider = new Cesium.UrlTemplateImageryProvider({ name: "影像图", type: "xyz", layer: "vec_d", url: "http://124.232.190.30:9000/proxy/pk1725866655224/map/zzzsyx_18/{z}/{x}/{y}.png", minimumLevel: 1, maximumLevel: 17, crs: "EPSG:3857", }); $prototype.$map.imageryLayers.addImageryProvider(rightImageProvider); rightImageProvider.splitDirection = Cesium.SplitDirection.right; } onMounted(() => { initMap(); addImage(); loaded.value = true; addDemoGraphics(); flyToDes(); // 修复6:确保正确的初始化顺序 setTimeout(() => { initMiniMap(); setupCameraListener(); // 初始更新 updateOverview(); }, 1000); (async () => { try { const ripplePoints = await loadRipplePoints(); rippleEntities.value = createMultipleRippleCircles( $prototype.$map, ripplePoints ); $prototype.$map.camera.changed.addEventListener(updateRippleVisibility); updateRippleVisibility(); } catch (error) { console.error('加载波纹圆失败:', error); } })(); }); let currentMarker: any = null; const createMarker = (location: { lng: number; lat: number; name: string }) => { if (currentMarker) { $prototype.$map.entities.remove(currentMarker); } currentMarker = $prototype.$map.entities.add({ position: Cesium.Cartesian3.fromDegrees( location.lng, location.lat, 50 ), point: { pixelSize: 200, color: Cesium.Color.RED, outlineColor: Cesium.Color.WHITE, outlineWidth: 2, heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, }, label: { text: location.name, font: "40px sans-serif", fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 1, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -20), heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000), }, description: ${location.name} 经度:${location.lng.toFixed(6)} 纬度:${location.lat.toFixed(6)} , }); return currentMarker; }; const handleLocationSelected = (location: { lng: number; lat: number; name: string; }) => { if (!$prototype.$map) return; const destination = Cesium.Cartesian3.fromDegrees( location.lng, location.lat, 200 ); $prototype.$map.camera.flyTo({ destination, orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-45), roll: 0, }, duration: 2, complete: () => { createMarker(location); }, }); }; onUnmounted(() => { if ($prototype.$map) { $prototype.$map.destroy(); $prototype.$map = null; } if ($prototype.$map) { $prototype.$map.camera.changed.removeEventListener(updateRippleVisibility); } console.log("组件销毁"); }); const emit = defineEmits(["onload", "onclick"]); const initMars3d = async (option: any) => { emit("onclick", true); emit("onload", $prototype.$map); }; </script> <style lang="less"> /**cesium 工具按钮栏*/ .cesium-viewer-toolbar { top: auto !important; bottom: 35px !important; left: 12px !important; right: auto !important; } .cesium-toolbar-button img { height: 100%; } .cesium-viewer-toolbar > .cesium-toolbar-button, .cesium-navigationHelpButton-wrapper, .cesium-viewer-geocoderContainer { margin-bottom: 5px; float: left; clear: both; text-align: center; } .cesium-button { background-color: rgba(23, 49, 71, 0.8); color: #e6e6e6; fill: #e6e6e6; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); line-height: 32px; } .cesium-button:hover { background: #3ea6ff; } /**cesium 底图切换面板*/ .cesium-baseLayerPicker-dropDown { bottom: 0; left: 40px; max-height: 700px; margin-bottom: 5px; background-color: rgba(23, 49, 71, 0.8); } /**cesium 帮助面板*/ .cesium-navigation-help { top: auto; bottom: 0; left: 40px; transform-origin: left bottom; background: none; background-color: rgba(23, 49, 71, 0.8); .cesium-navigation-help-instructions { background: none; } .cesium-navigation-button { background: none; } .cesium-navigation-button-selected, .cesium-navigation-button-unselected:hover { background: rgba(0, 138, 255, 0.2); } } /**cesium 二维三维切换*/ .cesium-sceneModePicker-wrapper { width: auto; } .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon { float: right; margin: 0 3px; } /**cesium POI查询输入框*/ .cesium-viewer-geocoderContainer .search-results { left: 0; right: 40px; width: auto; z-index: 9999; } .cesium-geocoder-searchButton { background-color: rgba(23, 49, 71, 0.8); } .cesium-viewer-geocoderContainer .cesium-geocoder-input { background-color: rgba(63, 72, 84, 0.7); } .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus { background-color: rgba(63, 72, 84, 0.9); } .cesium-viewer-geocoderContainer .search-results { background-color: rgba(23, 49, 71, 0.8); } /**cesium info信息框*/ .cesium-infoBox { top: 50px; background-color: rgba(23, 49, 71, 0.8); } .cesium-infoBox-title { background-color: rgba(23, 49, 71, 0.8); } /**cesium 任务栏的FPS信息*/ .cesium-performanceDisplay-defaultContainer { top: auto; bottom: 35px; right: 50px; } .cesium-performanceDisplay-ms, .cesium-performanceDisplay-fps { color: #fff; } /**cesium tileset调试信息面板*/ .cesium-viewer-cesiumInspectorContainer { top: 10px; left: 10px; right: auto; } .cesium-cesiumInspector { background-color: rgba(23, 49, 71, 0.8); } /**覆盖mars3d内部控件的颜色等样式*/ .mars3d-compass .mars3d-compass-outer { fill: rgba(23, 49, 71, 0.8); } .mars3d-contextmenu-ul, .mars3d-sub-menu { background-color: rgba(23, 49, 71, 0.8); > li > a:hover, > li > a:focus, > li > .active { background-color: #3ea6ff; } > .active > a, > .active > a:hover, > .active > a:focus { background-color: #3ea6ff; } } /* Popup样式*/ .mars3d-popup-color { color: #ffffff; } .mars3d-popup-background { background: rgba(23, 49, 71, 0.8); } .mars3d-popup-content { margin: 15px; } .mars3d-template-content label { padding-right: 6px; } .mars3d-template-titile { border-bottom: 1px solid #3ea6ff; } .mars3d-template-titile a { font-size: 16px; } .mars3d-tooltip { background: rgba(23, 49, 71, 0.8); border: 1px solid rgba(23, 49, 71, 0.8); } .mars3d-popup-btn-custom { padding: 3px 10px; border: 1px solid #209ffd; background: #209ffd1c; } .mars-dialog .mars-dialog__content { height: 100%; width: 100%; overflow: auto; padding: 5px; } .image { border: solid 2px #fff; } .content { height: 90%; padding-top: 10px; overflow-x: auto; overflow-y: auto; } .content-text { padding: 0 10px; text-indent: 30px; font-size: 17px; } .details-video { width: 100%; height: 760px; background-color: #000; } :where(.css-lt97qq9).ant-space { display: inline-flex; } :where(.css-lt97qq9).ant-space-align-center { align-items: center; } :where(.css-lt97qq9).ant-image .ant-image-mask { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, 0.5); cursor: pointer; opacity: 0; transition: opacity 0.3s; } :where(.css-lt97qq9).ant-image .ant-image-mask .ant-image-mask-info { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 4px; } :where(.css-1t97qq9)[class^="ant-image"] [class^="ant-image"], :where(.css-1t97qq9)[class*=" ant-image"] [class^="ant-image"], :where(.css-1t97qq9)[class^="ant-image"] [class*=" ant-image"], :where(.css-1t97qq9)[class*=" ant-image"] [class*=" ant-image"] { box-sizing: border-box; } :where(.css-lt97qq9).ant-image .ant-image-img { width: 100%; height: auto; vertical-align: middle; } </style> <style scoped> .mini-map-container { position: relative; width: 100%; height: 100%; } .main-viewer { width: 100%; height: 100%; } .mini-map { position: absolute; right: 3vw; bottom: 6vh; width: 12vw; height: 17vh; border: 2px solid #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); z-index: 999; cursor: pointer; overflow: hidden; } .location-indicator { position: absolute; width: 14px; height: 14px; background: #ff3e3e; border: 2px solid white; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 15px rgba(255, 62, 62, 1); z-index: 100; } .view-rectangle { position: absolute; border: 2px solid #00f2fe; z-index: 99; pointer-events: none; box-shadow: 0 0 20px rgba(0, 242, 254, 0.7); } /* 相机聚焦样式 - 四个角折角 */ .corner { position: absolute; width: 25px; height: 25px; z-index: 100; pointer-events: none; } .corner::before, .corner::after { content: ""; position: absolute; background: #00f2fe; box-shadow: 0 0 10px rgba(0, 242, 254, 0.8); } .corner-top-left { top: -2px; left: -2px; } .corner-top-left::before { top: 0; left: 0; width: 15px; height: 3px; } .corner-top-left::after { top: 0; left: 0; width: 3px; height: 15px; } .corner-top-right { top: -2px; right: -2px; } .corner-top-right::before { top: 0; right: 0; width: 15px; height: 3px; } .corner-top-right::after { top: 0; right: 0; width: 3px; height: 15px; } .corner-bottom-left { bottom: -2px; left: -2px; } .corner-bottom-left::before { bottom: 0; left: 0; width: 15px; height: 3px; } .corner-bottom-left::after { bottom: 0; left: 0; width: 3px; height: 15px; } .corner-bottom-right { bottom: -2px; right: -2px; } .corner-bottom-right::before { bottom: 0; right: 0; width: 15px; height: 3px; } .corner-bottom-right::after { bottom: 0; right: 0; width: 3px; height: 15px; } .camera-icon { position: absolute; top: 10px; right: 10px; color: #00f2fe; font-size: 24px; z-index: 100; text-shadow: 0 0 10px rgba(0, 242, 254, 0.8); } .focus-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 98; border: 2px solid rgba(0, 242, 254, 0.2); border-radius: 5px; box-shadow: inset 0 0 30px rgba(0, 242, 254, 0.1); } .pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 242, 254, 0.7); box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.7); animation: pulse 2s infinite; } ::v-deep.cesium-viewer-toolbar { display: none; } </style> 以上代码,鹰眼地图中为什么还是加载不了株洲的白色边界,你检查修改一下代码,尽可能不改动其他任何与这个无关代码,减少对vue的修改

<template> 晴 31℃/西北风 株洲市"天空地水"动态监测平台 {{ currentTime }} {{ currentWeek }} <select v-model="networkType" @change="switchNetworkType"> <option value="internal">内网地图</option> <option value="external">外网地图</option> </select> <select v-model="selectedMapType" @change="switchMapType"> <option v-for="option in mapOptions" :value="option.value" :key="option.value"> {{ option.label }} </option> </select> </template> <script setup> import { ref, onMounted, watch } from 'vue'; import * as Cesium from 'cesium'; import "cesium/Build/Cesium/Widgets/widgets.css"; // 天地图服务密钥 const TIANDITU_TOKEN = '72d487f15710ca558987b9baaba13736'; // 当前时间和星期 const currentTime = ref("2025年07月03日 14:37:46"); const currentWeek = ref("星期四"); const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; const updateTime = () => { const now = new Date(); currentTime.value = now.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).replace(/\//g, '-').replace(/(\d{4})-(\d{2})-(\d{2})/, '$ 1年$ 2月$ 3日'); currentWeek.value = weekMap[now.getDay()]; }; setInterval(updateTime, 1000); updateTime(); // 网络类型选择 const networkType = ref('external'); // 默认外网 const selectedMapType = ref('img_c'); // 默认显示影像+注记 // 地图选项配置 const mapOptions = ref([ { value: 'img_c', label: '影像+注记' }, { value: 'vec_c', label: '矢量+注记' } ]); // Cesium相关变量 let viewer = null; let tiandituLayers = { baseLayer: null, annotationLayer: null }; // 网络类型切换 const switchNetworkType = () => { // 根据网络类型更新地图选项 if (networkType.value === 'internal') { mapOptions.value = [ { value: 'img_c', label: '内网影像地图' }, { value: 'vec_c', label: '内网矢量地图' } ]; // 设置内网默认地图类型 selectedMapType.value = 'img_c'; } else { mapOptions.value = [ { value: 'img', label: '天地图影像' }, { value: 'img_c', label: '影像+注记' }, { value: 'vec', label: '矢量地图' }, { value: 'vec_c', label: '矢量+注记' }, { value: 'ter', label: '地形图' } ]; // 设置外网默认地图类型 selectedMapType.value = 'img_c'; } // 重新加载地图 loadMapService(selectedMapType.value); }; // 地图类型切换 const switchMapType = () => { if (viewer) { loadMapService(selectedMapType.value); } }; // 加载地图服务 const loadMapService = (type) => { if (!viewer || !viewer.imageryLayers) return; // 清除现有图层 if (tiandituLayers.baseLayer) viewer.imageryLayers.remove(tiandituLayers.baseLayer); if (tiandituLayers.annotationLayer) viewer.imageryLayers.remove(tiandituLayers.annotationLayer); if (networkType.value === 'internal') { // 内网地图服务 const baseUrl = "http://59.255.48.160:81"; if (type === 'img_c') { // 内网影像地图 tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: ${baseUrl}/img_c/wmts, layer: "img", style: "default", tileMatrixSetID: "c", format: "tiles", credit: new Cesium.Credit("内网影像地图"), maximumLevel: 18 }) ); } else if (type === 'vec_c') { // 内网矢量地图 tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: ${baseUrl}/vec_c/wmts, layer: "vec", style: "default", tileMatrixSetID: "c", format: "tiles", credit: new Cesium.Credit("内网矢量地图"), maximumLevel: 18 }) ); } } else { // 外网天地图服务 const baseUrlTemplate = https://t{s}.tianditu.gov.cn/{layer}_c/wmts?tk=${TIANDITU_TOKEN}; // 图层配置映射表 const layerConfigs = { img: { layer: "img", credit: "天地图影像" }, img_c: { baseLayer: { layer: "img", credit: "天地图影像" }, annotationLayer: { layer: "cia", credit: "天地图注记" } }, vec: { layer: "vec", credit: "天地图矢量" }, vec_c: { baseLayer: { layer: "vec", credit: "天地图矢量" }, annotationLayer: { layer: "cva", credit: "天地图注记" } }, ter: { layer: "ter", credit: "天地图地形" } }; const config = layerConfigs[type]; if (!config) return; // 添加基础图层 tiandituLayers.baseLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: baseUrlTemplate.replace('{layer}', config.layer || config.baseLayer.layer), layer: config.layer || config.baseLayer.layer, style: "default", tileMatrixSetID: "c", format: "tiles", credit: new Cesium.Credit(config.credit || config.baseLayer.credit), subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], maximumLevel: 18 }) ); // 添加注记图层(如果需要) if (config.annotationLayer) { tiandituLayers.annotationLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({ url: baseUrlTemplate.replace('{layer}', config.annotationLayer.layer), layer: config.annotationLayer.layer, style: "default", tileMatrixSetID: "c", format: "tiles", credit: new Cesium.Credit(config.annotationLayer.credit), subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], maximumLevel: 18 }) ); } } }; // 加载株洲矢量数据 const loadZhuzhouVector = async (viewer) => { try { // 加载株洲市整体边界 const cityDataSource = await Cesium.GeoJsonDataSource.load( "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=430200", { clampToGround: true, stroke: Cesium.Color.GREEN.withAlpha(0.8), strokeWidth: 2, fill: Cesium.Color.WHITE.withAlpha(0.3) } ); viewer.dataSources.add(cityDataSource); // 加载株洲各区县边界 const countyDataSource = await Cesium.GeoJsonDataSource.load( "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=430200_full", { clampToGround: true, stroke: Cesium.Color.WHITE, strokeWidth: 1, fill: Cesium.Color.TRANSPARENT } ); viewer.dataSources.add(countyDataSource); // 添加区县标签 countyDataSource.entities.values.forEach(entity => { if (entity.polygon && entity.properties && entity.properties.name) { const hierarchy = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()); const center = Cesium.BoundingSphere.fromPoints(hierarchy.positions).center; entity.label = { text: entity.properties.name, font: '18px 黑体', fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 3, style: Cesium.LabelStyle.FILL_AND_OUTLINE, verticalOrigin: Cesium.VerticalOrigin.CENTER, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, pixelOffset: new Cesium.Cartesian2(0, 0), disableDepthTestDistance: Number.POSITIVE_INFINITY, scaleByDistance: new Cesium.NearFarScalar(1e3, 1.0, 1e6, 0.5) }; entity.position = center; } }); // 定位到株洲范围 const rectangle = Cesium.Rectangle.fromDegrees(113.50, 24.94, 113.60, 26.84); viewer.camera.flyTo({ destination: rectangle, orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-70), roll: 0 }, duration: 2 }); } catch (error) { console.error("加载株洲数据失败:", error); const chinaRectangle = Cesium.Rectangle.fromDegrees(73.0, 3.0, 136.0, 59.0); viewer.camera.flyTo({ destination: chinaRectangle }); } }; onMounted(async () => { try { // 设置Cesium Ion访问令牌 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZTdiZDBhZS0xNzBhLTRjZGUtOTY4NC1kYzA5ZDEyNGEyNjUiLCJpZCI6MzE2OTI5LCJpYXQiOjE3NTEzMzg2Mzh9.9QHGIwaWkUOX0NOSre5369rrf1k6bGhZu7xUQia4JmE'; // 初始化Cesium Viewer viewer = new Cesium.Viewer('cesiumContainer', { baseLayerPicker: false, timeline: false, animation: false, geocoder: false, sceneModePicker: false, navigationHelpButton: false, homeButton: false, selectionIndicator: false, infoBox: false, navigationInstructionsInitiallyVisible: false, scene3DOnly: true, terrainProvider: new Cesium.EllipsoidTerrainProvider(), imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ url: https://t{s}.tianditu.gov.cn/img_w/wmts?tk=${TIANDITU_TOKEN}, layer: "img", style: "default", tileMatrixSetID: "c", subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], maximumLevel: 18 }) }); // 强制设置中国视角 viewer.camera.setView({ destination: Cesium.Rectangle.fromDegrees(73.0, 3.0, 136.0, 59.0) }); // 加载株洲数据 loadZhuzhouVector(viewer); // 加载地图服务 loadMapService(selectedMapType.value); } catch (error) { console.error("初始化失败:", error); } }); </script> <style scoped> /* 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", sans-serif; } .monitor-container { width: 100vw; height: 100vh; background: radial-gradient(circle at center, #0c2a50 0%, #0a1a35 100%); overflow: hidden; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; } /* 顶部导航栏样式 */ .top-bar { height: 70px; background: linear-gradient(90deg, #0a1a35 0%, #1a3a6e 50%, #0a1a35 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; position: relative; z-index: 100; border-bottom: 1px solid rgba(0, 150, 255, 0.3); } /* 天气模块 */ .weather-module { display: flex; align-items: center; color: white; font-size: 14px; min-width: 120px; justify-content: center; } .weather-icon { color: #ffcc00; margin-right: 8px; font-size: 16px; } /* 梯形标题样式 */ .platform-title { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 10; } .trapezoid-bg { position: relative; padding: 0 40px; height: 70px; display: flex; align-items: center; } .trapezoid-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 60, 113, 0.6); clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%); z-index: -1; } .platform-title h1 { font-size: 24px; font-weight: bold; background: linear-gradient(to bottom, #a2e7eb, #00f2fe); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 8px rgba(0, 242, 254, 0.3); white-space: nowrap; } /* 时间模块 */ .time-module { color: white; font-size: 14px; min-width: 220px; text-align: center; } /* 网络切换控件 */ .network-switcher { margin-left: 20px; margin-right: 10px; } .network-switcher select { background: rgba(10, 26, 53, 0.8); color: #66ffff; border: 1px solid rgba(0, 150, 255, 0.5); border-radius: 4px; padding: 6px 12px; font-size: 14px; outline: none; cursor: pointer; box-shadow: 0 0 8px rgba(0, 150, 255, 0.3); transition: all 0.3s ease; } .network-switcher select:hover { background: rgba(26, 58, 110, 0.8); border-color: #00f2fe; box-shadow: 0 0 12px rgba(0, 242, 254, 0.5); } .network-switcher select:focus { border-color: #00f2fe; } /* 天地图切换控件 */ .map-switcher select { background: rgba(10, 26, 53, 0.8); color: #66ffff; border: 1px solid rgba(0, 150, 255, 0.5); border-radius: 4px; padding: 6px 12px; font-size: 14px; outline: none; cursor: pointer; box-shadow: 0 0 8px rgba(0, 150, 255, 0.3); transition: all 0.3s ease; } .map-switcher select:hover { background: rgba(26, 58, 110, 0.8); border-color: #00f2fe; box-shadow: 0 0 12px rgba(0, 242, 254, 0.5); } .map-switcher select:focus { border-color: #00f2fe; } /* Cesium容器 */ #cesiumContainer { width: 100%; height: calc(100vh - 70px); background-color: #000; position: relative; } /* 响应式调整 */ @media (max-width: 1400px) { .platform-title h1 { font-size: 20px; } .weather-module, .time-module { font-size: 13px; } .network-switcher select, .map-switcher select { padding: 5px 10px; font-size: 13px; } } @media (max-width: 1200px) { .platform-title h1 { font-size: 18px; } .trapezoid-bg { padding: 0 30px; } .time-module { min-width: 180px; } .network-switcher, .map-switcher { margin-left: 5px; margin-right: 5px; } } @media (max-width: 992px) { .time-module { display: none; } .network-switcher select, .map-switcher select { padding: 4px 8px; font-size: 12px; } } </style> 在 实现内外网切换功能下,现在还有一个要求:因为前面不是既有w代表球面墨卡托投影,也有c代表经纬度投影,基于此还要加一个w与c可以互相切换展示天地图的功能,基于此修改代码发我

大家在看

recommend-type

VC++与三菱R系列PLC通讯报文格式 C++与PLC通讯

VC++与三菱R系列PLC通讯报文格式 基于MC Qna-3E 协议 C++与PLC通讯协议 三菱R系列报文格式解析
recommend-type

25ds0138e.00.pdf

EMLOS 公司的雷达驱动芯片E524.09的用户参考手册,不是datasheet
recommend-type

Stochastic Models, Estimation, and Control Volume I

随机过程模型、估计与控制的权威之作,内容通俗易懂,是一本非常不错的入门级读物。
recommend-type

PyRHEED:RHEED分析和模拟

派瑞德 表中的内容 描述 该项目用于反射高能电子衍射(RHEED)数据分析和理论模拟。 RHEED是一种电子衍射技术,使用相对高能量(5〜30 keV)的电子束具有掠入射角。 它对表面非常敏感,穿透深度仅为几纳米。 由于电子的散射因子比X射线的散射因子高约四倍,因此RHEED特别适合表征难以用XRD检测到的2D材料,例如石墨烯。 RHEED的另一个优点是光点尺寸非常大(约1厘米),这使它能够测量材料特性的晶圆级平均值,包括晶格常数,晶粒取向分布甚至缺陷密度。 它是使用Python 3.6.6(64位)编写和测试的。 GUI是使用PyQt5创建的。 该simulate_RHEED模块利用图书馆阅读CIF文件并创建结构。 主要功能包括: RHEED原始图像处理使用和强度轮廓提取,通过 vecterization加快了速度。 二维相互空间图和极图的构建是自动的。 3D数据可以另存为* .vt
recommend-type

TongWeb最新版本8.0

TongWeb8的优势: 1. 同时支持Java EE API、 Jakarta EE API的应用开发。 2. 支持Spring Framework 6.x、Spring Boot3.x。

最新推荐

recommend-type

tika-parser-font-module-3.1.0.jar中文-英文对照文档.zip

1、压缩文件中包含: 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法: 解压最外层zip,再解压其中的zip包,双击 【index.html】 文件,即可用浏览器打开、进行查看。 3、特殊说明: (1)本文档为人性化翻译,精心制作,请放心使用; (2)只翻译了该翻译的内容,如:注释、说明、描述、用法讲解 等; (3)不该翻译的内容保持原样,如:类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示: (1)为了防止解压后路径太长导致浏览器无法打开,推荐在解压时选择“解压到当前文件夹”(放心,自带文件夹,文件不会散落一地); (2)有时,一套Java组件会有多个jar,所以在下载前,请仔细阅读本篇描述,以确保这就是你需要的文件。 5、本文件关键字: jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
recommend-type

HTML时间格式化工具及测试页面介绍

标题 "BoolStudio.github.io" 暗示这是一个与GitHub相关的在线资源,具体来说是与BoolStudio相关的网页地址。GitHub是一个著名的代码托管平台,它支持Git版本控制系统,允许用户在云端存储和共享代码。BoolStudio可能是GitHub上的一个用户或组织账户名称,而该页面可能是他们托管的项目或个人页面的入口。 描述中的信息包含了HTML元素和JavaScript代码片段。这段描述展示了一个测试页文件的部分代码,涉及到HTML的标题(title)和内嵌框架(iframe)的使用,以及JavaScript中Date对象的扩展功能。 从描述中我们可以分析出以下知识点: 1. HTML标题(Title): 在HTML中,`<title>`标签用于定义网页的标题,它会显示在浏览器的标题栏或页面的标签上。在描述中出现了`<title>现在时间</title>`,这表明网页的标题被设置为了“现在时间”。 2. 微软时间: 这可能指的是在网页中嵌入微软产品的日期和时间显示。尽管这部分内容在描述中被删除了,但微软时间通常与Windows操作系统的日期和时间显示相关联。 3. iframe元素: `<iframe>`标签定义了一个内嵌框架,可以在网页中嵌入另一个文档。在描述中出现的是`<iframe src"></iframe>`,这表示创建了一个空的iframe元素,其src属性为空,实际上没有嵌入任何内容。通常src属性会被设置为另一个HTML文档的URL,用来在当前页面中显示外部页面的内容。 4. JavaScript日期格式化: 描述中包含了一段JavaScript代码,这段代码扩展了Date对象的功能,允许它根据提供的格式字符串(fmt)返回格式化的日期和时间。例如,如果fmt是'y年M月d日 h时m分s秒',则该函数会按照这个格式返回当前日期和时间。 具体到代码实现,以下步骤展示了如何在JavaScript中扩展Date对象并格式化日期: - 首先创建了一个对象o,该对象包含日期和时间的不同部分,例如年(y)、月(M)、日(d)、时(h)、分(m)、秒(s)。 - 使用正则表达式检查格式字符串fmt中是否包含年份的占位符(y+),如果存在则将其替换为四位数的年份,不足部分用0补齐。 - 使用for...in循环遍历对象o中的每一个键值对,并使用正则表达式测试这些键(如年、月、日等)是否在格式字符串中存在。如果存在,则替换为相应的日期时间值。 这个知识点展示了在JavaScript中如何自定义对象的方法,以及如何使用正则表达式进行字符串的搜索和替换。 标签 "HTML" 表明这个文件主要涉及到超文本标记语言(HTML),这是构建网页内容的标准标记语言,它允许开发者使用标签来定义网页的结构和内容。HTML文件通常包含各种元素,如段落、链接、图片、表格和表单等。 压缩包子文件的文件名称列表中的 "BoolStudio.github.io-main" 可能指的是一个包含 "BoolStudio.github.io" 网站主要文件的压缩包。通常,网站项目会包含多个文件和资源,为了便于管理和分发,开发者会将这些文件打包成一个压缩文件。在本例中,"main" 可能表示该压缩包包含了网站的主要文件和代码。 通过对给定文件信息的分析,我们可以了解到网页设计和开发的相关知识点,特别是HTML文档结构、JavaScript对象和函数扩展以及如何在网站项目中组织文件。这些知识对于前端开发者来说是非常重要的,能够帮助他们创建更加动态和功能丰富的网页应用。
recommend-type

Elixir测试:从用例执行到覆盖率分析

### Elixir 测试:从用例执行到覆盖率分析 #### 1. 测试用例执行 在测试中,以 `Test` 结尾且包含 `use ExUnit` 的模块被视为测试用例。测试用例本质上是设置回调和测试的集合。测试用例的执行方式有两种:并发执行或顺序执行。使用 `async: true` 选项的测试用例将并发执行,其余的则按定义顺序(默认随机)顺序执行。 测试用例的执行流程如下: 1. 执行所有 `setup_all` 回调。 2. 执行所有测试及其特定的设置和拆卸回调。 `setup_all` 回调按定义顺序在同一进程中执行。在运行任何测试之前,测试用例将生成一个进程,在该进程中运行所有
recommend-type

Android Studio 时间延时

<think> 我们参考多个引用,总结在Android Studio中实现时间延时的方法。根据引用[1]和[2],我们知道有几种常见的延时方法,包括使用Handler的postDelayed方法、使用Timer和TimerTask以及使用Thread.sleep。引用[3]和[5]则展示了具体代码示例。 具体方法如下: 1. **使用Handler的postDelayed方法**(推荐在主线程中使用,避免直接操作UI线程的问题): ```java new Handler().postDelayed(new Runnable() { @Override
recommend-type

IMS Open Corpus Workbench:打造高效大型文本语料库管理工具

IMS Open Corpus Workbench(以下简称CWB)是一个强大的开源工具集,它专门用于管理和查询大型的、带有语言注释的文本语料库。这项工具有着广泛的应用领域,包括语言学研究、自然语言处理、人文科学研究等。 ### 标题知识点: #### 大型文本语料库的索引和查询工具 大型文本语料库指的是含有大量文本数据的数据库,其中包含的文本量通常以百万计。这些数据可能是书面文本、口语录音文字转写等形式。对于如此庞大的数据集,索引是必要的,它可以帮助研究者快速定位到感兴趣的片段,而查询工具则提供了从这些大量数据中提取特定信息的能力。 #### 开源 CWB作为一个开源工具,意味着其源代码对所有人开放,并且可以免费使用和修改。开源项目通常是由社区驱动,有着活跃的开发者和用户群体,不断对工具进行改进和拓展。这种模式促进了创新,并且有利于长期维护和升级。 ### 描述知识点: #### 管理和查询带有语言注释的文本 在语料库中,文本数据经常会被加上各种形式的语言注释,比如句法结构、词性标注、语义角色等。CWB支持管理这类富含语言信息的语料库,使其不仅仅保存原始文本信息,还整合了深层的语言知识。此外,CWB提供了多种查询语言注释数据的方式,使得用户可以针对特定的注释信息进行精确查询。 #### 核心组件:CQP(Corpus Query Processor) CQP是CWB中的核心组件,是一个高度灵活和高效的查询处理器。它支持在终端会话中交互式地使用,这为熟悉命令行界面的用户提供了一个强大的工具。同时,CQP也可以嵌入到其他程序中,比如Perl脚本,从而提供编程式的语料库访问方式。这为高级用户提供了一个强大的平台,可以编写复杂的查询,并将查询结果集成到其他程序中。 #### 基于Web的GUI CQPweb 除了命令行界面外,CWB还提供了一个基于Web的图形用户界面CQPweb,使得不熟悉命令行的用户也能够方便地使用CWB的强大功能。CQPweb通常允许用户通过网页直接构建查询,并展示查询结果,极大地降低了使用门槛。 ### 标签知识点: #### 开源软件 CWB作为开源软件,其主要特点和优势包括: - **社区支持**:开放源代码鼓励了全球开发者共同参与,提供错误修正、功能增强、新特性开发等。 - **定制化**:用户可以根据自己的需求对源代码进行修改,从而实现定制化的功能。 - **透明性**:源代码的开放确保了软件工作的透明性,用户可以清楚了解软件的工作原理和数据处理方式。 - **可靠性**:由于代码的公开性,很多用户和开发者可以共同审查代码,提高了软件的可靠性和安全性。 - **成本效益**:开源软件通常不需要支付昂贵的许可费用,对预算有限的个人和机构特别友好。 ### 压缩包子文件的文件名称列表知识点: #### cwb-3.0.0-osx-10.5-universal 这个文件名提供了关于该软件包的重要信息: - **cwb**:表示这是IMS Open Corpus Workbench的软件包。 - **3.0.0**:表示这个包的版本号,了解版本信息对于获取支持、查看更新日志、了解新特性等方面很重要。 - **osx**:表示这个软件包是为Mac OS X操作系统设计的。 - **10.5**:这个数字指明了这个软件包支持的操作系统版本至少是Mac OS X 10.5。 - **universal**:表明这个软件包是为不同架构的处理器(比如32位和64位)设计的通用二进制文件,提高了软件包的兼容性和可移植性。 综上所述,IMS Open Corpus Workbench是一个为处理带有语言注释的大型文本语料库而设计的开源工具集,它以高效且灵活的查询处理器CQP为核心,提供了命令行和基于Web的两种交互方式,极大地促进了语言学和语言技术领域的研究与应用。由于其开源特性,CWB得到了广泛的使用和不断的改进。
recommend-type

基于属性测试的深入解析与策略探讨

### 基于属性测试的深入解析与策略探讨 #### 1. 基于属性测试中的收缩机制 在基于属性的测试中,当测试失败时,像 `stream_data` 这样的框架会执行收缩(Shrinking)操作。收缩的目的是简化导致测试失败的输入,同时确保简化后的输入仍然会使测试失败,这样能更方便地定位问题。 为了说明这一点,我们来看一个简单的排序函数测试示例。我们实现了一个糟糕的排序函数,实际上就是恒等函数,它只是原封不动地返回输入列表: ```elixir defmodule BadSortTest do use ExUnit.Case use ExUnitProperties pro
recommend-type

ssh-keygen -t rsa -f /etc/ssh/ssh_host_rsa_key && \

<think> 根据用户的问题要求,我需要详细解释命令`ssh-keygen -t rsa -f /etc/ssh/ssh_host_rsa_key`的含义、后续操作、常见问题及解决办法。同时,我需要参考提供的引用内容,并遵循系统级指令(如LaTeX格式、中文回答、生成相关问题等)。 首先,分析命令的组成部分: - `ssh-keygen`:生成、管理和转换SSH密钥的工具。 - `-t rsa`:指定密钥类型为RSA算法。 - `-f /etc/ssh/ssh_host_rsa_key`:指定生成的私钥文件路径为`/etc/ssh/ssh_host_rsa_key`。对应的公钥文件会在同一
recommend-type

挑战性开源平台游戏YAGAC:无故事忍者冒险

Y.A.G.A.C(Yet Another Great Arcade Classic),是一款免费的开源伪2D平台游戏,它在传统平台游戏的基础上融入了3D游戏元素,让玩家在一个拥有2D精灵的3D环境中进行操作。YAGAC游戏以其高挑战性和上瘾性而著称,吸引了众多游戏爱好者和编程高手的关注。 首先,让我们深入了解这款游戏的核心玩法。YAGAC的最大特点是在一个基本的2D平面内,玩家可以控制角色进行运动,但游戏环境却是3D制作的。这种设计为玩家带来了全新的视觉体验和操作感受。在YAGAC中,玩家扮演的是一个身手敏捷的忍者,任务是在错综复杂的地牢中生存下来,地牢充满了各种陷阱和敌人,如机器人等。为了逃生,玩家需要在各种关卡中寻找隐藏的彩球,这些彩球决定了玩家能够到达的区域范围。 在游戏过程中,收集到的彩球会改变对应颜色平台的属性,使原本脆弱的平台变得牢固,从而为玩家打开新的道路。这样的设计不仅考验玩家的反应和速度,还考验他们的策略和记忆能力。YAGAC的游戏关卡设计非常巧妙,经常需要玩家反复尝试,每一次尝试都可能发现新的线索和策略,这样的设计增加了游戏的重复可玩性。 YAGAC使用的引擎在游戏流畅性方面表现出色,这也是游戏的一大强项。一款游戏引擎的强大与否直接关系到游戏体验的好坏,YAGAC的开发团队选择或者开发了一个能够高效处理3D图形和2D动作的引擎,确保了游戏在各种配置的计算机上都能保持良好的运行状态和响应速度。 接下来,我们来探讨YAGAC的开源属性。由于YAGAC是开源的,这意味着游戏的源代码是开放的,任何个人或组织都可以访问、修改并重新分发该软件。开源软件通常由社区维护,并且鼓励用户贡献代码,共同改进游戏。对于像YAGAC这样的游戏来说,开源可以吸引更多的开发者参与进来,共同完善游戏体验。玩家和开发者可以对游戏进行本地化、修改游戏机制,甚至是增加新的内容和关卡。 开源平台游戏的概念不仅限于提供免费的游戏体验,它还鼓励创新和协作。开源文化促进知识共享和技术进步,这在软件开发领域尤为重要。同时,玩家也可以从中学到编程知识,因为游戏的开源性质允许用户查看和学习游戏背后的代码。 最后,关于YAGAC的文件名称“yagac”,这很可能是游戏的主程序文件名或者主目录名。当玩家在计算机上进行下载和安装时,可能会遇到这样的文件名,识别这一点有助于玩家快速定位和管理游戏文件。 总的来说,Y.A.G.A.C.作为一款开源平台游戏,在游戏玩法设计、开源文化和3D游戏引擎的流畅性等方面,都显示出其独特的优势。游戏的挑战性和上瘾性,以及社区驱动的开发模式,都为游戏爱好者和开源爱好者提供了一个理想的游戏和学习平台。对于对游戏开发感兴趣的玩家来说,YAGAC无疑是一个研究和实践的良好起点。
recommend-type

状态化属性测试与测试数据随机化及测试生命周期解析

# 状态化属性测试与测试数据随机化及测试生命周期解析 ## 状态化属性测试 ### 状态化系统测试的引入 之前我们主要探讨了针对纯无状态函数的属性测试,这类函数接收输入并返回输出。然而,属性测试同样适用于有状态系统的测试。有状态系统是指那些会携带状态的系统,例如数据库。 在之前的示例中,我们仅使用属性测试来生成数据,然后将其输入到代码中并对结果进行断言。但对于有状态系统,情况有所不同:我们需要处理状态的设置,并仅在系统处于特定状态时执行某些操作。 ### 对有状态系统进行建模 我们可以利用属性测试框架生成随机数据的能力,为有状态系统生成随机命令。例如,若有状态系统是数据库,我们就能生成针
recommend-type

icpc英语字典

<think> 首先,用户的问题是:“我想查找icpc相关的英语字典 请问icpc英语专业字典”。用户想查找与ICPC(International Collegiate Programming Contest)相关的英语字典,特别是专业字典。 现在,回顾系统指令: - 所有行内数学表达式必须使用$...$格式。 - 独立公式使用$$...$$。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 在回答中引用的段落末尾自然地添加引用标识。 - 回答结构清晰,帮助用户逐步解决问题。 - 保持真实可靠。 用户提供了几个引用: - 引用[1]:关于填字游戏和寻找变形词的程序。