diff --git a/src/utils/common.js b/src/utils/common.js index 6b138f3..74d863f 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -1,3 +1,5 @@ +import { getParamsList } from '../api/home' + export function modifyCesiumMouseWheel(viewer) { // 地图缩放改为按下 Ctrl + 鼠标滚轮 viewer.scene.screenSpaceCameraController.zoomEventTypes = [{ eventType: Cesium.CameraEventType.WHEEL, modifier: Cesium.KeyboardEventModifier.CTRL }]; @@ -17,3 +19,49 @@ export function modifyCesiumMouseWheel(viewer) { document.getElementById('mouseWheelTip').style.display = ''; }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); } + +let imageryViewModels = []; +export function setImageryViewModels(cesiumHostAddr) { + if (imageryViewModels.length == 0) { + // 彩色地形底图 + const colorMap = new Cesium.WebMapTileServiceImageryProvider( + { + url: cesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg', + layer: 'ougp:world', + style: 'default', + format: 'image/jpeg', + tileMatrixSetID: 'EPSG:4326', + tilingScheme: new Cesium.GeographicTilingScheme() + } + ); + // 灰度地形底图 + const grayMap = new Cesium.WebMapTileServiceImageryProvider( + { + url: cesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world_gray/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg', + layer: 'ougp:world_gray', + style: 'default', + format: 'image/jpeg', + tileMatrixSetID: 'EPSG:4326', + tilingScheme: new Cesium.GeographicTilingScheme() + } + ); + // 自定义底图 + imageryViewModels.push(new Cesium.ProviderViewModel({ + name: "地形地图", + iconUrl: "static/images/world_color.png", + tooltip: "彩色地形底图", + creationFunction: function () { + return colorMap; + } + })); + imageryViewModels.push(new Cesium.ProviderViewModel({ + name: "灰度地图", + iconUrl: "static/images/world_gray.png", + tooltip: "灰度地形底图", + creationFunction: function () { + return grayMap; + } + })); + } + return imageryViewModels; +} \ No newline at end of file diff --git a/src/views/dataSearch.vue b/src/views/dataSearch.vue index f2d807a..487bc76 100644 --- a/src/views/dataSearch.vue +++ b/src/views/dataSearch.vue @@ -166,6 +166,10 @@ import { } from '../api/dataSearch' import { getParamsList, getVoyageLine } from '../api/home' import Cookies from 'js-cookie' +import { + setImageryViewModels +} from '@/utils/common' + const Cesium = window.Cesium export default { name: 'Shuju', @@ -223,7 +227,9 @@ export default { chooseLine: null, currentVoyage: null, // 当前选中的航次 // 地图图层基础地址 - CesiumHostAddr: '' + CesiumHostAddr: '', + // 保存自定义底图 + imageryViewModels: [] } }, created() { @@ -281,6 +287,7 @@ export default { arr.forEach(item => { if (item.param_name === 'CesiumHostAddr') { this.CesiumHostAddr = item.param_value + this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr); this.initCesium() } }) @@ -452,7 +459,11 @@ export default { sceneMode: Cesium.SceneMode.SCENE2D, shadows: false, timeline: false, - baseLayerPicker: false, + baseLayerPicker: true, + // 设置自定义底图 + imageryProviderViewModels: this.imageryViewModels, + // 关闭默认的地形底图 + terrainProviderViewModels: [], fullscreenButton: false, selectionIndicator: false, homeButton: true, @@ -490,7 +501,7 @@ export default { }); // 不显示底图 - this.viewer.imageryLayers.get(0).show = false + // this.viewer.imageryLayers.get(0).show = false // 创建一个ScreenSpaceEventHandler实例 const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); @@ -514,17 +525,17 @@ export default { }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 叠加叠加影像服务 - const earthMap = new Cesium.WebMapTileServiceImageryProvider( - { - url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg', - layer: 'ougp:world', - style: 'default', - format: 'image/jpeg', - tileMatrixSetID: 'EPSG:4326', - tilingScheme: new Cesium.GeographicTilingScheme() - } - ) - this.viewer.imageryLayers.addImageryProvider(earthMap) + // const earthMap = new Cesium.WebMapTileServiceImageryProvider( + // { + // url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg', + // layer: 'ougp:world', + // style: 'default', + // format: 'image/jpeg', + // tileMatrixSetID: 'EPSG:4326', + // tilingScheme: new Cesium.GeographicTilingScheme() + // } + // ) + // this.viewer.imageryLayers.addImageryProvider(earthMap) // 增加海岸线 /geoserver/gwc/service/wmts/rest/ne:GSHHS_f_L1/EPSG:4326/EPSG:4326:{z}/{y}/{x}?format=image/png const coastline = new Cesium.WebMapTileServiceImageryProvider( { diff --git a/src/views/home.vue b/src/views/home.vue index 981a075..35f25da 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -231,7 +231,7 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper' import 'swiper/swiper-bundle.css' import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer' import { - modifyCesiumMouseWheel + modifyCesiumMouseWheel, setImageryViewModels } from '@/utils/common' const Cesium = window.Cesium @@ -288,7 +288,9 @@ export default { viewer: null, color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE], // 地图图层基础地址 - CesiumHostAddr: '' + CesiumHostAddr: '', + // 保存自定义底图 + imageryViewModels: [] } }, @@ -316,6 +318,7 @@ export default { arr.forEach(item => { if (item.param_name === 'CesiumHostAddr') { this.CesiumHostAddr = item.param_value + this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr); this.initCesium() } }) @@ -343,6 +346,7 @@ export default { this.voyageList = voyageList }) }, + // 初始化cesium initCesium() { Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4' @@ -350,7 +354,11 @@ export default { sceneMode: Cesium.SceneMode.SCENE2D, shadows: false, timeline: false, - baseLayerPicker: false, + baseLayerPicker: true, + // 设置自定义底图 + imageryProviderViewModels: this.imageryViewModels, + // 关闭默认的地形底图 + terrainProviderViewModels: [], fullscreenButton: false, selectionIndicator: false, homeButton: true, @@ -391,20 +399,20 @@ export default { modifyCesiumMouseWheel(this.viewer); // 不显示底图 - this.viewer.imageryLayers.get(0).show = false + // this.viewer.imageryLayers.get(0).show = true; // 叠加叠加影像服务 - const earthMap = new Cesium.WebMapTileServiceImageryProvider( - { - url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg', - layer: 'ougp:world', - style: 'default', - format: 'image/jpeg', - tileMatrixSetID: 'EPSG:4326', - tilingScheme: new Cesium.GeographicTilingScheme() - } - ) - this.viewer.imageryLayers.addImageryProvider(earthMap) + // const earthMap = new Cesium.WebMapTileServiceImageryProvider( + // { + // url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg', + // layer: 'ougp:world', + // style: 'default', + // format: 'image/jpeg', + // tileMatrixSetID: 'EPSG:4326', + // tilingScheme: new Cesium.GeographicTilingScheme() + // } + // ) + // this.viewer.imageryLayers.addImageryProvider(earthMap) // 增加海岸线 const coastline = new Cesium.WebMapTileServiceImageryProvider( { diff --git a/static/images/world_color.png b/static/images/world_color.png new file mode 100644 index 0000000..66d696b Binary files /dev/null and b/static/images/world_color.png differ diff --git a/static/images/world_gray.png b/static/images/world_gray.png new file mode 100644 index 0000000..c57b537 Binary files /dev/null and b/static/images/world_gray.png differ