攀枝花 网站建设,长沙网络优化推广,58网站建设58xiamen,建设网站公司哪家技术好这里借助了ceisum-map开源项目进行了实现。 cesium-map中的百度地图存在一定问题#xff0c;使用矢量地图的时候#xff0c;感觉地图的样式不太理想#xff0c;而且卫星底图仅显示了东半球#xff0c;所以自己写了个一个提供器#xff0c;也存在一定的问题#xff0c;在0…这里借助了ceisum-map开源项目进行了实现。 cesium-map中的百度地图存在一定问题使用矢量地图的时候感觉地图的样式不太理想而且卫星底图仅显示了东半球所以自己写了个一个提供器也存在一定的问题在0°线位置会有一条缝隙尝试解决了一番还是有这么个问题等我研究明白了再修改吧 主要代码如下 BaiduImageryProvider.js // 百度地图图层提供者
import * as Cesium from cesium;class CustomBaiduImageryProvider {constructor(options {}) {// 使用正确的百度地图瓦片地址this._url http://online{s}.map.bdimg.com/onlinelabel/?qttilex{x}y{y}z{z}stylesplscaler1p1;this._tileWidth 256;this._tileHeight 256;this._maximumLevel 18;this._minimumLevel 0;// 使用之前可以工作的投影参数let southwestInMeters new Cesium.Cartesian2(-33554054, -33746824);let northeastInMeters new Cesium.Cartesian2(33554054, 33746824);this._tilingScheme new Cesium.WebMercatorTilingScheme({rectangleSouthwestInMeters: southwestInMeters,rectangleNortheastInMeters: northeastInMeters});this._rectangle this._tilingScheme.rectangle;this._credit undefined;this._ready true;}get url() {return this._url;}get tileWidth() {return this._tileWidth;}get tileHeight() {return this._tileHeight;}get maximumLevel() {return this._maximumLevel;}get minimumLevel() {return this._minimumLevel;}get tilingScheme() {return this._tilingScheme;}get rectangle() {return this._rectangle;}get credit() {return this._credit;}get ready() {return this._ready;}get hasAlphaChannel() {return true;}getTileCredits() {return [];}requestImage(x, y, level) {if (!this._ready) {throw new Cesium.DeveloperError(requestImage must not be called before the imagery provider is ready.);}const xTiles this._tilingScheme.getNumberOfXTilesAtLevel(level);const yTiles this._tilingScheme.getNumberOfYTilesAtLevel(level);let baiduX Math.floor(x - xTiles / 2);let baiduY Math.floor(yTiles / 2 - y - 1);let url this._url.replace({x}, baiduX).replace({y}, baiduY).replace({z}, level).replace({s}, Math.floor(Math.random() * 10));return Cesium.ImageryProvider.loadImage(this, url);}
}export default CustomBaiduImageryProvider;LoadBaseMap.vue templatedivdivrefcesiumContaineridcesiumContainerclasscesium-containerstylewidth: 100%; height: 100vh;/divdiv classlayer-switcherlabel forbaseMap选择底图:/labelselect idbaseMap v-modelselectedBaseMap changeswitchBaseMapoption valuecesiumCesium 默认/optionoption valuetianditu天地图/optionoption valuegaode高德地图/optionoption valuebaidu百度地图/option/select/div/div
/templatescript setup
import { onMounted, ref, reactive } from vue;
import {BingMapsImageryProvider,BingMapsStyle,Cartesian3,Color, HeadingPitchRange,Ion,Viewer
} 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)// 定义各个底图的 ImageryProvider
const imageryProviders reactive({cesium: [new BingMapsImageryProvider({url: https://dev.virtualearth.net,key: , // Cesium默认使用Bing Maps需要替换为你的密钥登录cesium控制台获取mapStyle: BingMapsStyle.AERIAL,})],tianditu: [new TdtImageryProvider({style: vec, //style: vec、cva、img、cia、ter key:, // 需去天地图申请}),new TdtImageryProvider({style: cva, //style: vec、cva、img、cia、ter key:, // 需去天地图申请})],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 按钮});// 添加默认实体或其他初始化操作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.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])}}
/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;
}
/style源码
