活动介绍

vue cesium 水面

时间: 2023-08-21 09:07:27 浏览: 179
在 Vue Cesium 中,可以使用 Cesium.js 提供的功能来创建和渲染水面。Cesium.js 提供了一个名为 `Cesium.Water` 的类,用于创建和配置水面。 首先,确保你已经安装了 Vue Cesium,并正确引入了 Cesium.js 库。然后,在 Vue 组件中,你可以使用 `Cesium.Water` 类来创建水面对象。以下是一个简单的示例代码: ```html <template> <div> <cesium ref="cesiumContainer"></cesium> </div> </template> <script> import { Viewer, Water } from "vue-cesium"; export default { mounted() { const viewer = new Viewer(this.$refs.cesiumContainer.$el); // 创建水面 const water = new Water(viewer.scene); // 配置水面属性 water.baseWaterColor = Cesium.Color.fromCssColorString("#003366"); water.normalMap = "/path/to/normalMap.jpg"; water.frequency = 10000.0; water.animationSpeed = 0.03; water.specularIntensity = 0.8; // 将水面添加到场景中 viewer.scene.primitives.add(water); } }; </script> ``` 在这个示例中,我们通过 `new Water(viewer.scene)` 创建了一个水面对象,并使用一些属性对其进行配置,比如 `baseWaterColor`、`normalMap`、`frequency` 等。最后,将水面对象添加到场景的 `primitives` 集合中即可。 请注意,上述示例仅供参考,具体的配置和效果可以根据你的需求进行调整。同时,还可以通过 Cesium.js 提供的其他属性和方法来进一步定制和操作水面对象。
阅读全文

相关推荐

