// 初始化
<template>
? ?// 地圖容器?
? <div class="img-box" id="cesiumContainer"></div>
</template>
<script>
export default {
? props: ["fileUrl","srs","workspace","zb"],
? data() {
? ? return {
? ? ? viewer: {},
? ? ? Cesium: {},
? ? ? highlightColor: null,
? ? ? normalColor: null,
? ? ? wmsLayer : null // wms 地圖服務(wù)圖層
? ? };
? },
? methods: {
? ? // init ： 初始化Cesium
? ? init() {
? ? ? const Cesium = this.cesium;
? ? ? this.highlightColor = Cesium.Color.GREEN.withAlpha(0.6);
? ? ? this.normalColor = Cesium.Color.YELLOW.withAlpha(0.6);
? ? ? this.viewer = new Cesium.Viewer("cesiumContainer", {
? ? ? ? //先行禁止infoBox彈出
? ? ? ? selectionIndicator: false,
? ? ? ? infoBox: false,
? ? ? ? //baseLayerPicker : false,
? ? ? ? geocoder: false,
? ? ? ? homeButton: false,
? ? ? ? sceneModePicker: false,
? ? ? ? fullscreenButton: false,
? ? ? ? navigationHelpButton: false,
? ? ? ? animation: false,
? ? ? ? timeline: false,
? ? ? ? fulllscreenButtond: false,
? ? ? ? vrButton: false,
?? ??? ?// getImageryProviderArr和getTerrainProviderViewModelsArr ?可根據(jù)項(xiàng)目需求進(jìn)行實(shí)現(xiàn)
? ? ? ? //獲取或設(shè)置可用于圖像選擇的ProviderViewModel實(shí)例數(shù)組。
? ? ? ? imageryProviderViewModels: this.getImageryProviderArr(),
? ? ? ? // //獲取或設(shè)置可用于地形選擇的ProviderViewModel實(shí)例數(shù)組。
? ? ? ? terrainProviderViewModels: this.getTerrainProviderViewModelsArr(),
? ? ? });
? ? ? this.viewer._cesiumWidget._creditContainer.style.display = "none"; // 隱藏版權(quán)
? ? },
? ? getImageryProviderArr() {
? ? ? const Cesium = this.cesium;
? ? ? return [
? ? ? ? new Cesium.ProviderViewModel({
? ? ? ? ? //圖層的名稱(chēng)。
? ? ? ? ? name: "影像底圖",
? ? ? ? ? //顯示項(xiàng)目被隱藏的工具提示
? ? ? ? ? tooltip: "影像底圖",
? ? ? ? ? //代表圖層的圖標(biāo)
? ? ? ? ? iconUrl: require("@/assets/img/yxdt.png"),
? ? ? ? ? //一個(gè)函數(shù)或命令，用于創(chuàng)建一個(gè)或多個(gè)提供程序，這些提供程序?qū)⒃谶x擇此項(xiàng)目時(shí)添加到地球儀中。
? ? ? ? ? creationFunction: function () {
? ? ? ? ? ? return new Cesium.ArcGisMapServerImageryProvider({
? ? ? ? ? ? ? url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? }),
? ? ? ? new Cesium.ProviderViewModel({
? ? ? ? ? //圖層的名稱(chēng)
? ? ? ? ? name: "電子地圖",
? ? ? ? ? //顯示項(xiàng)目被隱藏的工具提示
? ? ? ? ? tooltip: "電子地圖",
? ? ? ? ? //代表圖層的圖標(biāo)
? ? ? ? ? iconUrl: require("@/assets/img/sldt.png"),
? ? ? ? ? //一個(gè)函數(shù)或命令，用于創(chuàng)建一個(gè)或多個(gè)提供程序，這些提供程序?qū)⒃谶x擇此項(xiàng)目時(shí)添加到地球儀中
? ? ? ? ? creationFunction: function () {
? ? ? ? ? ? return new Cesium.ArcGisMapServerImageryProvider({
? ? ? ? ? ? ? url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? }),
? ? ? ];
? ? },
? ? getTerrainProviderViewModelsArr() {
? ? ? const Cesium = this.cesium;
? ? ? return [
? ? ? ? new Cesium.ProviderViewModel({
? ? ? ? ? //圖層的名稱(chēng)
? ? ? ? ? name: "無(wú)地形",
? ? ? ? ? //顯示項(xiàng)目被隱藏的工具提示
? ? ? ? ? tooltip: "WGS84標(biāo)準(zhǔn)球體",
? ? ? ? ? //代表圖層的圖標(biāo)
? ? ? ? ? iconUrl: require("@/assets/img/WGS84.png"),
? ? ? ? ? //一個(gè)函數(shù)或命令，用于創(chuàng)建一個(gè)或多個(gè)提供程序，這些提供程序?qū)⒃谶x擇此項(xiàng)目時(shí)添加到地球儀中
? ? ? ? ? creationFunction: function () {
? ? ? ? ? ? return new Cesium.EllipsoidTerrainProvider({
? ? ? ? ? ? ? ellipsoid: Cesium.Ellipsoid.WGS84,
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? }),
? ? ? ? new Cesium.ProviderViewModel({
? ? ? ? ? //圖層的名稱(chēng)
? ? ? ? ? name: "地形",
? ? ? ? ? //顯示項(xiàng)目被隱藏的工具提示
? ? ? ? ? tooltip: "STK在線(xiàn)地形",
? ? ? ? ? //代表圖層的圖標(biāo)
? ? ? ? ? iconUrl: require("@/assets/img/STK在線(xiàn)地形.png"),
? ? ? ? ? //一個(gè)函數(shù)或命令，用于創(chuàng)建一個(gè)或多個(gè)提供程序，這些提供程序?qū)⒃谶x擇此項(xiàng)目時(shí)添加到地球儀中
? ? ? ? ? creationFunction: function () {
? ? ? ? ? ? return new Cesium.CesiumTerrainProvider({
? ? ? ? ? ? ? url: Cesium.IonResource.fromAssetId(1),
? ? ? ? ? ? ? requestWaterMask: !0,
? ? ? ? ? ? ? requestVertexNormals: !0,
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? }),
? ? ? ];
? ? },
? },
};
</script>

// 加載geoserver wms服務(wù)
addWMS(fileUrl) {
? ? // 刪除之前的wms 圖層?
? ? // 這塊移除圖層 需要指出圖層變量名
? ?this.viewer.imageryLayers.remove(this.wmsLayer);
? ?this.wmsLayer = null;
? const Cesium = this.cesium;
? if(this.zb.xmin) {
? ? var provider = new Cesium.WebMapServiceImageryProvider({
? ? ? ? url : fileUrl, // wms服務(wù)地址
? ? ? ? // layers 必須參數(shù)，不寫(xiě)會(huì)報(bào)錯(cuò);
? ? ? ? // layers寫(xiě)的不對(duì)會(huì)報(bào)如下錯(cuò)誤： An error occered in "WebMapServiceImageryProvider":
? ? ? ? // Failed to obtain image tile X : 425y ? ?(有的博客說(shuō)這是跨域？？？？)
?? ??? ?// 后端API接口返回
? ? ? ? layers: this.workspace, ?
? ? ? ? // 必須參數(shù)rectangle ： 用來(lái)定位加載的WMS位置 ?后端API接口返回
? ? ? ? rectangle: Cesium.Rectangle.fromDegrees(
? ? ? ? ? +this.zb.xmin, +this.zb.ymin, +this.zb.xmax, +this.zb.ymax), ? // 必須有
? ? ? ? parameters: {
? ? ? ? ? ? service : 'WMS',
? ? ? ? ? ? format: 'image/png',
? ? ? ? ? ? transparent: true,
? ? ? ? ? ? // 后端API接口返回的
? ? ? ? ? ? srs: this.srs,
? ? ? ? } ?
? ? });
? ? // 加載WMS服務(wù)到viewer
? ? this.wmsLayer = this.viewer.imageryLayers.addImageryProvider(provider);
? ? // 飛入動(dòng)畫(huà)
? ? this.viewer.flyTo(this.wmsLayer, {
? ? ? ? duration: 2
? ? });
? } else {
? ? this.$message.warning('該地圖服務(wù)沒(méi)有坐標(biāo)可以定位')
? }

// 加載geoserver wmts服務(wù)
addWMTS(fileUrl) {
? ? ? const Cesium = this.cesium;
? ? ? let provider = new Cesium.WebMapTileServiceImageryProvider({
? ? ? ? // ?對(duì)與url ?很多博客都說(shuō)要進(jìn)行 如下拼接
? ? ? ? // 后端返回的wmts/rest/{layer}/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png
?? ??? ?// 其實(shí)不用拼接 ?只需要后端返回的/wtms路徑即可
? ? ? ? url: fileUrl, //服務(wù)地址 服務(wù)地址只需要后端返回的 /WMTS ? 不需要給后面拼接任何東西， ?
? ? ? ? layer: this.workspace, //圖層名稱(chēng) : "pucheng:satellite"
? ? ? ? style: '',
? ? ? ? format: 'image/png',
? ? ? ? tileMatrixSetID: this.srs, ?// "EPSG:900913"
? ? ? ? // 地圖飛入 ?定位的坐標(biāo) ?后端返回的數(shù)據(jù)
? ? ? ? rectangle: Cesium.Rectangle.fromDegrees(
? ? ? ? ? ? +this.zb.xmin, +this.zb.ymin, +this.zb.xmax, +this.zb.ymax),
? ? ? ? // 必須加 ?不然地圖出不來(lái)
?? ??? ?//之所以要在這里提出這個(gè)tileMatrixLabels參數(shù)，是因?yàn)镚eoServer在緩沖切分瓦片時(shí)對(duì)每一個(gè)縮放級(jí)別的存儲(chǔ)目錄沒(méi)有使用相應(yīng)的數(shù)字，而使用了網(wǎng)格+級(jí)別的方式來(lái)命名，如“EPSG:9100913:10”表示的是使用“EPSG:9100913”網(wǎng)格切分的第10級(jí)瓦片。
? ? ? ? tileMatrixLabels : [`${this.srs}:0`,`${this.srs}:1`, `${this.srs}:2`,`${this.srs}:3`,`${this.srs}:4`,`${this.srs}:5`,`${this.srs}:6`,
? ? ? ? `${this.srs}:7`,`${this.srs}:8`,`${this.srs}:9`,`${this.srs}:10`,`${this.srs}:11`,`${this.srs}:12`,`${this.srs}:13`,`${this.srs}:14`,
? ? ? ? `${this.srs}:15`,`${this.srs}:16`,`${this.srs}:17`,`${this.srs}:18`,
? ? ? ? ],
? ? ? ? // 必須加 ?不然地圖出不來(lái)
? ? ? ? tilingScheme: new Cesium.GeographicTilingScheme({//此處很重要，很重要。。。
? ? ? ? ? numberOfLevelZeroTilesX: 2,
? ? ? ? ? numberOfLevelZeroTilesY: 1
? ? ? ? }),
? ? ? ? // tilematrixset: this.srs,
? ? ? ? // maximumLevel: 18,
? ? ? });
? ? ? let layer = this.viewer.imageryLayers.addImageryProvider(provider);
? ? ? //控制圖層顯示
? ? ? this.viewer.flyTo(layer, {
? ? ? ? ? duration: 2
? ? ? ? });
? ? },