58同城北京网站建设,有了域名和空间怎么做网站内容,网站设计与建设的公司,重庆市工程建设信息网官网新网Cesium的地形来源大致可以分为两种#xff0c;一种是由Cesium官方提供的数据源#xff0c;一种是第三方的数据源#xff0c;官方源依赖于Cesium Assets#xff0c;如果设置了AccessToken后#xff0c;就可以直接使用Cesium的地形静态构造方法来获取数据源CesiumTerrainPro… Cesium的地形来源大致可以分为两种一种是由Cesium官方提供的数据源一种是第三方的数据源官方源依赖于Cesium Assets如果设置了AccessToken后就可以直接使用Cesium的地形静态构造方法来获取数据源CesiumTerrainProvider.fromIonAssetIdAssetId来自于你自己的Assets库中的id。另外一种则可以通过CesiumTerrainProvider.fromUrl 来实现加载第三方的地形服务。 下面的代码是从上一章节中的代码基础上实现的集成了下拉选择地形服务的功能。 代码中的各个key不再移除了方便诸位复现功能如果需要正式发布请自行替换各个key随时可能到期或被清理。 需要注意的是对于第三方地形服务部分我是使用了自己发布的地形服务如何制作发布网上有很多教程一般来说发布后的地址是这样的末尾以layer.json结束但是在cesium中使用的时候需要去掉最后的layer.json因为Cesium会自动补充。
http://127.0.0.1:9004/tile/terrain/2zxJPMEE/layer.json我使用的是cesiumlab发布的还有一个labtoken参数其实完整的是【…2zxJPMEE/layer.json?labtokenxx】这种情况也是要去掉layer.json后再使用。 还需要注意在cesium 1.104版本后地形构造器改为了使用静态方法来获取而且是异步的具体的可查看代码中的switchTerrain 方法
templatedivdivrefcesiumContaineridcesiumContainerclasscesium-containerstylewidth: 100%; height: 100vh;/div!--地形切换 --div classlayer-switcherlabel forbaseMap选择底图:/labelselect idbaseMap v-modelselectedBaseMap changeswitchBaseMapoption valuecesiumCesium 默认/optionoption valuetianditu天地图/optionoption valuegaode高德地图/optionoption valuebaidu百度地图/option/select/div!-- 地形切换 --div classterrain-switcherlabel forterrain选择地形:/labelselect idterrain v-modelselectedTerrain changeswitchTerrainoption valuenone无地形/optionoption valuecesiumCesium 官方地形/optionoption valuecustom第三方/自定义地形/option/select/div/div
/templatescript setup
import { onMounted, ref, reactive } from vue;
import {BingMapsImageryProvider,BingMapsStyle,Cartesian3,Color,HeadingPitchRange,Ion,Viewer,EllipsoidTerrainProvider,CesiumTerrainProvider
} from cesium;
import cesium/Build/Cesium/Widgets/widgets.css;
import CustomBaiduImageryProvider from ../cesium-extensions/BaiduImageryProvider.js;
import { AMapImageryProvider,BaiduImageryProvider,TdtImageryProvider } from cesium-china/cesium-map
import * as Cesium from cesium;const cesiumContainer ref(null)
const viewer ref(null)
const selectedBaseMap ref(cesium)
// 地形下拉框选项
const selectedTerrain ref(none);// 定义各个底图的 ImageryProvider
const imageryProviders reactive({cesium: [new BingMapsImageryProvider({url: https://dev.virtualearth.net,key: Rrke5RPh9hmJ32QZoFzP~_KI12m_pz_KbnGoZFmxVFg~Ai7_QidoqYPrWY7Kf1-GR8g9tY5C7BtbjAxOYpeoJNL4Hj66qSgWNOEAZSAlJKFC, // Cesium默认使用Bing Maps需要替换为你的密钥mapStyle: BingMapsStyle.AERIAL,})],tianditu: [new TdtImageryProvider({style: vec, //style: vec、cva、img、cia、ter key:8af054001cff0f120a2e21c69b4f8c00, // 需去天地图申请}),new TdtImageryProvider({style: cva, //style: vec、cva、img、cia、ter key:8af054001cff0f120a2e21c69b4f8c00, // 需去天地图申请})],gaode: [new AMapImageryProvider({style: img, // style: img、elec、cvacrs: WGS84 // 使用84坐标系默认为GCJ02}),new AMapImageryProvider({style: cva, // style: img、elec、cvacrs: WGS84 // 使用84坐标系默认为GCJ02})],// 使用cesium-map 组件实现/*baidu: [new BaiduImageryProvider({url:http://online{s}.map.bdimg.com/onlinelabel/?qttilex{x}y{y}z{z}stylesplscaler1p1,style: normal, // style: img、vec、normal、darkcrs: WGS84 // 使用84坐标系默认为BD09})],*/// 自定义百度地图提供器baidu:[new CustomBaiduImageryProvider()]
})onMounted(() {// 设置 Cesium Ion 访问令牌Ion.defaultAccessToken eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhNmQ5NDYyNi1lZTdhLTRiYTItODFiZi1mYzNiYWNjNDFjMzgiLCJpZCI6NTk3MTIsImlhdCI6MTY2MDE4MDAyNX0.bDTaHEah0hRjUyJWz0hyxIL0Fg63awPXV26OmQ5MCdM; // 替换为你的访问令牌viewer.value new Viewer(cesiumContainer, {animation: false, // 移除动画控件timeline: false, // 移除时间轴控件geocoder: false, // 移除地理编码控件homeButton: false, // 移除主页按钮sceneModePicker: false, // 移除场景模式选择器selectionIndicator: false, // 移除选择指示器fullscreenButton: false, // 移除全屏按钮vrButton: false, // 移除 VR 按钮// 默认不设置 terrainProvider即使用椭球体terrainProvider: new EllipsoidTerrainProvider(),// 默认无地形});// 添加默认实体或其他初始化操作const tiananmenEntity viewer.value.entities.add({position: Cartesian3.fromDegrees(116.397128, 39.916527),point: { pixelSize: 10, color: Color.RED },name: 天安门,})viewer.value.flyTo(tiananmenEntity,{duration: 3, // 飞行时间单位秒offset: new HeadingPitchRange(0, // Heading航向角0表示正北方向Cesium.Math.toRadians(-80), // Pitch俯仰角负值表示向下俯视405000 // Range距离目标的距离增加此值以提高视角高度)})
});
const switchBaseMap () {// 移除当前的底图图层if (viewer.value viewer.value.imageryLayers.length 0) {viewer.value.imageryLayers.removeAll()}let newProviders imageryProviders[selectedBaseMap.value] || [];for (let i 0; i newProviders.length; i) {viewer.value.imageryLayers.addImageryProvider(newProviders[i])}}// ------------------ 方法地形切换 -------------------
const switchTerrain async () {if (!viewer.value) return;if (selectedTerrain.value none) {viewer.value.terrainProvider new EllipsoidTerrainProvider();} else if (selectedTerrain.value cesium) {// 从 Ion assetId 加载官方地形viewer.value.terrainProvider await CesiumTerrainProvider.fromIonAssetId(1, {// requestVertexNormals: true,// requestWaterMask: true,});} else if (selectedTerrain.value custom) {// 从自定义 URL 加载viewer.value.terrainProvider await CesiumTerrainProvider.fromUrl(http://127.0.0.1:9004/tile/terrain/2zxJPMEE?labtokeneyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo,{requestVertexNormals: false,// requestWaterMask: true,})}
};/scriptstyle
.cesium-container {width: 100%;height: 100%;position: relative;
}
/* 隐藏页面底部的 Cesium logo 和数据归属 */
.cesium-viewer .cesium-widget-credits {display: none !important; /* 隐藏整个 Cesium 控件 */
}/* 隐藏 右上角的 Imagery 和 Navigation instructions */
.cesium-viewer .cesium-viewer-toolbar {display: none !important; /* 隐藏工具栏 */
}.layer-switcher {position: absolute;top: 10px;left: 10px;background: rgba(42, 42, 42, 0.8);padding: 10px;border-radius: 4px;color: white;z-index: 1;
}.layer-switcher select {margin-left: 5px;padding: 2px 5px;border-radius: 2px;border: none;
}/* 地形切换器样式可以放在旁边或者下方 */
.terrain-switcher {position: absolute;top: 60px;left: 10px;background: rgba(42, 42, 42, 0.8);padding: 10px;border-radius: 4px;color: white;z-index: 10;
}.terrain-switcher select {margin-left: 5px;padding: 2px 5px;border-radius: 2px;border: none;
}
/style源码
