Cesium 自定义地图
示例代码
vue
<template>
<div id="cesiumContainer" ref="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
const viewer = new Cesium.Viewer("cesiumContainer", {
// 隐藏 logo
creditContainer: document.createElement('div'),
// 隐藏右上角的帮助按钮
navigationHelpButton: false,
// 去除第一次加载后控制台报错
infoBox: false,
// 右上角搜索框
geocoder: false,
// 底部时间线
timeline: false,
// 左下角动画控件
animation: false,
// 右上角主页按钮
homeButton: false,
// 右上角显示模式
sceneModePicker: false,
// 右上角投影切换按钮
baseLayerPicker: false,
// 设置天空盒
skyBox: new Cesium.SkyBox({
sources: {
positiveX: "./texture/sky/px.jpg",
negativeX: "./texture/sky/nx.jpg",
positiveY: "./texture/sky/ny.jpg",
negativeY: "./texture/sky/py.jpg",
positiveZ: "./texture/sky/pz.jpg",
negativeZ: "./texture/sky/nz.jpg",
},
}),
// 接入开源地图的时候，一定要设置Cesium实例的baseLayerPicker属性为false，也就是禁用Cesium地图和地形的选择面板，否则会影响开源地图的加载。
imageryProvider: false
});
// // 加载天地图影像底图
// const tdtKey = "83c8ede4a036744e05e57e09f60fa873";
// const tdtBasicLayer = new Cesium.ImageryLayer(new Cesium.WebMapTileServiceImageryProvider({
// url: `http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${tdtKey}`,
// layer: "tdtBasicLayer",
// style: "default",
// format: "image/jpeg",
// tileMatrixSetID: "GoogleMapsCompatible",
// }));
// // 加载天地图影像地理标签
// const tdtLabelLayer = new Cesium.ImageryLayer(new Cesium.WebMapTileServiceImageryProvider({
// url: `http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${tdtKey}`,
// layer: "tdtAnnoLayer",
// style: "default",
// format: "image/jpeg",
// tileMatrixSetID: "GoogleMapsCompatible",
// }))
// viewer.imageryLayers.add(tdtBasicLayer);
// viewer.imageryLayers.add(tdtLabelLayer);
/** 加载高德地图 */
// 加载高德影像底图
// const gdBasicLayer = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
// url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
// style: 'default',
// format: 'image/png',
// tileMatrixSetID: 'GoogleMapsCompatible',
// }));
// // 加载高德地图影像地理标签
// const gdLabelLayer = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
// url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
// style: 'default',
// format: 'image/jpeg',
// tileMatrixSetID: 'GoogleMapsCompatible',
// }));
// 高德矢量地图
// const gdsLabelLayer = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
// url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
// layer: "tdtVecBasicLayer",
// style: "default",
// format: "image/png",
// tileMatrixSetID: "GoogleMapsCompatible",
// }));
// viewer.imageryLayers.add(gdBasicLayer);
// viewer.imageryLayers.add(gdLabelLayer);
// viewer.imageryLayers.add(gdsLabelLayer);
// OSM地图,
const osmLabelLayer = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
}));
viewer.imageryLayers.add(osmLabelLayer);
/** 加载百度地图 */
// 接入百度地图相对比较复杂的，它需要自己手动定义好关于百度地图的各种参数才能够使用。
// function BaiduImageryProvider (options) {
// this._errorEvent = new Cesium.Event();
// this._tileWidth = 256;
// this._tileHeight = 256;
// this._maximumLevel = 18;
// this._minimumLevel = 1;
// var southwestInMeters = new Cesium.Cartesian2(-33554054, -33746824);
// var northeastInMeters = new Cesium.Cartesian2(33554054, 33746824);
// this._tilingScheme = new Cesium.WebMercatorTilingScheme({
// rectangleSouthwestInMeters: southwestInMeters,
// rectangleNortheastInMeters: northeastInMeters
// });
// this._rectangle = this._tilingScheme.rectangle;
// var resource = Cesium.Resource.createIfNeeded(options.url);
// this._resource = resource;
// this._tileDiscardPolicy = undefined;
// this._credit = undefined;
// this._readyPromise = undefined;
// }
// Object.defineProperties(BaiduImageryProvider.prototype, {
// url: {
// get: function () {
// return this._resource.url;
// }
// },
// proxy: {
// get: function () {
// return this._resource.proxy;
// }
// },
// tileWidth: {
// get: function () {
// if (!this.ready) {
// throw new Cesium.DeveloperError('tileWidth must not be called before the imagery provider is ready.');
// }
// return this._tileWidth;
// }
// },
// tileHeight: {
// get: function () {
// if (!this.ready) {
// throw new Cesium.DeveloperError('tileHeight must not be called before the imagery provider is ready.');
// }
// return this._tileHeight;
// }
// },
// maximumLevel: {
// get: function () {
// if (!this.ready) {
// throw new Cesium.DeveloperError('maximumLevel must not be called before the imagery provider is ready.');
// }
// return this._maximumLevel;
// }
// },
// minimumLevel: {
// get: function () {
// if (!this.ready) {
// throw new Cesium.DeveloperError('minimumLevel must not be called before the imagery provider is ready.');
// }
// return this._minimumLevel;
// }
// },
// tilingScheme: {
// get: function () {
// if (!this.ready) {
// throw new Cesium.DeveloperError('tilingScheme must not be called before the imagery provider is ready.');
// }
// return this._tilingScheme;
// }
// },
// tileDiscardPolicy: {
// get: function () {
// if (!this.ready) {
// throw new Cesium.DeveloperError('tileDiscardPolicy must not be called before the imagery provider is ready.');
// }
// return this._tileDiscardPolicy;
// }
// },
// rectangle: {
// get: function () {
// if (!this.ready) {
// throw new Cesium.DeveloperError('rectangle must not be called before the imagery provider is ready.');
// }
// return this._rectangle;
// }
// },
// errorEvent: {
// get: function () {
// return this._errorEvent;
// }
// },
// ready: {
// get: function () {
// return this._resource;
// }
// },
// readyPromise: {
// get: function () {
// return this._readyPromise;
// }
// },
// credit: {
// get: function () {
// if (!this.ready) {
// throw new Cesium.DeveloperError('credit must not be called before the imagery provider is ready.');
// }
// return this._credit;
// }
// },
// });
// BaiduImageryProvider.prototype.requestImage = function (x, y, level, request) {
// var r = this._tilingScheme.getNumberOfXTilesAtLevel(level);
// var c = this._tilingScheme.getNumberOfYTilesAtLevel(level);
// var s = this.url.replace("{x}", x - r / 2).replace("{y}", c / 2 - y - 1).replace("{z}", level).replace("{s}", Math.floor(10 * Math.random()));
// return Cesium.ImageryProvider.loadImage(this, s);
// };
// const bdBasicLayer = new Cesium.ImageryLayer(new BaiduImageryProvider({
// url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
// }));
// viewer.imageryLayers.add(bdBasicLayer);
});
</script>
<style scoped>
#cesiumContainer {
height: 100%;
width: 100%;
}
</style>