runtime-core.esm-bundler.js:51 [Vue warn]: Unhandled error during execution of mounted hook at <Map> at <App> warn$1 @ runtime-core.esm-bundler.js:51 Map.vue:33 Uncaught TypeError: Cesium.createWorldTerrain is not a function at Map.vue:33:29 at runtime-core.esm-bundler.js:2836:40 at callWithErrorHandling (runtime-core.esm-bundler.js:199:19) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:206:17) at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2816:19) at flushPostFlushCbs (runtime-core.esm-bundler.js:385:28) at render2 (runtime-core.esm-bundler.js:6048:7) at mount (runtime-core.esm-bundler.js:3962:13) at app.mount (runtime-dom.esm-bundler.js:1775:19) at main.ts:9:5 如上所示报错修改下面代码: <template> </template> <script setup lang="ts"> import { ref, onMounted, onUnmounted } from 'vue'; import * as Cesium from 'cesium'; import 'cesium/Build/Cesium/Widgets/widgets.css'; // Cesium访问令牌 - 请替换成自己的有效令牌 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZTdiZDBhZS0xNzBhLTRjZGUtOTY4NC1kYzA5ZDEyNGEyNjUiLCJpZCI6MzE2OTI5LCJpYXQiOjE3NTEzMzg2Mzh9.9QHGIwaWkUOX0NOSre5369rrf1k6bGhZu7xUQia4JmE'; const cesiumContainer = ref<HTMLDivElement | null>(null); let viewer: Cesium.Viewer | null = null; onMounted(() => { if (!cesiumContainer.value) return; // 初始化Cesium地球 viewer = new Cesium.Viewer(cesiumContainer.value, { animation: false, baseLayerPicker: false, fullscreenButton: false, vrButton: false, geocoder: false, homeButton: false, infoBox: false, sceneModePicker: false, selectionIndicator: false, timeline: false, navigationHelpButton: false, navigationInstructionsInitiallyVisible: false, terrainProvider: Cesium.createWorldTerrain(), imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' }) }); // 设置初始视图位置(株洲市) viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(113.13, 27.83, 10000000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-90), roll: 0.0 }, duration: 2 }); }); onUnmounted(() => { if (viewer) { viewer.destroy(); viewer = null; } }); </script> <style scoped> #cesium-container { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } /* 覆盖Cesium默认的logo */ :deep(.cesium-viewer-bottom) { display: none !important; } </style> 注意我的cesium是最新版的

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON at JSON.parse (<anonymous>) at Resource.js:1180:17 localhost/:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON at JSON.parse (<anonymous>) at Resource.js:1180:17 CesiumWidget.js:962 An error occurred while rendering. Rendering has stopped. InvalidStateError: The source image could not be decoded. InvalidStateError: The source image could not be decoded. CesiumWidget.showErrorPanel @ CesiumWidget.js:962 localhost/:1 Uncaught (in promise) Event 如上所示报错修改下面代码:<template> </template> <script setup lang="ts"> import { ref, onMounted, onUnmounted } from 'vue'; import * as Cesium from 'cesium'; import 'cesium/Build/Cesium/Widgets/widgets.css'; // 使用你自己的有效 Cesium 访问令牌 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZTdiZDBhZS0xNzBhLTRjZGUtOTY4NC1kYzA5ZDEyNGEyNjUiLCJpZCI6MzE2OTI5LCJpYXQiOjE3NTEzMzg2Mzh9.9QHGIwaWkUOX0NOSre5369rrf1k6bGhZu7xUQia4JmE'; const cesiumContainer = ref<HTMLDivElement | null>(null); let viewer: Cesium.Viewer | null = null; onMounted(async () => { // 改为异步函数 if (!cesiumContainer.value) return; try { // 异步创建世界地形 - 最新版 Cesium 的用法 const worldTerrain = await Cesium.createWorldTerrainAsync({ requestVertexNormals: true, requestWaterMask: true }); // 初始化Cesium地球 viewer = new Cesium.Viewer(cesiumContainer.value, { animation: false, baseLayerPicker: false, fullscreenButton: false, vrButton: false, geocoder: false, homeButton: false, infoBox: false, sceneModePicker: false, selectionIndicator: false, timeline: false, navigationHelpButton: false, navigationInstructionsInitiallyVisible: false, terrainProvider: worldTerrain, // 使用异步创建的地形 imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' }) }); // 设置初始视图位置(株洲市) viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(113.13, 27.83, 10000000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-90), roll: 0.0 }, duration: 2 }); // 添加水面效果 addWaterEffect(); // 添加光照效果 addLightingEffect(); } catch (error) { console.error('Failed to initialize Cesium:', error); } }); onUnmounted(() => { if (viewer) { viewer.destroy(); viewer = null; } }); // 添加水面效果 function addWaterEffect() { if (viewer) { viewer.scene.globe.enableLighting = true; viewer.scene.globe.dynamicAtmosphereLighting = true; viewer.scene.globe.dynamicAtmosphereLightingFromSun = true; } } // 添加光照效果 function addLightingEffect() { if (viewer) { viewer.scene.globe.showGroundAtmosphere = true; viewer.scene.fog.enabled = true; viewer.scene.skyAtmosphere.show = true; } } </script> <style scoped> #cesium-container { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } /* 覆盖Cesium默认的logo */ :deep(.cesium-viewer-bottom) { display: none !important; } </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>

最新推荐

recommend-type

员工工资管理系统VBSQL样本 (1)(1).doc

员工工资管理系统VBSQL样本 (1)(1).doc
recommend-type

门户网站建设方案(1).doc

门户网站建设方案(1).doc
recommend-type

计算机逻辑结构与基础课件4_2ALU的组织new(1).ppt

计算机逻辑结构与基础课件4_2ALU的组织new(1).ppt
recommend-type

化工自动化控制仪表作业试题..(1).doc

化工自动化控制仪表作业试题..(1).doc
recommend-type

模拟微信支付金额输入交互界面设计方案

资源下载链接为: https://pan.quark.cn/s/6e651c43a101 在 PayUI 的预览功能中,这个弹出层是基于 DialogFragment 实现的。所有相关逻辑都已封装在这个 DialogFragment 内部,因此使用起来十分便捷。 使用时,通过 InputCallBack 接口可以获取到用户输入的支付密码。你可以在该接口的回调方法中,发起请求来验证支付密码的正确性;当然,也可以选择在 PayFragment 内部直接修改密码验证的逻辑。 整个实现过程没有运用复杂高深的技术,代码结构清晰易懂,大家通过阅读代码就能轻松理解其实现原理和使用方法。
recommend-type

精选Java案例开发技巧集锦

