cesium 矢量图设置
<template><div id="cesiumContainer"ref="cesiumContainer"></div></template><script setup>// yarn add cesium// 将cesium目录下build/Cesium 4个文件复制到punlic目录下,及widgets 复制到src 下import*asCesiumfrom"cesium";import"./Widgets/widgets.css"import{onMounted}from"vue";Cesium.Ion.defaultAccessToken="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJub25jZSI6InJQNkdnSnhPbzhnaWpKV2QiLCJqdGkiOiI1YzRlNzk3Zi1jOTEwLTQ3MTEtOGYyOC0yYWUxNDk1ZmYxNWMiLCJpZCI6NTEwOTYzLCJpc3MiOiJodHRwczovL2FwaS5jZXNpdW0uY29tIiwiYXVkIjoidW5kZWZpbmVkX2RlZmF1bHQiLCJpYXQiOjE3OTA2NDg2OTN9.5bWAq-dAHzUAmaXCQIN9J0_MF1A9KQ6WfaXXWUPQgiw"// 设置默认视角, 之前看到的是美国， 选中设置为chinaCesium.Camera.DEFAULT_VIEW_RECTANGLE=Cesium.Rectangle.fromDegrees(// 西经度89.5,// 南纬度20.4,// 东经度110.4,// 北纬度61.2);// 设置资源在根目录下// Cesium.CESIUM_BASE_URL = "/";window.CESIUM_BASE_URL="/";onMounted(()=>{// const TK = '4a164f04adf0097fef6ab908dbc3fc**';// new Cesium.Viewer("cesiumContainer");// infoBox 隐藏信息框varviewer=newCesium.Viewer("cesiumContainer",{infoBox:false,// geocoder: false ,//隐藏地理编码器,搜索框// homeButton: false ,//隐藏返回首页按钮// sceneModePicker: false ,//隐藏场景模式选择器,切换2D/3D模式// baseLayerPicker: false ,//隐藏基础图层选择器,切换基础图层// navigationHelpButton: false ,//隐藏导航帮助按钮,点击后显示导航帮助animation:false,//隐藏动画按钮,点击后播放动画// timeline: false ,//隐藏时间线,点击后显示时间线// fullscreenButton: false ,//隐藏全屏按钮,点击后全屏skyBox:newCesium.SkyBox({//设置天空盒source:{// url:"/assets/skybox",// format:Cesium.CubeTextureFormat.JPG,// type:Cesium.CubeTextureType.CUBE_MAP_POSITIVE_X,positivex:"./texture/sky/px.jpg",negativex:"./texture/sky/nx.jpg",positiveY:"./Widgets/SkyBox/py.png",negativeY:"./Widgets/SkyBox/ny.png",positiveZ:"./Widgets/SkyBox/pz.jpg",negativez:"./Widgets/SkyBox/nz.jpg",},}),// 天地图矢量路径// imageryProvider: new Cesium.WebMapTileServiceImageryProvider({// url: `https://t0.tianditu.gov.cn/vec_w/wmts?tk=${TK}`,//"http://t0.tianditu.com/vec_w/wmts?service-wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixs",// url: "https://t0.tianditu.gov.cn/vec_w/wmts?tk=4a164f04adf0097fef6ab908dbc3fc**", //"http://t0.tianditu.com/vec_w/wmts?service-wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixs",// layer: "tdtBasicLayer",// style: "default",// format: "image/jpeg",// tileMatrixSetID: "GoogleMapsCompatible",// }),});// 天地图矢量底图 (vec_w)constvecLayer=newCesium.WebMapTileServiceImageryProvider({url:"https://t0.tianditu.gov.cn/vec_w/wmts?tk=4a164f04adf0097fef6ab908dbc3fc**",layer:"vec",// 修改为 "vec"， 天地图矢量底图的图层名固定是 "vec"style:"default",format:"tiles",// 修改为 "tiles"tileMatrixSetID:"w",// 修改为 "w" (对应你的 _w 投影)maximumLevel:18,// 建议加上最大层级tilingScheme:newCesium.WebMercatorTilingScheme()// 显式声明投影});// 天地图矢量注记 (cva_w) - 必须叠加这一层才能看到地名constcvaLayer=newCesium.WebMapTileServiceImageryProvider({url:"https://t0.tianditu.gov.cn/cva_w/wmts?tk=4a164f04adf0097fef6ab908dbc3fc**",layer:"cva",// 注记图层名为 "cva"style:"default",format:"tiles",// 修改为 "tiles"tileMatrixSetID:"w",//(切片矩阵) 修改为 "w" ，和url中的w 保持一致maximumLevel:18,tilingScheme:newCesium.WebMercatorTilingScheme()});viewer.imageryLayers.addImageryProvider(vecLayer);viewer.imageryLayers.addImageryProvider(cvaLayer);// 隐藏logoviewer.cesiumWidget.creditContainer.style.display="none";// 调整相机视角viewer.camera.setView({destination:Cesium.Cartesian3.fromDegrees(116.39,39.9,25000000),// (经度, 纬度, 高度-单位米)orientation:{heading:Cesium.Math.toRadians(0.0),// 水平旋转角度pitch:Cesium.Math.toRadians(-90.0),// 俯仰角度，-90度为垂直向下看roll:0.0// 翻滚角度}});});</script><style>*{margin:0;padding:0;}#cesiumContainer{width:100vw;height:100vh;}</style>如图：
