file-type

tianditu-echarts-plugin: 将ECharts图表集成到天地图的解决方案

ZIP文件

下载需积分: 50 | 291KB | 更新于2025-09-09 | 58 浏览量 | 1 下载量 举报 1 收藏
download 立即下载
根据给定的文件信息,以下是关于“tianditu-echarts-plugin”插件的知识点详细说明: ### 标题知识点 - **tianditu-echarts-plugin**: 这个标题表明该插件的主要功能是将ECharts图表库集成到天地图(Tianditu)服务中。ECharts是一个由百度开源的JavaScript图表库,用于在网页中生成丰富的数据可视化图表。天地图是中国国家测绘地理信息局提供的一套公众版地理信息服务平台,提供包括地图搜索、路径规划、影像地图等服务。 ### 描述知识点 - **插件嵌入**: 描述强调了“tianditu-echarts-plugin”是一个专门用于嵌入到特定平台或环境中的工具。在这里指的是将ECharts图表嵌入到天地图的应用程序中。 - **HTML标头导入**: 描述中提到需要在HTML文件的头部导入一个特定的JavaScript文件“echarts.tianditu.js”。这是典型的前端开发实践,用以引入库或插件的代码,使得能够通过ECharts与天地图平台进行交互。 - **T.EChartsOverlay实例化**: 描述中提到了一个关键的JavaScript类“T.EChartsOverlay”,这是插件提供的一个自定义类,用于实例化后添加到天地图的覆盖层(map overlays)中。这个实例化的对象,它使得ECharts能够与天地图地图图层相叠加。 - **echarts选项配置**: 在描述中还提到了需要“定义您的echarts选项”,这部分涉及到ECharts图表配置的具体方法。配置通常包括图表类型、数据、样式等。如果图表的数据与地理坐标有关,则需要设置coordinateSystem选项为'tianditu',以确保图表坐标与天地图坐标系统匹配。 - **tianditu选项配置**: 还需将天地图的一部分添加到ECharts配置选项中。具体是通过配置选项中的'tianditu'属性,并通过'overlayIndex'字段将EChartsOverlay实例和天地图图层相互关联起来。 ### 标签知识点 - **JavaScript**: 标签表明该插件是使用JavaScript语言编写的,因此,在使用前需要有相应的JavaScript开发环境和知识背景。同时,这也就意味着插件通常会在浏览器环境中运行,利用JavaScript的DOM操作和事件处理等特性。 ### 压缩包子文件名称知识点 - **tianditu-echarts-plugin-master**: 该文件名称表明所提及的插件是一个开源项目,并且版本管理遵循Git的命名规范。这意味着该插件的所有源代码及相关文档可能托管在像GitHub这样的代码托管平台上。版本名“master”通常代表主分支,也就是开发的主线。 ### 总结 通过以上分析,我们可以了解到“tianditu-echarts-plugin”是一个专门的JavaScript插件,它允许开发者将ECharts图表嵌入到天地图应用中,实现数据的地理可视化。插件通过特定的JavaScript类实例化,然后与天地图的图层相互作用,并通过配置选项来确保数据和视图的一致性。该插件对前端开发人员来说是一个有用的工具,尤其是对于那些需要在地图上展示和分析与地理位置相关数据的场景。开发人员需要熟悉JavaScript、ECharts图表库以及天地图服务的API和坐标系统,以有效地利用该插件的功能。

相关推荐

filetype

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>

filetype

<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可以互相切换展示天地图的功能,基于此修改代码发我