从提供的文件信息中,我们可以看出,这是一份关于Java案例开发的集合。虽然没有具体的文件名称列表内容,但根据标题和描述,我们可以推断出这是一份包含了多个Java编程案例的开发集锦。下面我将详细说明与Java案例开发相关的一些知识点。 首先,Java案例开发涉及的知识点相当广泛,它不仅包括了Java语言的基础知识,还包括了面向对象编程思想、数据结构、算法、软件工程原理、设计模式以及特定的开发工具和环境等。 ### Java基础知识 - **Java语言特性**:Java是一种面向对象、解释执行、健壮性、安全性、平台无关性的高级编程语言。 - **数据类型**:Java中的数据类型包括基本数据类型(int、short、long、byte、float、double、boolean、char)和引用数据类型(类、接口、数组)。 - **控制结构**:包括if、else、switch、for、while、do-while等条件和循环控制结构。 - **数组和字符串**:Java数组的定义、初始化和多维数组的使用;字符串的创建、处理和String类的常用方法。 - **异常处理**:try、catch、finally以及throw和throws的使用,用以处理程序中的异常情况。 - **类和对象**:类的定义、对象的创建和使用,以及对象之间的交互。 - **继承和多态**:通过extends关键字实现类的继承,以及通过抽象类和接口实现多态。 ### 面向对象编程 - **封装、继承、多态**:是面向对象编程(OOP)的三大特征,也是Java编程中实现代码复用和模块化的主要手段。 - **抽象类和接口**:抽象类和接口的定义和使用,以及它们在实现多态中的不同应用场景。 ### Java高级特性 - **集合框架**:List、Set、Map等集合类的使用,以及迭代器和比较器的使用。 - **泛型编程**:泛型类、接口和方法的定义和使用,以及类型擦除和通配符的应用。 - **多线程和并发**:创建和管理线程的方法,synchronized和volatile关键字的使用,以及并发包中的类如Executor和ConcurrentMap的应用。 - **I/O流**:文件I/O、字节流、字符流、缓冲流、对象序列化的使用和原理。 - **网络编程**:基于Socket编程,使用java.net包下的类进行网络通信。 - **Java内存模型**:理解堆、栈、方法区等内存区域的作用以及垃圾回收机制。 ### Java开发工具和环境 - **集成开发环境(IDE)**:如Eclipse、IntelliJ IDEA等,它们提供了代码编辑、编译、调试等功能。 - **构建工具**:如Maven和Gradle,它们用于项目构建、依赖管理以及自动化构建过程。 - **版本控制工具**:如Git和SVN,用于代码的版本控制和团队协作。 ### 设计模式和软件工程原理 - **设计模式**:如单例、工厂、策略、观察者、装饰者等设计模式,在Java开发中如何应用这些模式来提高代码的可维护性和可扩展性。 - **软件工程原理**:包括软件开发流程、项目管理、代码审查、单元测试等。 ### 实际案例开发 - **项目结构和构建**:了解如何组织Java项目文件,合理使用包和模块化结构。 - **需求分析和设计**:明确项目需求,进行系统设计,如数据库设计、系统架构设计等。 - **代码编写和实现**:根据设计编写符合要求的代码,实现系统的各个模块功能。 - **测试和维护**:进行单元测试、集成测试,确保代码质量,对项目进行维护和升级。 ### 其他相关知识点 - **Java虚拟机(JVM)**:了解JVM的基本工作原理,包括类加载机制、内存管理、垃圾回收算法等。 - **常用Java框架**:比如Spring、Hibernate、MyBatis等,在实际开发中常常与Java基础结合使用,提高开发效率。 以上知识点可以作为学习Java案例开发的基础框架。在实际的开发实践中,开发者需要结合具体的项目需求,对这些知识点进行灵活运用。通过反复的案例实践,可以加深对Java编程的理解,并逐步提升开发技能。这份集锦可能包含的案例可能涉及上述知识点的具体应用,能够帮助学习者更好地理解理论与实践的结合,从而快速提升个人的Java开发能力。
recommend-type

【VASP报错深度解析】:5大技巧识别并永久解决离子距离太近警告

# 1. VASP软件简介及离子距离太近问题概述 ## 1.1 VASP软件简介 **VASP(Vienna Ab initio Simulation Package)** 是一款广泛应用于计算材料科学的软件,它基于密度泛函理论(DFT)计算固体、表面和分子的电子结构和性质。
recommend-type

npm error A complete log of this run can be found in: D:\Program Files\nodejs\node_cache\_logs\2025-04-20T15_11_51_454Z-debug-0.log

<think>好的,我需要帮助用户找到npm的错误调试日志位置,并解决他们遇到的npm错误。首先,用户已经提供了一个具体的日志路径:'D:\Program Files\nodejs\node_cache\_logs\2025-04-20T15_11_51_454Z-debug-0.log',但看起来这个路径可能有问题,因为日期是2025年,这可能是一个示例或输入错误。我需要确认正确的日志路径生成方式。 根据npm的默认配置,日志文件通常位于npm的缓存目录下的_logs文件夹中。默认情况下,Windows系统中npm的缓存路径是%AppData%\npm-cache,而日志文件会以当前日期和
recommend-type

深入理解内存技术文档详解

由于文件内容无法查看,仅能根据文件的标题、描述、标签以及文件名称列表来构建相关知识点。以下是对“内存详解”这一主题的详细知识点梳理。 内存,作为计算机硬件的重要组成部分,负责临时存放CPU处理的数据和指令。理解内存的工作原理、类型、性能参数等对优化计算机系统性能至关重要。本知识点将从以下几个方面来详细介绍内存: 1. 内存基础概念 内存(Random Access Memory,RAM)是易失性存储器,这意味着一旦断电,存储在其中的数据将会丢失。内存允许计算机临时存储正在执行的程序和数据,以便CPU可以快速访问这些信息。 2. 内存类型 - 动态随机存取存储器(DRAM):目前最常见的RAM类型,用于大多数个人电脑和服务器。 - 静态随机存取存储器(SRAM):速度较快,通常用作CPU缓存。 - 同步动态随机存取存储器(SDRAM):在时钟信号的同步下工作的DRAM。 - 双倍数据速率同步动态随机存取存储器(DDR SDRAM):在时钟周期的上升沿和下降沿传输数据,大幅提升了内存的传输速率。 3. 内存组成结构 - 存储单元:由存储位构成的最小数据存储单位。 - 地址总线:用于选择内存中的存储单元。 - 数据总线:用于传输数据。 - 控制总线:用于传输控制信号。 4. 内存性能参数 - 存储容量:通常用MB(兆字节)或GB(吉字节)表示,指的是内存能够存储多少数据。 - 内存时序:指的是内存从接受到请求到开始读取数据之间的时间间隔。 - 内存频率:通常以MHz或GHz为单位,是内存传输数据的速度。 - 内存带宽:数据传输速率,通常以字节/秒为单位,直接关联到内存频率和数据位宽。 5. 内存工作原理 内存基于电容器和晶体管的工作原理,电容器存储电荷来表示1或0的状态,晶体管则用于读取或写入数据。为了保持数据不丢失,动态内存需要定期刷新。 6. 内存插槽与安装 - 计算机主板上有专用的内存插槽,常见的有DDR2、DDR3、DDR4和DDR5等不同类型。 - 安装内存时需确保兼容性,并按照正确的方向插入内存条,避免物理损坏。 7. 内存测试与优化 - 测试:可以使用如MemTest86等工具测试内存的稳定性和故障。 - 优化:通过超频来提高内存频率,但必须确保稳定性,否则会导致数据损坏或系统崩溃。 8. 内存兼容性问题 不同内存条可能由于制造商、工作频率、时序、电压等参数的不匹配而产生兼容性问题。在升级或更换内存时,必须检查其与主板和现有系统的兼容性。 9. 内存条的常见品牌与型号 诸如金士顿(Kingston)、海盗船(Corsair)、三星(Samsung)和芝奇(G.Skill)等知名品牌提供多种型号的内存条,针对不同需求的用户。 由于“内存详解.doc”是文件标题指定的文件内容,我们可以预期在该文档中将详细涵盖以上知识点,并有可能包含更多的实践案例、故障排查方法以及内存技术的最新发展等高级内容。在实际工作中,理解并应用这些内存相关的知识点对于提高计算机性能、解决计算机故障有着不可估量的价值。
recommend-type

【机械特性分析进阶秘籍】:频域与时域对比的全面研究

# 1. 机械特性分析的频域与时域概述 ## 1.1 频域与时域分析的基本概念 机械特性分析是通