revisit
/
DSDSWeb
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

更新banner背景图

This commit is contained in:
80937518651731347 2026-04-03 11:27:58 +08:00
parent a72a7d82f7 c2cf9ae0f4
commit bbb844b266
332 changed files with 165 additions and 15653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -10,8 +10,6 @@
<link rel="apple-touch-icon" href="./static/images/logo_map.png" />
<link rel="stylesheet" href="./static/css/reset.css">
<link rel="stylesheet" href="./static/js/Cesium/Widgets/widgets.css">
<script type="text/javascript" src="./static/js/Cesium/Cesium.js"></script>
<!-- 引入 Mapbox GL JS -->
<link href="./static/css/mapbox-gl-v3.16.0.css" rel="stylesheet">

44
package-lock.json generated
View File

@ -1462,41 +1462,6 @@
"to-fast-properties": "^2.0.0"
}
},
"@cesium/engine": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/@cesium/engine/-/engine-11.1.0.tgz",
"integrity": "sha512-vrEQAbYQuXt2cMYF9BpBu4Kxu+8uje1CrFHfyI5aNp7gCrUK1RYquldyqT7TDr3YKe7oZMHL+Xeb5Vm8ua6gZQ==",
"requires": {
"@tweenjs/tween.js": "^25.0.0",
"@zip.js/zip.js": "^2.7.34",
"autolinker": "^4.0.0",
"bitmap-sdf": "^1.0.3",
"dompurify": "^3.0.2",
"draco3d": "^1.5.1",
"earcut": "^3.0.0",
"grapheme-splitter": "^1.0.4",
"jsep": "^1.3.8",
"kdbush": "^4.0.1",
"ktx-parse": "^0.7.0",
"lerc": "^2.0.0",
"mersenne-twister": "^1.1.0",
"meshoptimizer": "^0.21.0",
"pako": "^2.0.4",
"protobufjs": "^7.1.0",
"rbush": "3.0.1",
"topojson-client": "^3.1.0",
"urijs": "^1.19.7"
}
},
"@cesium/widgets": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/@cesium/widgets/-/widgets-8.1.0.tgz",
"integrity": "sha512-WD5eokNfSQmB3oqe97KmdmDefwzooHaMWBm9kE/Af9edyD2j3eQVTrbNhiJ06UIyEjd01U1af2iDOawI9adAgA==",
"requires": {
"@cesium/engine": "^11.1.0",
"nosleep.js": "^0.12.0"
}
},
"@eslint/eslintrc": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@ -4565,15 +4530,6 @@
"lazy-cache": "^1.0.3"
}
},
"cesium": {
"version": "1.121.1",
"resolved": "https://registry.npmjs.org/cesium/-/cesium-1.121.1.tgz",
"integrity": "sha512-WpdaGFd8qCOHiE9khV0sWWjCMXAX1U9Aou8MzMC/F0Akp6YqcOk4HLk4LLhZKeOjO/Bh27iTIW2mxEZ5+dtCxg==",
"requires": {
"@cesium/engine": "^11.0.0",
"@cesium/widgets": "^8.0.0"
}
},
"chai-nightwatch": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/chai-nightwatch/-/chai-nightwatch-0.1.1.tgz",

4
package.json
View File

@ -15,8 +15,6 @@
},
"dependencies": {
"axios": "^0.19.2",
"baidu-map": "^0.1.4",
"cesium": "^1.117.0",
"echarts": "^4.9.0",
"echarts-gl": "^1.1.0",
"element-ui": "^2.13.0",
@ -32,9 +30,7 @@
"swiper": "^6.8.4",
"vue": "^2.5.2",
"vue-awesome-swiper": "^3.1.3",
"vue-baidu-map": "^0.21.22",
"vue-router": "^3.0.1",
"vue2-google-maps": "^0.10.7",
"vuex": "^3.1.1",
"xml2js": "^0.6.2"
},

40
src/router/index.js
View File

@ -208,16 +208,6 @@ export const constantRoutes = [
loginAuthority: true
}
},
// {
// path: 'GMRT',
// name: 'GMRT',
// component: () => import('@/views/GMRT.vue'),
// meta: {
// title: '地图',
// icon: 'peoples',
// loginAuthority: true
// }
// },
{
path: 'dataSearch',
name: 'dataSearch',
@ -298,16 +288,16 @@ export const constantRoutes = [
loginAuthority: true
}
},
{
path: 'physicalDataSearchCTD',
name: 'physicalDataSearchCTD',
component: () => import('@/views/sublibrary/physicalDataSearchCTD.vue'),
meta: {
title: '温盐深(CTD) 数据应用',
icon: 'peoples',
loginAuthority: true
}
},
// {
// path: 'physicalDataSearchCTD',
// name: 'physicalDataSearchCTD',
// component: () => import('@/views/sublibrary/physicalDataSearchCTD.vue'),
// meta: {
// title: '温盐深(CTD) 数据应用',
// icon: 'peoples',
// loginAuthority: true
// }
// },
{
path: 'phoneVideoIndex',
name: 'phoneVideoIndex',
@ -328,16 +318,6 @@ export const constantRoutes = [
loginAuthority: true
}
},
// {
// path: 'analyse',
// name: 'analyse',
// component: () => import('@/views/analyse.vue'),
// meta: {
// title: '统计分析',
// icon: 'peoples',
// loginAuthority: true
// }
// },
{
path: 'statistics',
name: 'statistics',

82
src/utils/common.js
View File

@ -1,83 +1 @@
import { getParamsList } from '../api/home'
export function modifyCesiumMouseWheel(viewer) {
// 地图缩放改为按下 Ctrl + 鼠标滚轮
viewer.scene.screenSpaceCameraController.zoomEventTypes = [{ eventType: Cesium.CameraEventType.WHEEL, modifier: Cesium.KeyboardEventModifier.CTRL }];
// 改写 Cesium 原生鼠标滚轮事件
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
if (event < 0) {
window.scrollBy({ left: 0, top: 15, behavior: 'auto' });
} else {
window.scrollBy({ left: 0, top: -15, behavior: 'auto' });
}
}, Cesium.ScreenSpaceEventType.WHEEL);
// 鼠标移动时显示提示信息
handler.setInputAction((event) => {
document.getElementById('mouseWheelTip').style.display = '';
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
let imageryViewModels = [];
export function setImageryViewModels(cesiumHostAddr) {
if (imageryViewModels.length == 0) {
// 世界影像地图
const world_imagery = new Cesium.WebMapTileServiceImageryProvider(
{
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
// url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
// url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer'
}
);
// 彩色地形底图
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_imagery.png",
tooltip: "世界影像地图",
creationFunction: function () {
return world_imagery;
}
}));
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;
}

2
src/utils/mapbox-utils.js
View File

@ -61,7 +61,7 @@ export function initMapbox(mapId, options = {}) {
attributionControl: false,
boxZoom: true,//如果为true，则启用了“缩放框”交互，按住shift并在地图上拖框放大
preserveDrawingBuffer: false,//如果为true，地图的canvas可以使用导出到png，通过map.getCanvas().toDataURL()。默认为false，会提高地图性能。
projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
// projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
});
Vue.config.maps[mapId] = map;

527
src/views/GMRT.vue
View File

@ -1,527 +0,0 @@
<template>
<div style="height:100%;" class="GMRT">
<div id="cesiumContainer" class="" />
<!-- <div class="father">
<ul>
<li onclick="addRain()"><a href="#">城镇预报</a></li>
<li onclick="detale()"><a href="#">清除</a></li>
</ul>
</div> -->
<div class="son" style="display: none;">弹框插槽</div>
<div v-if="imgFlag" class="image_v">
<img src="../../static/images/01.jpg" alt="">
</div>
<!-- 左下角坐标 -->
<div id="latlng_show">
<p class="coordinate">
经度（°）：
<span id="longitude_show" />
</p>
<p class="coordinate">
纬度（°）：
<span id="latitude_show" />
</p>
<p class="coordinate">
水深： <span id="elevation_show" /> m
</p>
<p class="coordinate">
视角高： <span id="altitude_show" /> km
</p>
</div>
</div>
</template>
<script>
/* 初始化变量 */
var viewer
var stationArrList = [] // 收集所有的棋子实例
var stationPrev = '' // 记录上一次点击的站位
var handler = ''
var ellipsoid = null
var elevation_show = document.getElementById('elevation_show') // 水深
var altitude_show = document.getElementById('altitude_show') // 视角高
export default {
/* eslint-disable */
name: 'GMRT',
props: {
isLine: {
type: Boolean,
default: false
},
//是否需要点击显示图片
isImg: {
type: Boolean,
default: false
},
},
data() {
return {
//图片的显示隐藏
imgFlag:false,
relatedLinksLoading:false,
relatedLinksList:[],
iconImgY:require("../../static/images/13-y.png"),
iconImgW:require("../../static/images/14-w.png"),
iconImgYB:require("../../static/images/13-b.png"),
iconImgWB:require("../../static/images/14-b.png"),
movementTimer:null
}
},
computed: {},
created() {
},
mounted() {
this.init()
},
methods: {
init() {
// Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
// viewer = new Cesium.Viewer('cesiumContainer', {
// animation: false,// 动画器件，控制视图动画的播放速度
// timeline: false,// 时间线，指示当前时间，并允许用户跳到特定的时间
// navigationHelpButton: false,// 导航帮助按钮，显示默认的地图控制帮助
// baseLayerPicker: true,// 图层选择器，选择要显示的地图服务和地形服务
// geocoder: true,// 查找位置工具，查到之后会将镜头对准找到的地址，默认使用bing地图
// vrButton: false,// 是否显示地图双屏控件
// selectionIndicator: true,// 是否显示选取指示器组件 false禁用实体选中，true选中
// infoBox: false,// 是否显示信息框
// fullscreenButton: false,// 全屏按钮
// selectionIndicator: false,// 设置绿色框框不可见
// });
// console.log(viewer)
// // 添加本地图层(当GMRT图层加载慢的时候，预先加载本地图层，交互更好)
// var localProvider = new Cesium.createTileMapServiceImageryProvider({
// url: '../../static/js/Cesium-1.53/Build/Cesium/Assets/Textures/NaturalEarthII',
// fileExtension: 'jpg'
// });
// viewer.imageryLayers.addImageryProvider(localProvider);
// // 添加GMRT图层
// var provider = new Cesium.WebMapServiceImageryProvider({
// url: 'https://www.gmrt.org/services/mapserver/wms_merc',
// layers: 'GMRT',
// style: "default",
// format: "image/jpeg",
// service: 'WMS',
// version: '1.3.0',
// request: 'GetCapabilities'
// });
// viewer.imageryLayers.addImageryProvider(provider);
let earthMap = new Cesium.WebMapTileServiceImageryProvider(
{
url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:gmrt_20231018/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
layer: 'ne:gmrt_20231018',
style: 'default',
tileMatrixSetID: 'EPSG:4326',
format: 'image/jpeg',
tilingScheme: new Cesium.GeographicTilingScheme()
});
viewer = new Cesium.Viewer('cesiumContainer', {
shadows: false,
timeline: false,
baseLayerPicker: false,
fullscreenButton: false,
selectionIndicator: false,
homeButton: false,
sceneModePicker: false,
animation: false,
infoBox: false,
geocoder: false,
navigationHelpButton: false,
imageryProvider: earthMap
});
viewer._cesiumWidget._creditContainer.style.display = 'none'
viewer.scene.sun.show = false
viewer.scene.moon.show = false
viewer.scene.fog.enabled = false
viewer.scene.skyAtmosphere.show = false
viewer.scene.sun.show = false
viewer.scene.skyBox.show = false
viewer.scene.globe.enableLighting = false;
viewer.shadowMap.darkness=0.8;
viewer.scene._sunBloom = false
viewer.scene.globe.showGroundAtmosphere = false;
// let coastline = new Cesium.WebMapTileServiceImageryProvider(
// {
// url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
// layer: 'ne:GSHHS_f_L1',
// style: 'default',
// tileMatrixSetID: 'EPSG:4326',
// format: 'image/png',
// tilingScheme: new Cesium.GeographicTilingScheme()
// }
// );
// viewer.imageryLayers.addImageryProvider(coastline);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(104.479207, 14.209234, 114.479207, 22.209234);
viewer.camera.flyHome();
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (wheelment) {
var height = viewer.camera.positionCartographic.height;
console.log(height)
if (height > 16576914.758292207) {
viewer.camera.setView({
destination: Cesium.Cartesian3.fromRadians(viewer.camera.positionCartographic.longitude, viewer.camera.positionCartographic.latitude, 16576914.758292207)
});
}
},
Cesium.ScreenSpaceEventType.WHEEL);
viewer.scene.screenSpaceCameraController.enableZoom = true;
let dataList=[
{
diveNum: "TY-22",
latitude: 0,
launchLatitude: 10.99454,
launchLongtitude: 141.936603,
longtitude: 0,
platTypeId: "深海着陆器",
platformName: "天涯号1",
processStatus: "seatrial",
sampleNo: "",
shipId: 1,
id: 1,
stationNum: "TS03-S043LANDER01"
},
{
diveNum: "TY-24",
expedition: "TS03",
id: 16,
jobType: "0",
latitude: 0,
launchLatitude: 11.326952,
launchLongtitude: 142.19354,
longtitude: 0,
platTypeId: "深海着陆器",
platformName: "天涯号2",
processStatus: "seatrial",
sampleNo: "",
shipId: 1,
stationNum: "TS03-S085LANDER08"
},
{
diveNum: "TY-25",
expedition: "TS04",
id: 18,
jobType: "0",
latitude: 0,
launchLatitude: 13.25944,
launchLongtitude: 140.841087,
longtitude: 0,
platTypeId: "深海着陆器",
platformName: "天涯号3",
processStatus: "seatrial",
sampleNo: "",
shipId: 1,
stationNum: "TS03-S085LANDER08"
}
]
let degreeArr=[]
for (var i = 0; i < dataList.length; i++) {
this.stationData(dataList[i], i);
degreeArr=[]
if(i<dataList.length-1){
degreeArr.push(dataList[i].launchLongtitude,dataList[i].launchLatitude,dataList[i+1].launchLongtitude,dataList[i+1].launchLatitude)
if(this.isLine){
this.drawLine(degreeArr);
}
}
}
let data=[
{
id:1,
expedition:"TS03",
track:[
{
longtitude:141.936603,
latitude:10.99454
},
{
longtitude:142.19354,
latitude:11.326952
},
{
longtitude:140.841087,
latitude:13.25944
},
// {
// longtitude:141.9394,
// latitude:10.991922
// }
]
}
]
// for (var i = 0; i < data.length; i++) {
// var item = data[i];
// var trackArr = item.track;
// var trackId = item.id;
// var textName = item.expedition;
// var degreeArr = [];
// for (var j = 0; j < trackArr.length; j++) {
// var trackItem = trackArr[j];
// var latitude = trackItem.latitude;
// var longtitude = trackItem.longtitude;
// degreeArr.push(longtitude, latitude);
// }
// if (degreeArr.length != 0) {
// console.log("degreeArr",degreeArr,degreeArr[0],degreeArr[1])
// this.drawLine(degreeArr, trackId, textName);
// }
// }
},
//数据集站位
stationData(data, index) {
var longtitude = data.longtitude == 0 ? data.launchLongtitude : data.longtitude;
var latitude = data.latitude == 0 ? data.launchLatitude : data.latitude;
var id = data.id; //
var shipId = data.shipId; // 航次Id
var stationNum = data.stationNum; //站位号
var diveNum = data.diveNum; //潜次编号
var sampleNo = data.sampleNo//编号
viewer.entities.add({
description:data,
id: id,
name: sampleNo !== '' ? sampleNo : (diveNum !== '' ? stationNum !== '' || stationNum !== 'undefined' ? diveNum : '' : stationNum),
position: Cesium.Cartesian3.fromDegrees(longtitude, latitude),
//位置
label: { //文字标签
text: sampleNo !== '' ? sampleNo : (diveNum !== '' ? stationNum !== '' || stationNum !== 'undefined' ? diveNum : '' : stationNum),
font: '700 16px Arial',
fillColor: Cesium.Color.WHITE,//填充颜色
outlineColor: Cesium.Color.BLACK,//轮廓颜色
outlineWidth: 3,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,//垂直方向以底部来计算标签的位置
pixelOffset: new Cesium.Cartesian2(0, 50), //偏移量
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL不要轮廓 , OUTLINE只要轮廓,FILL_AND_OUTLINE轮廓加填充
horizontalOrigin:Cesium.HorizontalOrigin.CENTER, //确定文字在坐标点的位置, CENTER RIGHT LEFT
// showBackground:true,　　　　//是否显示背景色,就是文字后面的阴影
// backgroundColor: new Cesium.Color.fromCssColorString('#141414'),
},
billboard: { //图标
image: this.iconImgW,
scale: 1,
}
});
this.addbounced()
// viewer.zoomTo(viewer.entities); //zoomTo方法可以立即定位到某个位置 */
// stationArrList.push(this.stationObj);
// if (index === 0) {
// stationPrev = index;
// viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(longtitude, latitude, 300000)
// });
// }
},
// 移动事件
addbounced() {
let _this=this
var scene = viewer.scene;
var num = {};
this.movementTimer = null;
ellipsoid = viewer.scene.globe.ellipsoid;
// 创建移动事件
handler.setInputAction(function (movement) {
if (scene.mode !== Cesium.SceneMode.MORPHING) {
let pickedObject = scene.pick(movement.endPosition);
if (
scene.pickPositionSupported &&
Cesium.defined(pickedObject) &&
pickedObject.id !== ""&&
pickedObject.id._description
) {
$(".son").html("");//每次弹出时先清空
var windowPosition = movement.startPosition;//获取屏幕坐标
num.x = windowPosition.x + 50 + document.getElementById("cesiumContainer").offsetLeft;
num.y = windowPosition.y + 50;
//获取弹出框需要显示的内容，为创建时的 description 属性
var todo = pickedObject.id._description._value;
//修改弹出框
$(".son").css("display", "block");
$(".son").css("left", num.x);
$(".son").css("top", num.y);
// 内容
//es6模板字符串
var addHtml = `
<h4 style="">科考船只：探索一号</h4>
<p>经度（°）：${todo.launchLongtitude}</p>
<p>纬度（°）：${todo.launchLatitude}</p>
<p>航迹向：56°</p>
<p>航艏向：252°</p>
<p>航速：56km</p>
<p>状态：停泊</p>
<p>更新时间：2022-3-12 11:23:24</p>`;
$(".son").append(addHtml);
} else {
$(".son").html("");
$(".son").css("display", "none");
}
}
var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
if (cartesian) {
viewer.scene.screenSpaceCameraController.enableZoom = true;
// 将笛卡尔三维坐标转为地图坐标（弧度）
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
// 将地图坐标（弧度）转为十进制的度数
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4); // 经度
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4); // 纬度
var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2); // 视角高
clearTimeout(_this.movementTimer);
_this.movementTimer = setTimeout(function () {
$.ajax({
type: "GET",
url: "https://www.gmrt.org/services/pointserver.php",
data: {
'latitude': lat_String,
'longitude': log_String,
'statsoff': 'true'
},
async: true,
success: function (msg) {
$("#elevation_show").text(msg); // 水深
}
});
},
200);
$("#longitude_show").text(log_String); // 经度
$("#latitude_show").text(lat_String); // 纬度
$("#altitude_show").text(alti_String); // 视角高
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
// if(_this.isImg){
// handler.setInputAction(function(movement){
// if (scene.mode !== Cesium.SceneMode.MORPHING) {
// let pickedObject = scene.pick(movement.position);
// if (pickedObject) {
// _this.imgFlag=true
// }else{
// _this.imgFlag=false
// }
// }
// },Cesium.ScreenSpaceEventType.LEFT_CLICK);
// }
},
/* cesium 绘制线 */
drawLine(degreeArr, sourceId, textName) {
viewer.entities.add({
// id: sourceId,
// name: textName,
// position: Cesium.Cartesian3.fromDegrees(degreeArr[0], degreeArr[1]),
//位置
// label: { //标签文字
// text: textName,
// font: '700 16px Arial',
// fillColor: Cesium.Color.YELLOW,//填充颜色
// outlineColor: Cesium.Color.BLACK,//轮廓颜色
// outlineWidth: 3,//轮廓宽度
// style: Cesium.LabelStyle.FILL_AND_OUTLINE,
// pixelOffset: new Cesium.Cartesian2(0,20),
// horizontalOrigin: Cesium.HorizontalOrigin.BOTTOM
// },
// billboard: { //图标
// image: this.iconImg,
// scale: 1,
// },
polyline: { //polyline折线实体
positions: Cesium.Cartesian3.fromDegreesArray(degreeArr),//位置
width: 20,//折线宽度
material: new Cesium.PolylineArrowMaterialProperty(
// glowPower: 0.2,//发光的强度，值为线宽的百分比(0-1.0)
// Cesium.Color.BLUE //发光的颜色
new Cesium.Color.fromCssColorString('#ff9000')
),//材质
clampToGround: true //地表层高度模式,
}
});
// viewer.zoomTo(viewer.entities); //zoomTo方法可以立即定位到某个位置
// viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(degreeArr[0], degreeArr[1], 60000)
// });
},
// 获取链接列表
async getLinks() {
this.relatedLinksLoading = true
try {
} catch (error) {
console.log(error)
}
this.relatedLinksLoading = false
},
handleDetail(row){
}
}
}
</script>
<style>
#cesiumContainer {
width: 100%;
height: calc(100% + 1px);
background-color: #a4acac;
}
.father{
position: absolute;
top: 100px;
left: 100px;
}
.father li{
list-style: none;
line-height: 50px;
}
.father a{
color: aliceblue;
}
.son{
position: absolute;
left: 1450px;
top: 418px;
background-color: #062f59c7;
color: rgb(253, 253, 253);
border-radius: 10px;
padding: 20px;
border:1px solid #7ba9cacf;
font-size: 12px;
}
.cesium-viewer-bottom{
display: none !important;
}
.GMRT{
position: relative;
}
.GMRT .image_v{
position: absolute;
left:26%;
top:2%;
}
#latlng_show{
position: absolute;
bottom:0px;
color: white;
padding:10px;
}
</style>

681
src/views/analyse.vue
View File

@ -1,681 +0,0 @@
<template>
<div class="fenxi">
<div class="banner">
<img src="../../static/images/bannerny1.jpg" alt="">
<div class="banner_con">
<div class="con">
<h1>探索一号</h1>
<ul>
<li>
<div class="t">
<p>26</p>
<span>次</span>
</div>
<div class="b">
<p>航次次数</p>
</div>
</li>
<li>
<div class="t">
<p>286</p>
<span>天</span>
</div>
<div class="b">
<p>航次天数</p>
</div>
</li>
<li>
<div class="t">
<p>23</p>
<span>家</span>
</div>
<div class="b">
<p>参航单位</p>
</div>
</li>
<li>
<div class="t">
<p>279</p>
<span>个</span>
</div>
<div class="b">
<p>作业站位个数</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="fenxi_con">
<div class="fenxi1">
<div id="xinxi" class="ccc" />
</div>
<div class="fenxi1">
<h2 class="white">参航单位</h2>
<div id="danwei" class="ccc">
<baidu-map
:center="center1"
:zoom="zoom1"
:scroll-wheel-zoom="true"
map-type="BMAP_SATELLITE_MAP"
style="width: 100%; height: 100%"
@ready="handler1"
>
<bm-marker
v-for="(item, index) in listxia"
:key="index"
:position="item.dingwei"
:dragging="true"
:icon="item.pic"
@click="totap1(item)"
>
<bm-label
:content="item.content"
:offset="{ width: -35, height: 30 }"
/>
</bm-marker>
</baidu-map>
</div>
</div>
<div class="fenxi1">
<div id="renyuan" class="ccc" />
</div>
<div class="fenxi1">
<h2 class="white">作业站位</h2>
<div id="zhanwei" class="ccc">
<GMRT />
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import GMRT from './GMRT.vue'
export default {
name: 'Fenxi',
components: {
GMRT
},
data() {
return {
center: { lng: 118.962643, lat: 35.618913 },
zoom: 3,
center1: { lng: 56.761382, lat: 10.897877 },
zoom1: 2,
list: [
{
dingwei: {
lng: 119.054629,
lat: 36.373917
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 119.919302,
lat: 34.226755
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 119.560555,
lat: 34.421374
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 116.442213,
lat: 35.556921
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei.png',
size: { width: 16, height: 21 }
}
}
],
listxia: [
{
dingwei: {
lng: 56.761382,
lat: 10.897877
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 59.116236,
lat: -0.00034
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 47.783501,
lat: -2.370556
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 41.160475,
lat: -5.474589
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
}
],
dataShuju: {
value: [800, 1200, 900, 1700, 1410, 1600, 1000, 1100],
color: '#ffe866',
name: 'Observed'
},
dataQushi: {
value: [1000, 1150, 850, 1600, 1510, 1700, 1100, 1300],
color: '#02c464',
name: 'Predicted',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
}
}
},
mounted() {
this.getecharts()
this.gettubiao2()
const originShadow = Element.prototype.attachShadow;
Element.prototype.attachShadow = (...args) => {
const shadowRoot = originShadow.call(this, ...args)
const style = document.createElement("style")
style.innerHTML = "div { display: none !important; }"
shadowRoot.appendChild(style)
return shadowRoot
};
},
methods: {
getecharts() {
var myChart = this.$echarts.init(document.getElementById('xinxi'))
var option = {
title: {
top: '20',
left: '20',
text: '航次信息统计',
textStyle: {
color: '#212121',
fontSize: '22px'
}
},
grid: {
left: '2%',
right: '4%',
bottom: '10%',
top: '20%',
containLabel: true
// borderColor:'#dce8fe',
// borderWidth: 5 ,
// show:true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: { color: 'rgba(0,0,0,0.1)' },
z: 1
},
padding: [15, 22],
backgroundColor: 'rgba(0,0,0,0.9)',
borderColor: '#01a3ce',
borderWidth: 1,
textStyle: { fontSize: 15, lineHeight: 32, color: '#ffffff' }
},
xAxis: {
data: [
'TS03',
'TS04',
'TS05',
'TS06',
'TS07',
'TS08',
'TS09',
'TS010',
'TS011',
'TS012',
'TS013'
],
axisLine: { show: true },
axisTick: {
show: false,
lineStyle: { color: '#0187c4', width: 1, opacity: 1 }
},
axisLabel: {
textStyle: { fontSize: 15, color: '#212121' },
margin: 25,
interval: 0
},
splitLine: { show: false }
},
yAxis: {
type: 'value',
name: '天数',
nameTextStyle: {
fontSize: '14px',
padding: [3, 14, 5, -30]
},
axisLine: { show: false },
axisTick: {
show: false,
lineStyle: { color: '#0187c4', width: 1, opacity: 1 }
},
axisLabel: {
textStyle: { fontSize: 14, color: '#212121' },
opacity: 0.7,
margin: 15
},
splitLine: {
show: true,
lineStyle: { color: '#212121', width: 1, opacity: 0.2 }
}
},
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
}
],
series: [
// {
// type: "pictorialBar",
// z: 13,
// symbolSize: [30, 12],
// symbolOffset: [0, -7],
// symbolPosition: "end",
// tooltip: { show: false },
// itemStyle: { color: "#00a8e6" },
// data: [120, 200, 150, 80, 70, 110, 130, 150, 80],
// },
{
type: 'bar',
z: 12,
itemStyle: {
color: '#13a1f0',
borderRadius: [5, 5, 0, 0] // （顺时针左上，右上，右下，左下）
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#00e7ff" },
// { offset: 1, color: "rgba(0,146,255,0.05)" },
// ]),
},
label: {
show: true,
position: 'top',
distance: 5,
fontSize: 16,
color: '#212121',
lineHeight: 30,
fontFamily: 'DIN-Bold'
},
// emphasis: {
// label: { color: "#f1e06e" },
// },
barWidth: 20,
data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 110, 130]
}
]
}
myChart.setOption(option)
},
gettubiao2() {
var myChart = this.$echarts.init(document.getElementById('renyuan'))
var option = {
title: {
top: '20',
left: '20',
text: '航次参航人员工作量统计',
textStyle: {
color: '#212121',
fontSize: '22px'
}
},
legend: {
data: ['天数', '次数'],
right: '5%',
top: '5%',
textStyle: {
color: '#212121',
fontSize: '15'
},
icon: 'roundRect'
},
grid: {
left: '2%',
right: '4%',
bottom: '10%',
top: '20%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: { color: 'rgba(0,0,0,0.1)' },
z: 1
},
padding: [15, 22],
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: '#01a3ce',
borderWidth: 1,
textStyle: { fontSize: 16, lineHeight: 32, color: '#212121' }
},
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
}
],
xAxis: {
data: [
'高文清',
'秋雪玲',
'陈传旭',
'何恩怨',
'金文明',
'罗腾也',
'唐元贵',
'王飒',
'李珊珊'
],
axisLine: { show: false },
axisTick: {
show: false,
lineStyle: { color: '#0187c4', width: 1, opacity: 1 }
},
axisLabel: {
textStyle: { fontSize: 16, color: '#212121' },
margin: 15,
interval: 0
},
splitLine: { show: false }
},
yAxis: {
type: 'value',
name: '天数/次数',
nameTextStyle: {
fontSize: '14px',
padding: [3, 14, 5, -10]
},
axisLine: { show: false },
axisTick: {
show: false,
lineStyle: { color: '#212121', width: 1, opacity: 1 }
},
axisLabel: {
textStyle: { fontSize: 15, color: '#212121' },
opacity: 0.7,
margin: 15
},
splitLine: {
show: true,
lineStyle: { color: '#212121', width: 1, opacity: 0.2 }
}
},
animationDelay: 900,
animationDuration: 2000,
animationDurationUpdate: 800,
series: [
// {
// type: "pictorialBar",
// z: 13,
// symbolSize: [26, 10],
// symbolOffset: [0, -6],
// symbolPosition: "end",
// tooltip: { show: false },
// itemStyle: { color: "#ffe866" },
// data: [120, 200, 150, 80, 70, 110, 130, 150, 80],
// },
{
type: 'bar',
name: '天数',
z: 8,
barGap: '30%',
itemStyle: {
color: '#13a1f0',
borderRadius: [5, 5, 0, 0]
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#cdc060" },
// { offset: 1, color: "rgba(205,192,96,0.05)" },
// ]),
},
barWidth: 20,
data: [120, 200, 150, 80, 70, 110, 130, 150, 80]
},
{
name: '次数',
type: 'line',
stack: 'Total',
smooth: true,
symbol: 'circle',
symbolSize: 10,
showSymbol: true,
z: 10,
data: [100, 150, 200, 100, 80, 90, 100, 110, 100],
itemStyle: {
color: '#fff',
borderColor: '#ffab34',
borderWidth: 2,
borderType: 'solid'
},
lineStyle: {
color: '#ffab34',
width: 4
}
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#3cefc8" },
// { offset: 1, color: "transparent" },
// ]),
// opacity: 0.15,
// },
}
]
}
myChart.setOption(option)
},
handler({ BMap, map }) {
console.log(BMap, map)
this.center.lng = 116.404
this.center.lat = 39.915
this.zoom = 6
},
handler1({ BMap, map }) {
console.log(BMap, map)
this.center1.lng = 56.761382
this.center1.lat = 10.897877
this.zoom1 = 1
},
totap(e) {
console.log(e)
e.pic.url = 'http://shipin.hey17.com/dingwei_a.png'
e.pic.size.width = 22
e.pic.size.height = 28
for (var i = 0; i < this.list.length; i++) {
if (this.list[i] != e) {
this.list[i].pic.url = 'http://shipin.hey17.com/dingwei.png'
this.list[i].pic.size.width = 16
this.list[i].pic.size.height = 21
}
}
},
totap1(e) {
console.log(e)
e.pic.url = 'http://shipin.hey17.com/dingwei_a.png'
e.pic.size.width = 22
e.pic.size.height = 28
for (var i = 0; i < this.listxia.length; i++) {
if (this.listxia[i] != e) {
this.listxia[i].pic.url = 'http://shipin.hey17.com/dingwei1.png'
this.listxia[i].pic.size.width = 16
this.listxia[i].pic.size.height = 21
}
}
}
}
}
</script>
<style scoped lang="scss">
.fenxi {
width: 100%;
height: 100%;
.banner {
width: 100%;
height: 20%;
position: relative;
img {
width: 100%;
// height: 100%;
object-fit: contain;
}
.banner_con {
position: absolute;
top: 0;
left: 0;
z-index: 888;
width: 100%;
height: 100%;
display: flex;
align-items: center;
.con {
margin: auto;
margin-top: 40px;
width: 85%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
h1 {
display: block;
margin-bottom: 40px;
font-size: 56px;
color: #fff;
font-weight: bold;
}
ul {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 80px;
.t {
display: flex;
align-items: baseline;
p {
font-size: 56px;
color: #fff;
font-family: DIN-Bold;
font-weight: bold;
}
span {
font-size: 26px;
color: #fff;
}
}
.b {
width: auto;
text-align: center;
p {
font-size: 18px;
color: #fff;
}
}
}
}
}
}
}
.fenxi_con {
margin: auto;
margin-top: 40px;
margin-bottom: 90px;
width: 85%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.fenxi1 {
position: relative;
margin-bottom: 40px;
width: 48%;
height: 520px;
border-radius: 10px;
border: 1px solid #ccc;
overflow: hidden;
h2{
position: absolute;
top: 20px;
left: 20px;
z-index: 8888;
font-size: 22px;
color: #212121;
&.white{
color: #fff;
}
}
.ccc {
width: 100%;
height: 100%;
}
}
}
}
</style>
<style>
.anchorBL{
display: none;
}
</style>

217
src/views/dataSearch.vue
View File

@ -239,7 +239,6 @@ import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFe
import { ColorGenerator } from '@/utils/color-generator';
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
const Cesium = window.Cesium
export default {
name: 'Shuju',
data() {
@ -247,7 +246,6 @@ export default {
show: false,
viewer: null,
filter: null,
color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE],
searchType: [
{
label: '航次名称',
@ -307,8 +305,6 @@ export default {
chooseLine: null,
currentVoyage: null, // 当前选中的航次
currentSample: null, // 当前选中的数据样品集合
// 地图图层基础地址
CesiumHostAddr: '',
// 保存自定义底图
imageryViewModels: [],
// 保存轨迹图层
@ -362,16 +358,13 @@ export default {
mounted() {
initMapbox("dataSearchMap", {
tileKey: "world_horizon_1",
zoom: 4,
zoom: 3,
center: [122, 15],
minZoom: 2,
maxZoom: 29,
coastlineOn:false,
contourOn:false
});
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
// this.initCesium()
},
methods: {
// 获取菜单
@ -488,20 +481,6 @@ export default {
addHighlightLayer(voyageName, i) {
Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", 4);
this.dataList[i].highlight = true;
return;
this.clearHighlight()
const highlightLayer = new Cesium.WebMapTileServiceImageryProvider({
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${voyageName}-highlight/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
layer: `dsds:${voyageName}-highlight`,
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
});
this.highlightLayer = this.viewer.imageryLayers.addImageryProvider(highlightLayer);
this.dataList[i].highlight = true;
},
// 清除高亮
clearHighlight(voyageName, i) {
@ -515,14 +494,6 @@ export default {
];
Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", lineWidthExpression);
this.dataList[i].highlight = false;
return;
this.dataList.map(item => { item.highlight = false })
// 移除地图上的高亮图层
if (this.highlightLayer) {
this.viewer.imageryLayers.remove(this.highlightLayer);
this.highlightLayer = null;
}
},
// 显示
addSingleLineImg(voyageName, i) {
@ -532,29 +503,6 @@ export default {
// 显示图层
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "visible");
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "visible");
return;
// 检查该航次图层是否已存在，避免重复添加
if (this.trackLayerMap[voyageName]) {
console.warn(`航次 ${voyageName} 的轨迹图层已存在`);
return;
}
// 创建轨迹影像图层
const trackLine = new Cesium.WebMapTileServiceImageryProvider({
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${voyageName}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
layer: `dsds:${voyageName}`,
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
});
// 添加图层到Cesium并存储引用
const layerInstance = this.viewer.imageryLayers.addImageryProvider(trackLine);
this.trackLayerMap[voyageName] = layerInstance; // 以航次名为键存储图层实例
if (i !== null) {
this.dataList[i].show = true;
}
},
// 隐藏
@ -567,68 +515,6 @@ export default {
// visibility = visibility == "visible" ? "none" : "visible";
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "none");
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "none");
return;
const layerInstance = this.trackLayerMap[voyageName];
if (layerInstance) {
// 从Cesium的imageryLayers中移除该图层
this.viewer.imageryLayers.remove(layerInstance);
// 删除映射表中对该图层的引用
delete this.trackLayerMap[voyageName];
if (i !== null) {
this.dataList[i].show = false;
}
} else {
console.warn(`未找到航次 ${voyageName} 的轨迹图层`);
}
},
// 测线业务相关图层
sampleLineImage(item) {
// 查询轨迹是否渲染过，避免重复渲染
if (this.rendered.length) {
const isRendered = this.rendered.find(ele => ele === item.sample_name)
if (isRendered) return
}
if (!item.sample_name) return
// 轨迹影像参数
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
{
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.sample_name}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
layer: `dsds:${item.sample_name}`,
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
}
)
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
this.trackLineLayers.push(trackLineLayer)
// 记录已渲染的轨迹，防止重复渲染
this.rendered.push(item.sample_name)
},
// 潜水器轨迹图层
divingImage(item) {
// 查询轨迹是否渲染过，避免重复渲染
if (this.rendered.length) {
const isRendered = this.rendered.find(ele => ele === item.diving_sn)
if (isRendered) return
}
if (!item.diving_sn) return
// 轨迹影像参数
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
{
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.diving_sn}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
layer: `dsds:${item.diving_sn}`,
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
}
)
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
this.trackLineLayers.push(trackLineLayer)
// 记录已渲染的轨迹，防止重复渲染
this.rendered.push(item.diving_sn)
},
// 清除所有轨迹图层
clearAll() {
@ -658,10 +544,6 @@ export default {
loadVectorLayer(`sample_station_${item.dataset_name}`, ["symbol"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearchMap", "dsds", "sample_name");
}
i++;
// this.addSingleLineImg(item.voyage_name, null)
// this.dataList[i].show = true;
// this.divingImage(item)
})
const voyageList = arr
voyageList.map(item => {
@ -671,11 +553,6 @@ export default {
dataset_id: item.tsy_id
}).then(res => {
item.sampleArray = res.array
// if (res.array.length) {
// res.array.forEach(sample => {
// this.sampleLineImage(sample)
// })
// }
})
}
if (item.job_type === '站位作业') {
@ -684,104 +561,12 @@ export default {
dataset_id: item.tsy_id
}).then(res => {
item.sampleArray = res.array
// 格式化坐标点
// if (res.array.length) {
// res.array.forEach(sample => {
// this.sampleLineImage(sample)
// });
// }
})
}
})
this.dataList = voyageList
},
// 初始化cesium
initCesium() {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
this.viewer = new Cesium.Viewer('dataSearchMap', {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
baseLayerPicker: false,
// 设置自定义底图
imageryProviderViewModels: this.imageryViewModels,
// 关闭默认的地形底图
terrainProviderViewModels: [],
fullscreenButton: false,
selectionIndicator: false,
homeButton: false,
sceneModePicker: false,
animation: false,
infoBox: false,
geocoder: false,
navigationHelpButton: false
})
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
this.viewer.scene.sun.show = false
this.viewer.scene.moon.show = false
this.viewer.scene.fog.enabled = false
this.viewer.scene.skyAtmosphere.show = false
this.viewer.scene.sun.show = false
this.viewer.scene.skyBox.show = false
this.viewer.scene.globe.enableLighting = false
this.viewer.shadowMap.darkness = 0.8
this.viewer.scene._sunBloom = false
this.viewer.scene.globe.showGroundAtmosphere = false
this.viewer.scene.postProcessStages.fxaa.enabled = true
// 单击 homeButton 返回初始位置
// this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
// e.cancel = true;
// this.viewer.camera.flyTo({
// // 指定相机初始位置
// destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000),
// duration: 0.5
// });
// });
this.viewer.camera.setView({
// 指定相机初始位置
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
})
// // 增加海岸线
// const coastline = new Cesium.WebMapTileServiceImageryProvider(
// {
// url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
// layer: 'ougp:GSHHS_f_L1',
// style: 'default',
// format: 'image/png',
// tileMatrixSetID: 'EPSG:4326',
// tilingScheme: new Cesium.GeographicTilingScheme()
// }
// )
// this.viewer.imageryLayers.addImageryProvider(coastline)
// 沉船摄影拼接图
const shipline = new Cesium.WebMapTileServiceImageryProvider(
{
url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:正射影像图_GM输出_20240516/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
layer: 'ougp:正射影像图_GM输出_20240516',
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
}
)
this.viewer.imageryLayers.addImageryProvider(shipline)
// 增加6000米等深线
const contour6000 = new Cesium.WebMapTileServiceImageryProvider(
{
url: Vue.config.baseUrl + 'geoserver/gwc/service/wmts/rest/ougp:contour6000/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
layer: 'ougp:contour6000',
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
}
)
this.viewer.imageryLayers.addImageryProvider(contour6000)
},
turnDeatilPage(item) {
this.dialog5 = true
regInfo({ voyage_name: item.voyage_name }).then(res => {

1305
src/views/hh.html
View File

File diff suppressed because it is too large Load Diff

219
src/views/home.vue
View File

@ -234,15 +234,10 @@ import { getVoyage, statisticsNums } from '../api/home'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer'
import {
modifyCesiumMouseWheel, setImageryViewModels
} from '@/utils/common'
import { loadVectorLayer } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator';
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
const Cesium = window.Cesium
export default {
name: 'Index',
components: {
@ -296,11 +291,6 @@ export default {
highlightLayer: null, // 存储当前高亮图层实例
dataUpdateList: [],
sampleDataUpdateList: [],
viewer: null,
// 地图图层基础地址
CesiumHostAddr: '',
// 保存自定义底图
imageryViewModels: [],
multipleSelection: [], // 当前选中的航次数组
trackLayerMap: {}, // 存储每个航次对应的轨迹图层实例 { voyage_name: layerInstance }
depthOptions: [4500, 6000], // 可扩展更多深度值
@ -315,7 +305,6 @@ export default {
}
},
created() {
this.CesiumHostAddr = process.env.NODE_ENV === 'development' ? 'http://124.222.8.13:9801/' : `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`
this.getVoyageList()
this.getStatisticsNums()
this.dataUpdate()
@ -324,9 +313,9 @@ export default {
mounted() {
initMapbox("homeMap", {
tileKey: "World_Imagery",
zoom: 4,
zoom: 1.5,
center: [122, 15],
minZoom: 2,
minZoom: 1,
maxZoom: 29,
coastlineOn: false,
contourOn: false
@ -342,8 +331,6 @@ export default {
loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp');
loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp');
});
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
},
methods: {
// 查询航次列表
@ -369,83 +356,6 @@ export default {
})
},
// 初始化cesium
initCesium() {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
this.viewer = new Cesium.Viewer('homeMap', {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
baseLayerPicker: false,
// 设置自定义底图
imageryProviderViewModels: this.imageryViewModels,
// 关闭默认的地形底图
terrainProviderViewModels: [],
fullscreenButton: false,
selectionIndicator: false,
homeButton: false,
sceneModePicker: false,
animation: false,
infoBox: false,
geocoder: false,
navigationHelpButton: false
})
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
this.viewer.scene.sun.show = false
this.viewer.scene.moon.show = false
this.viewer.scene.fog.enabled = false
this.viewer.scene.skyAtmosphere.show = false
this.viewer.scene.sun.show = false
this.viewer.scene.skyBox.show = false
this.viewer.scene.globe.enableLighting = false
this.viewer.shadowMap.darkness = 0.8
this.viewer.scene._sunBloom = false
this.viewer.scene.globe.showGroundAtmosphere = false
this.viewer.scene.postProcessStages.fxaa.enabled = true
// 单击 homeButton 返回初始位置
// this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
// e.cancel = true;
// this.viewer.camera.flyTo({
// // 指定相机初始位置
// destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000),
// duration: 0.5
// });
// });
this.viewer.camera.setView({
// 指定相机初始位置
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
});
// 改写 Cesium 原生鼠标滚轮事件，地图缩放改为按下 Ctrl + 鼠标滚轮
modifyCesiumMouseWheel(this.viewer);
// // 增加海岸线
// const coastline = new Cesium.WebMapTileServiceImageryProvider(
// {
// url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
// layer: 'ougp:GSHHS_f_L1',
// style: 'default',
// format: 'image/png',
// tileMatrixSetID: 'EPSG:4326',
// tilingScheme: new Cesium.GeographicTilingScheme()
// }
// )
// this.viewer.imageryLayers.addImageryProvider(coastline)
// 沉船摄影拼接图
const shipline = new Cesium.WebMapTileServiceImageryProvider(
{
url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:正射影像图_GM输出_20240516/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
layer: 'ougp:正射影像图_GM输出_20240516',
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
}
)
this.viewer.imageryLayers.addImageryProvider(shipline)
},
// 行点击事件处理
handleRowClick(row, column, event) {
// 原高亮逻辑改为图层显示/隐藏控制
@ -454,55 +364,8 @@ export default {
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility", visibility);
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-line`, "visibility", visibility);
this.$refs.multipleTable.toggleRowSelection(row);
return;
// 如果点击的是当前已选中的行，则取消选择
if (this.currentVoyage === row.voyage_name) {
this.clearHighlight();
return;
}
// 设置新的当前选中航次
this.currentVoyage = row.voyage_name;
// 先移除可能存在的旧高亮图层
if (this.highlightLayer) {
this.viewer.imageryLayers.remove(this.highlightLayer);
this.highlightLayer = null;
}
// 加载新高亮图层
this.addHighlightLayer(row.voyage_name);
},
// 添加高亮图层
addHighlightLayer(voyageName) {
const highlightLayer = new Cesium.WebMapTileServiceImageryProvider({
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${voyageName}-highlight/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
layer: `dsds:${voyageName}-highlight`,
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
});
this.highlightLayer = this.viewer.imageryLayers.addImageryProvider(highlightLayer);
},
// 清除高亮
clearHighlight() {
// 移除地图上的高亮图层
if (this.highlightLayer) {
this.viewer.imageryLayers.remove(this.highlightLayer);
this.highlightLayer = null;
}
// 清除表格高亮
this.currentVoyage = null;
// 如果需要清除行高亮，可以调用El-Table的方法
this.$refs.multipleTable.setCurrentRow(null);
},
// 处理表格选择项变化
handleSelectionChange(val) {
// 获取新旧选中的航次名称数组
@ -516,7 +379,6 @@ export default {
// 移除不再需要的轨迹图层
voyagesToRemove.forEach(voyage => {
// this.removeSingleLineImg(voyage);
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "none");
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "none");
});
@ -526,7 +388,6 @@ export default {
// 从val中找出对应航次的完整数据项
const correspondingItem = val.find(item => item.voyage_name === voyage);
if (correspondingItem) {
// this.addSingleLineImg(correspondingItem);
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "visible");
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "visible");
}
@ -535,42 +396,7 @@ export default {
// 更新当前选中项
this.multipleSelection = val;
},
// 添加单个航次的轨迹图层
addSingleLineImg(item) {
const voyageName = item.voyage_name;
// 检查该航次图层是否已存在，避免重复添加
if (this.trackLayerMap[voyageName]) {
console.warn(`航次 ${voyageName} 的轨迹图层已存在`);
return;
}
const trackLine = new Cesium.WebMapTileServiceImageryProvider({
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${voyageName}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
layer: `dsds:${voyageName}`,
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
});
// 添加图层到Cesium并存储引用
const layerInstance = this.viewer.imageryLayers.addImageryProvider(trackLine);
this.trackLayerMap[voyageName] = layerInstance; // 以航次名为键存储图层实例
},
// 移除单个航次的轨迹图层
removeSingleLineImg(voyageName) {
const layerInstance = this.trackLayerMap[voyageName];
if (layerInstance) {
// 从Cesium的imageryLayers中移除该图层
this.viewer.imageryLayers.remove(layerInstance);
// 删除映射表中对该图层的引用
delete this.trackLayerMap[voyageName];
} else {
console.warn(`未找到航次 ${voyageName} 的轨迹图层`);
}
},
toggleDepth(depth) {
// **方案1: 如果要求同时只能有一个按钮被选中**
// this.selectedDepths = [depth]; // 数组只保留当前点击的深度
@ -579,50 +405,13 @@ export default {
const index = this.selectedDepths.indexOf(depth);
if (index > -1) {
this.selectedDepths.splice(index, 1); // 如果已选中，则移除
// this.removeSingleContourLine(depth); // 移除指定深度的单条等深线
Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "none");
} else {
this.selectedDepths.push(depth); // 如果未选中，则添加
// this.addSingleContourLine(depth); // 添加指定深度的单条等深线
Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "visible");
}
},
// 添加单条指定深度的等深线
addSingleContourLine(deep) {
// 先检查该深度的图层是否已存在，避免重复创建
if (this.contourLayerMap[deep]) {
// 图层已存在，只需将其设置为显示（如果需要控制显示隐藏的话）
console.warn(`等深线 ${deep} 米图层已存在`);
return;
}
const contour = new Cesium.WebMapTileServiceImageryProvider({
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/ougp:contour${deep}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
layer: `ougp:contour${deep}`,
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
});
// 添加图层并存储引用
const layerInstance = this.viewer.imageryLayers.addImageryProvider(contour);
this.contourLayerMap[deep] = layerInstance; // 以深度值为键存储图层实例
},
// 移除单条指定深度的等深线
removeSingleContourLine(deep) {
// 根据深度值从映射表中获取对应的图层实例
const layerInstance = this.contourLayerMap[deep];
if (layerInstance) {
// 从Cesium的imageryLayers中移除该图层
this.viewer.imageryLayers.remove(layerInstance);
// 删除映射表中对该图层的引用
delete this.contourLayerMap[deep];
} else {
console.warn(`未找到 ${deep} 米等深线图层`);
}
},
// 统计数据
getStatisticsNums() {
statisticsNums().then(res => {
@ -1428,10 +1217,6 @@ export default {
color: #fff;
}
.cesium-viewer-bottom {
display: none !important;
}
#map {
position: relative;
}

204
src/views/statistics/AuvStatistics.vue
View File

@ -2,31 +2,17 @@
<div class="statistics">
<div class="banner">
<div class="banner-title-picker">
<el-dropdown
class="banner-type-dropdown"
trigger="click"
@command="handleCommand"
>
<el-dropdown class="banner-type-dropdown" trigger="click" @command="handleCommand">
<span class="banner-select-trigger">
<span class="banner-select-text">{{ currentTitle }}</span>
<svg
class="banner-select-chevron"
viewBox="0 0 24 24"
width="40"
height="40"
aria-hidden="true"
focusable="false"
>
<svg class="banner-select-chevron" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true"
focusable="false">
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
</svg>
</span>
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
<el-dropdown-item command="全部无人航行潜水器">全部无人航行潜水器</el-dropdown-item>
<el-dropdown-item
v-for="item in titles"
:key="item.tsy_id"
:command="item.report_name"
>
<el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
{{ item.report_name }}
</el-dropdown-item>
</el-dropdown-menu>
@ -79,17 +65,15 @@
<script>
/**
* 无人航行潜水器汇总统计页，请求 `/report/platform/auv` 系列接口；交互与遥控潜水器汇总页一致（Cesium + ECharts）。
* 无人航行潜水器汇总统计页，请求 `/report/platform/auv` 系列接口；交互与遥控潜水器汇总页一致（ECharts）。
*/
import BarChart from './components/BarChart.vue'
import PieChart from './components/PieChart.vue'
import { setImageryViewModels } from '../../utils/common'
import { reportList, platformAuv, auvUnit, auvUnitYear, auvDiving } from '../../api/statistics'
import { filterDictItems } from '../../utils/index'
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator';
const Cesium = window.Cesium
export default {
components: {
@ -122,13 +106,6 @@ export default {
unit: '个'
}
],
// Cesium相关 - 参航单位地图
baiduCesiumViewer: null,
baiduCesiumEntities: [], // 存储参航单位标记实体
viewer: null,
// 地图图层基础地址
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
trackLineLayers: [],
barData1: {},
barData2: {},
barData3: {},
@ -155,24 +132,14 @@ export default {
});
initMapbox("voyageMap_auv", {
tileKey: "GEBCO_basemap_NCEI",
zoom: 4,
zoom: 3,
center: [113, 15],
minZoom: 2,
maxZoom: 29
});
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
// this.initCesium() // 初始化航次地图
// this.initBaiduCesium() // 初始化参航单位地图
},
beforeDestroy() {
// 清理Cesium资源
if (this.baiduCesiumViewer) {
this.baiduCesiumViewer.destroy()
}
if (this.viewer) {
this.viewer.destroy()
}
},
methods: {
// 无人航行潜水器数据
@ -231,11 +198,6 @@ export default {
});
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_auv");
// // 清除之前的标记
// this.clearBaiduCesiumMarkers()
// // 创建参航单位标记
// this.createBaiduCesiumMarkers(res.array)
const typeCount = res.array.reduce((acc, unit) => {
const type = unit.unit_type
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
@ -247,55 +209,7 @@ export default {
}))
})
},
// 创建参航单位Cesium标记点
createBaiduCesiumMarkers(units) {
if (!this.baiduCesiumViewer) return
const entities = []
units.forEach((item, index) => {
// 创建标记实体
const entity = this.baiduCesiumViewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(item.unit_lon, item.unit_lat),
billboard: {
image: '../../../static/img/01.png', // 正常状态的图标
width: 32,
height: 32,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER
},
label: {
text: item.unit_name,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -40), // 标签在标记下方
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK
},
unitData: item, // 存储原始数据
index: index // 存储索引
})
entities.push(entity)
})
this.baiduCesiumEntities = entities
// 调整视角以显示所有标记
if (entities.length > 0) {
this.baiduCesiumViewer.zoomTo(entities)
}
},
// 清除参航单位标记
clearBaiduCesiumMarkers() {
if (this.baiduCesiumViewer && this.baiduCesiumEntities.length > 0) {
this.baiduCesiumEntities.forEach(entity => {
this.baiduCesiumViewer.entities.remove(entity)
})
this.baiduCesiumEntities = []
}
},
// 潜次统计
gitAuvDiving(params = {}) {
auvDiving(params).then(res => {
@ -306,108 +220,10 @@ export default {
// 加载轨迹图层
loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_auv", "dsds");
i++;
})
})
},
// this.addSingleLineImg(item)
})
})
},
// 初始化Cesium - 参航单位地图
initBaiduCesium() {
this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_auv, {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
baseLayerPicker: false,
imageryProviderViewModels: this.imageryViewModels,
terrainProviderViewModels: [],
fullscreenButton: false,
selectionIndicator: false,
homeButton: false,
sceneModePicker: false,
animation: false,
infoBox: false,
geocoder: false,
navigationHelpButton: false
})
this.baiduCesiumViewer._cesiumWidget._creditContainer.style.display = 'none'
this.baiduCesiumViewer.scene.sun.show = false
this.baiduCesiumViewer.scene.moon.show = false
this.baiduCesiumViewer.scene.fog.enabled = false
this.baiduCesiumViewer.scene.skyAtmosphere.show = false
this.baiduCesiumViewer.scene.sun.show = false
this.baiduCesiumViewer.scene.skyBox.show = false
this.baiduCesiumViewer.scene.globe.enableLighting = false
this.baiduCesiumViewer.shadowMap.darkness = 0.8
this.baiduCesiumViewer.scene._sunBloom = false
this.baiduCesiumViewer.scene.globe.showGroundAtmosphere = false
this.baiduCesiumViewer.scene.postProcessStages.fxaa.enabled = true
this.baiduCesiumViewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(114.4040, 30.5196, 4000000)
})
},
// 初始化cesium
initCesium() {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
this.viewer = new Cesium.Viewer(this.$refs.voyageMap_auv, {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
baseLayerPicker: false,
// 设置自定义底图
imageryProviderViewModels: this.imageryViewModels,
// 关闭默认的地形底图
terrainProviderViewModels: [],
fullscreenButton: false,
selectionIndicator: false,
homeButton: false,
sceneModePicker: false,
animation: false,
infoBox: false,
geocoder: false,
navigationHelpButton: false
})
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
this.viewer.scene.sun.show = false
this.viewer.scene.moon.show = false
this.viewer.scene.fog.enabled = false
this.viewer.scene.skyAtmosphere.show = false
this.viewer.scene.sun.show = false
this.viewer.scene.skyBox.show = false
this.viewer.scene.globe.enableLighting = false
this.viewer.shadowMap.darkness = 0.8
this.viewer.scene._sunBloom = false
this.viewer.scene.globe.showGroundAtmosphere = false
this.viewer.scene.postProcessStages.fxaa.enabled = true
this.viewer.camera.setView({
// 指定相机初始位置
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
})
},
// 添加轨迹图层
addSingleLineImg(item) {
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
{
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.diving_sn}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
layer: `dsds:${item.diving_sn}`,
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
}
)
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
this.trackLineLayers.push(trackLineLayer)
},
// 移除轨迹图层
removeSingleLineImg() {
if (this.trackLineLayers.length) {
this.trackLineLayers.forEach(line => {
this.viewer.imageryLayers.remove(line)
})
}
},
// 参潜单位年度
gitAuvUnitYear(params = {}) {
auvUnitYear(params).then(res => {

243
src/views/statistics/HovStatistics.vue
View File

@ -2,31 +2,17 @@
<div class="statistics">
<div class="banner">
<div class="banner-title-picker">
<el-dropdown
class="banner-type-dropdown"
trigger="click"
@command="handleCommand"
>
<el-dropdown class="banner-type-dropdown" trigger="click" @command="handleCommand">
<span class="banner-select-trigger">
<span class="banner-select-text">{{ currentTitle }}</span>
<svg
class="banner-select-chevron"
viewBox="0 0 24 24"
width="40"
height="40"
aria-hidden="true"
focusable="false"
>
<svg class="banner-select-chevron" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true"
focusable="false">
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
</svg>
</span>
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
<el-dropdown-item command="全部载人潜水器">全部载人潜水器</el-dropdown-item>
<el-dropdown-item
v-for="item in titles"
:key="item.tsy_id"
:command="item.report_name"
>
<el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
{{ item.report_name }}
</el-dropdown-item>
</el-dropdown-menu>
@ -54,49 +40,24 @@
<!-- echarts板块-->
<div class="echarts-module">
<div class="bezel">
<BarChart
:title="barData1.title"
:chart-data="barData1.salesData"
:categories="barData1.productCategories"
chart-type="single"
/>
<BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
chart-type="single" />
</div>
<div class="bezel">
<BarChart
:title="barData2.title"
:chart-data="barData2.salesData"
:categories="barData2.productCategories"
chart-type="stacked"
stack-name="新增单位数"
/>
<BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
chart-type="stacked" stack-name="新增单位数" />
</div>
<div class="bezel">
<BarChart
:title="barData3.title"
:chart-data="barData3.salesData"
:categories="barData3.productCategories"
/>
<BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
</div>
<div class="bezel">
<BarChart
:title="barData4.title"
:chart-data="barData4.salesData"
:categories="barData4.productCategories"
/>
<BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
</div>
<div class="bezel">
<BarChart
:title="barData5.title"
:chart-data="barData5.salesData"
:categories="barData5.productCategories"
/>
<BarChart :title="barData5.title" :chart-data="barData5.salesData" :categories="barData5.productCategories" />
</div>
<div class="bezel">
<PieChart
:chart-data="pieData"
title="下潜单位类型"
chart-type="ring"
/>
<PieChart :chart-data="pieData" title="下潜单位类型" chart-type="ring" />
</div>
</div>
</div>
@ -108,10 +69,9 @@ import PieChart from './components/PieChart.vue'
import { setImageryViewModels } from '../../utils/common'
import { reportList, platformHov, hovUnit, hovUnitYear, hovDiving } from '../../api/statistics'
import { filterDictItems } from '../../utils/index'
import {initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator';
const Cesium = window.Cesium
export default {
components: {
@ -144,13 +104,6 @@ export default {
unit: '个'
}
],
// Cesium相关 - 参航单位地图
baiduCesiumViewer: null,
baiduCesiumEntities: [], // 存储参航单位标记实体
viewer: null,
// 地图图层基础地址
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
trackLineLayers: [],
barData1: {},
barData2: {},
barData3: {},
@ -177,24 +130,14 @@ export default {
});
initMapbox("voyageMap_hov", {
tileKey: "GEBCO_basemap_NCEI",
zoom: 4,
zoom: 3,
center: [113, 15],
minZoom: 2,
maxZoom: 29
});
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
// this.initCesium() // 初始化航次地图
// this.initBaiduCesium() // 初始化参航单位地图
},
beforeDestroy() {
// 清理Cesium资源
if (this.baiduCesiumViewer) {
this.baiduCesiumViewer.destroy()
}
if (this.viewer) {
this.viewer.destroy()
}
},
methods: {
// 载人潜水器数据
@ -253,11 +196,6 @@ export default {
});
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_hov");
// // 清除之前的标记
// this.clearBaiduCesiumMarkers()
// // 创建参航单位标记
// this.createBaiduCesiumMarkers(res.array)
const typeCount = res.array.reduce((acc, unit) => {
const type = unit.unit_type
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
@ -269,55 +207,7 @@ export default {
}))
})
},
// 创建参航单位Cesium标记点
createBaiduCesiumMarkers(units) {
if (!this.baiduCesiumViewer) return
const entities = []
units.forEach((item, index) => {
// 创建标记实体
const entity = this.baiduCesiumViewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(item.unit_lon, item.unit_lat),
billboard: {
image: '../../../static/img/01.png', // 正常状态的图标
width: 32,
height: 32,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER
},
label: {
text: item.unit_name,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -40), // 标签在标记下方
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK
},
unitData: item, // 存储原始数据
index: index // 存储索引
})
entities.push(entity)
})
this.baiduCesiumEntities = entities
// 调整视角以显示所有标记
if (entities.length > 0) {
this.baiduCesiumViewer.zoomTo(entities)
}
},
// 清除参航单位标记
clearBaiduCesiumMarkers() {
if (this.baiduCesiumViewer && this.baiduCesiumEntities.length > 0) {
this.baiduCesiumEntities.forEach(entity => {
this.baiduCesiumViewer.entities.remove(entity)
})
this.baiduCesiumEntities = []
}
},
// 潜次统计
gitHovDiving(params = {}) {
hovDiving(params).then(res => {
@ -333,103 +223,7 @@ export default {
})
})
},
// 初始化Cesium - 参航单位地图
initBaiduCesium() {
this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_hov, {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
baseLayerPicker: false,
imageryProviderViewModels: this.imageryViewModels,
terrainProviderViewModels: [],
fullscreenButton: false,
selectionIndicator: false,
homeButton: false,
sceneModePicker: false,
animation: false,
infoBox: false,
geocoder: false,
navigationHelpButton: false
})
this.baiduCesiumViewer._cesiumWidget._creditContainer.style.display = 'none'
this.baiduCesiumViewer.scene.sun.show = false
this.baiduCesiumViewer.scene.moon.show = false
this.baiduCesiumViewer.scene.fog.enabled = false
this.baiduCesiumViewer.scene.skyAtmosphere.show = false
this.baiduCesiumViewer.scene.sun.show = false
this.baiduCesiumViewer.scene.skyBox.show = false
this.baiduCesiumViewer.scene.globe.enableLighting = false
this.baiduCesiumViewer.shadowMap.darkness = 0.8
this.baiduCesiumViewer.scene._sunBloom = false
this.baiduCesiumViewer.scene.globe.showGroundAtmosphere = false
this.baiduCesiumViewer.scene.postProcessStages.fxaa.enabled = true
this.baiduCesiumViewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(114.4040, 30.5196, 4000000)
})
},
// 初始化cesium
initCesium() {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
this.viewer = new Cesium.Viewer('voyageMap_hov', {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
baseLayerPicker: false,
// 设置自定义底图
imageryProviderViewModels: this.imageryViewModels,
// 关闭默认的地形底图
terrainProviderViewModels: [],
fullscreenButton: false,
selectionIndicator: false,
homeButton: false,
sceneModePicker: false,
animation: false,
infoBox: false,
geocoder: false,
navigationHelpButton: false
})
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
this.viewer.scene.sun.show = false
this.viewer.scene.moon.show = false
this.viewer.scene.fog.enabled = false
this.viewer.scene.skyAtmosphere.show = false
this.viewer.scene.sun.show = false
this.viewer.scene.skyBox.show = false
this.viewer.scene.globe.enableLighting = false
this.viewer.shadowMap.darkness = 0.8
this.viewer.scene._sunBloom = false
this.viewer.scene.globe.showGroundAtmosphere = false
this.viewer.scene.postProcessStages.fxaa.enabled = true
this.viewer.camera.setView({
// 指定相机初始位置
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
})
},
// 添加轨迹图层
addSingleLineImg(item) {
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
{
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.diving_sn}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
layer: `dsds:${item.diving_sn}`,
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
}
)
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
this.trackLineLayers.push(trackLineLayer)
},
// 移除轨迹图层
removeSingleLineImg() {
if (this.trackLineLayers.length) {
this.trackLineLayers.forEach(line => {
this.viewer.imageryLayers.remove(line)
})
}
},
// 参潜单位年度
gitHovUnitYear(params = {}) {
hovUnitYear(params).then(res => {
@ -577,24 +371,29 @@ export default {
flex-direction: column;
justify-content: center;
align-items: center;
.value {
font-size: 56px;
font-weight: bold;
.unit {
font-size: 26px;
}
}
.label {
font-size: 18px;
}
}
}
}
.map-module {
padding: 50px 50px;
display: flex;
justify-content: space-between;
gap: 50px;
.bezel {
flex: 1;
width: 100%;
@ -612,6 +411,7 @@ export default {
z-index: 8888;
font-size: 22px;
}
.map-year {
position: absolute;
top: 20px;
@ -622,6 +422,7 @@ export default {
}
}
}
.echarts-module {
padding: 0 50px 50px;
display: grid;

199
src/views/statistics/RovStatistics.vue
View File

@ -2,31 +2,17 @@
<div class="statistics">
<div class="banner">
<div class="banner-title-picker">
<el-dropdown
class="banner-type-dropdown"
trigger="click"
@command="handleCommand"
>
<el-dropdown class="banner-type-dropdown" trigger="click" @command="handleCommand">
<span class="banner-select-trigger">
<span class="banner-select-text">{{ currentTitle }}</span>
<svg
class="banner-select-chevron"
viewBox="0 0 24 24"
width="40"
height="40"
aria-hidden="true"
focusable="false"
>
<svg class="banner-select-chevron" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true"
focusable="false">
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
</svg>
</span>
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
<el-dropdown-item command="全部遥控潜水器">全部遥控潜水器</el-dropdown-item>
<el-dropdown-item
v-for="item in titles"
:key="item.tsy_id"
:command="item.report_name"
>
<el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
{{ item.report_name }}
</el-dropdown-item>
</el-dropdown-menu>
@ -83,13 +69,11 @@
*/
import BarChart from './components/BarChart.vue'
import PieChart from './components/PieChart.vue'
import { setImageryViewModels } from '../../utils/common'
import { reportList, platformRov, rovUnit, rovUnitYear, rovDiving } from '../../api/statistics'
import { filterDictItems } from '../../utils/index'
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator';
const Cesium = window.Cesium
export default {
components: {
@ -122,13 +106,6 @@ export default {
unit: '个'
}
],
// Cesium相关 - 参航单位地图
baiduCesiumViewer: null,
baiduCesiumEntities: [], // 存储参航单位标记实体
viewer: null,
// 地图图层基础地址
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
trackLineLayers: [],
barData1: {},
barData2: {},
barData3: {},
@ -155,24 +132,14 @@ export default {
});
initMapbox("voyageMap_rov", {
tileKey: "GEBCO_basemap_NCEI",
zoom: 4,
zoom: 3,
center: [113, 15],
minZoom: 2,
maxZoom: 29
});
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
// this.initCesium() // 初始化航次地图
// this.initBaiduCesium() // 初始化参航单位地图
},
beforeDestroy() {
// 清理Cesium资源
if (this.baiduCesiumViewer) {
this.baiduCesiumViewer.destroy()
}
if (this.viewer) {
this.viewer.destroy()
}
},
methods: {
// 遥控潜水器数据
@ -184,7 +151,7 @@ export default {
// 选择遥控潜水器
handleCommand(command) {
this.currentTitle = command
this.removeSingleLineImg()
// this.removeSingleLineImg()
if (command === '全部遥控潜水器') {
this.getRovList()
this.gitRovDiving()
@ -231,11 +198,6 @@ export default {
});
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_rov");
// // 清除之前的标记
// this.clearBaiduCesiumMarkers()
// // 创建参航单位标记
// this.createBaiduCesiumMarkers(res.array)
const typeCount = res.array.reduce((acc, unit) => {
const type = unit.unit_type
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
@ -247,55 +209,7 @@ export default {
}))
})
},
// 创建参航单位Cesium标记点
createBaiduCesiumMarkers(units) {
if (!this.baiduCesiumViewer) return
const entities = []
units.forEach((item, index) => {
// 创建标记实体
const entity = this.baiduCesiumViewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(item.unit_lon, item.unit_lat),
billboard: {
image: '../../../static/img/01.png', // 正常状态的图标
width: 32,
height: 32,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER
},
label: {
text: item.unit_name,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -40), // 标签在标记下方
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK
},
unitData: item, // 存储原始数据
index: index // 存储索引
})
entities.push(entity)
})
this.baiduCesiumEntities = entities
// 调整视角以显示所有标记
if (entities.length > 0) {
this.baiduCesiumViewer.zoomTo(entities)
}
},
// 清除参航单位标记
clearBaiduCesiumMarkers() {
if (this.baiduCesiumViewer && this.baiduCesiumEntities.length > 0) {
this.baiduCesiumEntities.forEach(entity => {
this.baiduCesiumViewer.entities.remove(entity)
})
this.baiduCesiumEntities = []
}
},
// 潜次统计
gitRovDiving(params = {}) {
rovDiving(params).then(res => {
@ -306,108 +220,9 @@ export default {
// 加载轨迹图层
loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_rov", "dsds");
i++;
// this.addSingleLineImg(item)
})
})
},
// 初始化Cesium - 参航单位地图
initBaiduCesium() {
this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_rov, {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
baseLayerPicker: false,
imageryProviderViewModels: this.imageryViewModels,
terrainProviderViewModels: [],
fullscreenButton: false,
selectionIndicator: false,
homeButton: false,
sceneModePicker: false,
animation: false,
infoBox: false,
geocoder: false,
navigationHelpButton: false
})
this.baiduCesiumViewer._cesiumWidget._creditContainer.style.display = 'none'
this.baiduCesiumViewer.scene.sun.show = false
this.baiduCesiumViewer.scene.moon.show = false
this.baiduCesiumViewer.scene.fog.enabled = false
this.baiduCesiumViewer.scene.skyAtmosphere.show = false
this.baiduCesiumViewer.scene.sun.show = false
this.baiduCesiumViewer.scene.skyBox.show = false
this.baiduCesiumViewer.scene.globe.enableLighting = false
this.baiduCesiumViewer.shadowMap.darkness = 0.8
this.baiduCesiumViewer.scene._sunBloom = false
this.baiduCesiumViewer.scene.globe.showGroundAtmosphere = false
this.baiduCesiumViewer.scene.postProcessStages.fxaa.enabled = true
this.baiduCesiumViewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(114.4040, 30.5196, 4000000)
})
},
// 初始化cesium
initCesium() {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
this.viewer = new Cesium.Viewer(this.$refs.voyageMap_rov, {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
baseLayerPicker: false,
// 设置自定义底图
imageryProviderViewModels: this.imageryViewModels,
// 关闭默认的地形底图
terrainProviderViewModels: [],
fullscreenButton: false,
selectionIndicator: false,
homeButton: false,
sceneModePicker: false,
animation: false,
infoBox: false,
geocoder: false,
navigationHelpButton: false
})
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
this.viewer.scene.sun.show = false
this.viewer.scene.moon.show = false
this.viewer.scene.fog.enabled = false
this.viewer.scene.skyAtmosphere.show = false
this.viewer.scene.sun.show = false
this.viewer.scene.skyBox.show = false
this.viewer.scene.globe.enableLighting = false
this.viewer.shadowMap.darkness = 0.8
this.viewer.scene._sunBloom = false
this.viewer.scene.globe.showGroundAtmosphere = false
this.viewer.scene.postProcessStages.fxaa.enabled = true
this.viewer.camera.setView({
// 指定相机初始位置
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
})
},
// 添加轨迹图层
addSingleLineImg(item) {
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
{
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.diving_sn}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
layer: `dsds:${item.diving_sn}`,
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
}
)
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
this.trackLineLayers.push(trackLineLayer)
},
// 移除轨迹图层
removeSingleLineImg() {
if (this.trackLineLayers.length) {
this.trackLineLayers.forEach(line => {
this.viewer.imageryLayers.remove(line)
})
}
},
// 参潜单位年度
gitRovUnitYear(params = {}) {
rovUnitYear(params).then(res => {

309
src/views/statistics/ShipStatistics.vue
View File

@ -2,31 +2,17 @@
<div class="statistics">
<div class="banner">
<div class="banner-title-picker">
<el-dropdown
class="banner-type-dropdown"
trigger="click"
@command="handleCommand"
>
<el-dropdown class="banner-type-dropdown" trigger="click" @command="handleCommand">
<span class="banner-select-trigger">
<span class="banner-select-text">{{ currentTitle }}</span>
<svg
class="banner-select-chevron"
viewBox="0 0 24 24"
width="40"
height="40"
aria-hidden="true"
focusable="false"
>
<svg class="banner-select-chevron" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true"
focusable="false">
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
</svg>
</span>
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
<el-dropdown-item command="全部科考船">全部科考船</el-dropdown-item>
<el-dropdown-item
v-for="item in titles"
:key="item.tsy_id"
:command="item.report_name"
>
<el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
{{ item.report_name }}
</el-dropdown-item>
</el-dropdown-menu>
@ -44,73 +30,40 @@
<div class="map-module">
<div class="bezel">
<div class="map-title">参航单位</div>
<div id="baiduCesiumContainer" ref="baiduCesiumContainer" style="height: 100%;width:100%;" />
<div id="workUnitMap_ship" ref="workUnitMap_ship" style="height: 100%;width:100%;" />
</div>
<div class="bezel">
<div class="map-title">航次地图</div>
<div class="map-year-panel">
<span class="map-year-label">年份</span>
<el-date-picker
v-model="voyageYear"
type="year"
size="small"
placeholder="全部"
class="map-year"
clearable
format="yyyy"
@change="selectVoyageYear"
/>
<el-date-picker v-model="voyageYear" type="year" size="small" placeholder="全部" class="map-year" clearable
format="yyyy" @change="selectVoyageYear" />
</div>
<div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;" />
<div id="voyageMap_ship" ref="voyageMap_ship" style="height: 100%;width:100%;" />
</div>
</div>
<!-- echarts板块-->
<div class="echarts-module">
<div class="bezel">
<BarChart
:title="barData1.title"
:chart-data="barData1.salesData"
:categories="barData1.productCategories"
chart-type="single"
/>
<BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
chart-type="single" />
</div>
<div class="bezel">
<BarChart
:title="barDataDays.title"
:chart-data="barDataDays.salesData"
:categories="barDataDays.productCategories"
chart-type="single"
/>
<BarChart :title="barDataDays.title" :chart-data="barDataDays.salesData"
:categories="barDataDays.productCategories" chart-type="single" />
</div>
<div class="bezel">
<BarChart
:title="barData2.title"
:chart-data="barData2.salesData"
:categories="barData2.productCategories"
chart-type="stacked"
stack-name="新增单位数"
/>
<BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
chart-type="stacked" stack-name="新增单位数" />
</div>
<div class="bezel">
<BarChart
:title="barData3.title"
:chart-data="barData3.salesData"
:categories="barData3.productCategories"
/>
<BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
</div>
<div class="bezel">
<BarChart
:title="barData4.title"
:chart-data="barData4.salesData"
:categories="barData4.productCategories"
/>
<BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
</div>
<div class="bezel">
<PieChart
:chart-data="pieData"
title="参航单位类型"
chart-type="ring"
/>
<PieChart :chart-data="pieData" title="参航单位类型" chart-type="ring" />
</div>
</div>
</div>
@ -119,10 +72,11 @@
<script>
import BarChart from './components/BarChart.vue'
import PieChart from './components/PieChart.vue'
import { setImageryViewModels } from '../../utils/common'
import { reportList, shipTotal, shipUnit, shipUnitYear, shipVoyage } from '../../api/statistics'
import { getYearRange, filterDictItems } from '../../utils/index'
const Cesium = window.Cesium
import { initMapbox } from '@/utils/mapbox-utils'
import { loadVectorLayer, loadJsonPointFeature } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator'
export default {
components: {
@ -160,13 +114,6 @@ export default {
unit: 'km'
}
],
// Cesium相关 - 参航单位地图
baiduCesiumViewer: null,
baiduCesiumEntities: [], // 存储参航单位标记实体
viewer: null,
// 地图图层基础地址
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
trackLineLayers: [],
voyageYear: '',
barData1: {},
/** 年度航次天数（与 barData1 同源接口按年） */
@ -180,27 +127,29 @@ export default {
created() {
this.getTypeList()
this.getShipList()
this.getShipUnit()
this.gitShipVoyage()
this.gitShipUnitYear()
this.getChartBar({ year: '2025' })
},
mounted() {
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
this.initCesium() // 初始化航次地图
this.initBaiduCesium() // 初始化参航单位地图
// 依赖 Cesium Viewer 的接口须在地图就绪后调用（created 阶段 viewer 尚未创建）
this.$nextTick(() => {
this.getShipUnit()
this.gitShipVoyage()
initMapbox('workUnitMap_ship', {
tileKey: 'gaode',
zoom: 3,
center: [110, 31],
minZoom: 2,
maxZoom: 29
})
initMapbox('voyageMap_ship', {
tileKey: 'GEBCO_basemap_NCEI',
zoom: 3,
center: [113, 15],
minZoom: 2,
maxZoom: 29
})
},
beforeDestroy() {
// 清理Cesium资源
if (this.baiduCesiumViewer) {
this.baiduCesiumViewer.destroy()
}
if (this.viewer) {
this.viewer.destroy()
}
},
methods: {
// 科考船数据
@ -212,7 +161,7 @@ export default {
// 选择科考船
handleCommand(command) {
this.currentTitle = command
this.removeSingleLineImg()
// this.removeSingleLineImg()
if (command === '全部科考船') {
this.getShipList()
this.gitShipVoyage()
@ -239,11 +188,26 @@ export default {
// 参航单位统计
getShipUnit() {
shipUnit().then(res => {
// 清除之前的标记
this.clearBaiduCesiumMarkers()
// 创建参航单位标记
this.createBaiduCesiumMarkers(res.array)
const geojson = {
type: 'FeatureCollection',
features: []
}
res.array.forEach(element => {
geojson.features.push({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [element.unit_lon, element.unit_lat]
},
properties: {
unit_name: element.unit_name,
unit_type: element.unit_type,
create_time: element.create_time,
tsy_id: element.tsy_id
}
})
})
loadJsonPointFeature('workUnit', 'blue', geojson, 'unit_name', 'workUnitMap_ship')
const typeCount = res.array.reduce((acc, unit) => {
const type = unit.unit_type
@ -256,167 +220,26 @@ export default {
}))
})
},
// 创建参航单位Cesium标记点
createBaiduCesiumMarkers(units) {
if (!this.baiduCesiumViewer) return
const entities = []
units.forEach((item, index) => {
// 创建标记实体
const entity = this.baiduCesiumViewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(item.unit_lon, item.unit_lat),
billboard: {
image: '../../../static/img/01.png', // 正常状态的图标
width: 32,
height: 32,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER
},
label: {
text: item.unit_name,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -40), // 标签在标记下方
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK
},
unitData: item, // 存储原始数据
index: index // 存储索引
})
entities.push(entity)
})
this.baiduCesiumEntities = entities
// 调整视角以显示所有标记
if (entities.length > 0) {
this.baiduCesiumViewer.zoomTo(entities)
}
},
// 清除参航单位标记
clearBaiduCesiumMarkers() {
if (this.baiduCesiumViewer && this.baiduCesiumEntities.length > 0) {
this.baiduCesiumEntities.forEach(entity => {
this.baiduCesiumViewer.entities.remove(entity)
})
this.baiduCesiumEntities = []
}
},
// 航次统计
gitShipVoyage(params = {}) {
shipVoyage(params).then(res => {
let i = 0
const colors = ColorGenerator.generateDivergingColors(res.array.length)
// 添加轨迹图层
res.array.forEach(item => {
this.addSingleLineImg(item)
// 加载轨迹图层
loadVectorLayer(item.voyage_name, ['line', 'symbol'], [colors[i], '#FFFFFF'], 'visible', 'voyageMap_ship', 'dsds')
i++
})
})
},
// 初始化Cesium - 参航单位地图
initBaiduCesium() {
this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.baiduCesiumContainer, {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
baseLayerPicker: false,
imageryProviderViewModels: this.imageryViewModels,
terrainProviderViewModels: [],
fullscreenButton: false,
selectionIndicator: false,
homeButton: false,
sceneModePicker: false,
animation: false,
infoBox: false,
geocoder: false,
navigationHelpButton: false
})
this.baiduCesiumViewer._cesiumWidget._creditContainer.style.display = 'none'
this.baiduCesiumViewer.scene.sun.show = false
this.baiduCesiumViewer.scene.moon.show = false
this.baiduCesiumViewer.scene.fog.enabled = false
this.baiduCesiumViewer.scene.skyAtmosphere.show = false
this.baiduCesiumViewer.scene.sun.show = false
this.baiduCesiumViewer.scene.skyBox.show = false
this.baiduCesiumViewer.scene.globe.enableLighting = false
this.baiduCesiumViewer.shadowMap.darkness = 0.8
this.baiduCesiumViewer.scene._sunBloom = false
this.baiduCesiumViewer.scene.globe.showGroundAtmosphere = false
this.baiduCesiumViewer.scene.postProcessStages.fxaa.enabled = true
this.baiduCesiumViewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(114.4040, 30.5196, 4000000)
})
},
// 初始化cesium
initCesium() {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
this.viewer = new Cesium.Viewer('cesiumContainer', {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
baseLayerPicker: false,
// 设置自定义底图
imageryProviderViewModels: this.imageryViewModels,
// 关闭默认的地形底图
terrainProviderViewModels: [],
fullscreenButton: false,
selectionIndicator: false,
homeButton: false,
sceneModePicker: false,
animation: false,
infoBox: false,
geocoder: false,
navigationHelpButton: false
})
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
this.viewer.scene.sun.show = false
this.viewer.scene.moon.show = false
this.viewer.scene.fog.enabled = false
this.viewer.scene.skyAtmosphere.show = false
this.viewer.scene.sun.show = false
this.viewer.scene.skyBox.show = false
this.viewer.scene.globe.enableLighting = false
this.viewer.shadowMap.darkness = 0.8
this.viewer.scene._sunBloom = false
this.viewer.scene.globe.showGroundAtmosphere = false
this.viewer.scene.postProcessStages.fxaa.enabled = true
this.viewer.camera.setView({
// 指定相机初始位置
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
});
},
// 添加轨迹图层
addSingleLineImg(item) {
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
{
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.voyage_name}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
layer: `dsds:${item.voyage_name}`,
style: 'default',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme()
}
)
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
this.trackLineLayers.push(trackLineLayer)
},
// 移除轨迹图层
removeSingleLineImg() {
if (this.trackLineLayers.length) {
this.trackLineLayers.forEach(line => {
this.viewer.imageryLayers.remove(line)
})
}
},
// 选择航次地图年份
selectVoyageYear(val) {
const shipName = this.currentTitle === '全部科考船' ? '' : this.currentTitle
if (val) {
this.removeSingleLineImg()
// this.removeSingleLineImg()
const params = getYearRange(val)
this.gitShipVoyage({ ...params, ship_name: shipName })
} else {
@ -570,24 +393,29 @@ export default {
flex-direction: column;
justify-content: center;
align-items: center;
.value {
font-size: 56px;
font-weight: bold;
.unit {
font-size: 26px;
}
}
.label {
font-size: 18px;
}
}
}
}
.map-module {
padding: 50px 50px;
display: flex;
justify-content: space-between;
gap: 50px;
.bezel {
flex: 1;
width: 100%;
@ -680,6 +508,7 @@ export default {
}
}
}
.echarts-module {
padding: 0 50px 50px;
display: grid;

89
src/views/statistics/UuvUnitStatistics.vue
View File

@ -13,24 +13,10 @@
<div class="unit-toolbar-inner">
<div class="unit-filter-box">
<span class="banner-unit-label">统计单位</span>
<el-select
v-model="selectedUnits"
class="banner-unit-select"
multiple
filterable
clearable
size="small"
placeholder="请选择单位（不选表示全部）"
value-key="unit_name"
collapse-tags
@change="onBannerUnitsChange"
>
<el-option
v-for="unit in unitOptions"
:key="unit.unit_id || unit.unit_name"
:label="unit.unit_name"
:value="unit"
/>
<el-select v-model="selectedUnits" class="banner-unit-select" multiple filterable clearable size="small"
placeholder="请选择单位（不选表示全部）" value-key="unit_name" collapse-tags @change="onBannerUnitsChange">
<el-option v-for="unit in unitOptions" :key="unit.unit_id || unit.unit_name" :label="unit.unit_name"
:value="unit" />
</el-select>
</div>
</div>
@ -45,16 +31,8 @@
<div class="map-title">航次地图</div>
<div class="map-year-panel">
<span class="map-year-label">年份</span>
<el-date-picker
v-model="voyageYear"
type="year"
size="small"
placeholder="全部"
class="map-year"
clearable
format="yyyy"
@change="selectVoyageYear"
/>
<el-date-picker v-model="voyageYear" type="year" size="small" placeholder="全部" class="map-year" clearable
format="yyyy" @change="selectVoyageYear" />
</div>
<div id="voyageMap_uuv" ref="voyageMap_uuv" style="height: 100%;width:100%;" />
</div>
@ -62,47 +40,24 @@
<!-- echarts板块-->
<div class="echarts-module">
<div class="bezel">
<BarChart
:title="barVoyageCount.title"
:chart-data="barVoyageCount.salesData"
:categories="barVoyageCount.productCategories"
chart-type="single"
/>
<BarChart :title="barVoyageCount.title" :chart-data="barVoyageCount.salesData"
:categories="barVoyageCount.productCategories" chart-type="single" />
</div>
<div class="bezel">
<BarChart
:title="barVoyageDays.title"
:chart-data="barVoyageDays.salesData"
:categories="barVoyageDays.productCategories"
chart-type="single"
/>
<BarChart :title="barVoyageDays.title" :chart-data="barVoyageDays.salesData"
:categories="barVoyageDays.productCategories" chart-type="single" />
</div>
<div class="bezel">
<BarChart
:title="barPeopleDiving.title"
:chart-data="barPeopleDiving.salesData"
:categories="barPeopleDiving.productCategories"
chart-type="multiple"
/>
<BarChart :title="barPeopleDiving.title" :chart-data="barPeopleDiving.salesData"
:categories="barPeopleDiving.productCategories" chart-type="multiple" />
</div>
<div class="bezel">
<BarChart
:title="barFirstPeopleDiving.title"
:chart-data="barFirstPeopleDiving.salesData"
:categories="barFirstPeopleDiving.productCategories"
chart-type="multiple"
/>
<BarChart :title="barFirstPeopleDiving.title" :chart-data="barFirstPeopleDiving.salesData"
:categories="barFirstPeopleDiving.productCategories" chart-type="multiple" />
</div>
<div class="bezel">
<BarChart
:title="mixedMileage.title"
:chart-data="mixedMileage.series"
:categories="mixedMileage.categories"
chart-type="mixed"
:dual-y-axis="true"
left-axis-name="次数"
right-axis-name="天数"
/>
<BarChart :title="mixedMileage.title" :chart-data="mixedMileage.series" :categories="mixedMileage.categories"
chart-type="mixed" :dual-y-axis="true" left-axis-name="次数" right-axis-name="天数" />
</div>
</div>
</div>
@ -206,7 +161,7 @@ export default {
})
initMapbox('voyageMap_uuv', {
tileKey: 'GEBCO_basemap_NCEI',
zoom: 4,
zoom: 3,
center: [113, 15],
minZoom: 2,
maxZoom: 29
@ -365,7 +320,7 @@ export default {
getHovUnit() {
hovUnit().then(res => {
const map = new Map()
;(res.array || []).forEach(unit => {
; (res.array || []).forEach(unit => {
const k = unit.unit_id || unit.unitId || unit.unit_name
if (!map.has(k)) map.set(k, unit)
})
@ -383,7 +338,7 @@ export default {
type: 'FeatureCollection',
features: []
}
;(res.array || []).forEach(element => {
; (res.array || []).forEach(element => {
geojson.features.push({
type: 'Feature',
geometry: {
@ -411,7 +366,7 @@ export default {
shipVoyage(params).then(res => {
let i = 0
const colors = ColorGenerator.generateDivergingColors((res.array || []).length)
;(res.array || []).forEach(item => {
; (res.array || []).forEach(item => {
loadVectorLayer(item.voyage_name, ['line', 'symbol'], [colors[i], '#FFFFFF'], 'visible', 'voyageMap_uuv', 'dsds')
i++
})
@ -533,13 +488,16 @@ export default {
flex-direction: column;
justify-content: center;
align-items: center;
.value {
font-size: 56px;
font-weight: bold;
.unit {
font-size: 26px;
}
}
.label {
font-size: 18px;
}
@ -606,6 +564,7 @@ export default {
display: flex;
justify-content: space-between;
gap: 50px;
.bezel {
flex: 1;
width: 100%;

448
src/views/sublibrary/physicalDataSearchCTD.vue
View File

@ -1,448 +0,0 @@
<template>
<div class="shuju">
<div class="header">
<div class="header_con">
<div class="header1">
<div class="time">
<!-- <p>{{ date }}&nbsp;&nbsp;{{ week }}</p> -->
</div>
<div class="login">
<p>个人中心</p>
<div class="log1">
<img src="../../../static/images/index/logo1.png" alt="">
<p>中国科技云通行证登录</p>
<p>注册</p>
</div>
<p>English</p>
</div>
</div>
<div class="header2">
<div class="logo">
<img src="../../../static/images/index/logo2.png" alt="" @click="turnPage('home')">
</div>
<div class="nav">
<ul>
<li>
<router-link to="/container/physicalIndex">首页</router-link>
</li>
<li>
<router-link to="" @click.native="turnPage('physicalDataDelivery')">数据汇交</router-link>
</li>
<li>
<router-link to="" @click.native="jumpTo('http://120.48.105.88:8081/source')">数据检索</router-link>
</li>
<li>
<router-link to="">数据应用</router-link>
</li>
<li>
<router-link to="/container/news">新闻动态</router-link>
</li>
<li>
<router-link to="">联系我们</router-link>
</li>
</ul>
</div>
</div>
</div>
<img class="di" src="../../../static/images/index/banner.jpg" alt="">
</div>
<div class="shuju_con">
<div v-show="showa == false" class="left">
<div class="left1">
<div class="xiala">
<el-select v-model="value" placeholder="平台类型">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<el-input v-model="type_b" placeholder="" />
<el-button
class="sousuo"
type="primary"
icon="el-icon-search"
/>
<el-button
class="caidan"
type="default"
icon="el-icon-s-operation"
@click="openList(0,'列表')"
/>
</div>
<div class="left2">
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type" @close="handleClose(tag)" @click="tosearch(tag.name)">
{{ tag.name }}
</el-tag>
</div>
<div class="left3">
<p>搜索结果</p>
<div class="left3_1">
<el-radio-group v-model="radio">
<el-radio :label="3">数据样品</el-radio>
<el-radio :label="6">航次</el-radio>
</el-radio-group>
</div>
<div class="left3_2">
<span>排序:</span>
<el-select v-model="value1" placeholder="航次名称">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="left4">
<div v-for="(item,index) in detail" :key="index" class="left4_1" @click="turnDeatilPage(item)">
<div class="left4_top">
<p>{{ item.title }}</p>
<span>{{ item.year }}</span>
</div>
<div class="left4_list">
<div class="list1">
<p>航次：</p>
<span>{{ item.hangci }}</span>
</div>
<div class="list1">
<p>平台：</p>
<span>{{ item.pingtai }}</span>
</div>
<div class="list1">
<p>设备：</p>
<span>{{ item.shebei }}</span>
</div>
<div class="list1">
<p>数据样品：</p>
<span>{{ item.shuju }}</span>
</div>
<div class="list1">
<p>航次首席：</p>
<span>{{ item.shouxi }}</span>
</div>
</div>
</div>
</div>
<div class="arrow">
<img src="../../../static/images/arrow_nav.png" alt="" @click="shousuo">
</div>
</div>
<div v-show="showa" class="arrow_r" @click="toshow">
<img src="../../../static/images/arrow_nav1.png" alt="">
</div>
<div class="right">
<GMRT :is-img="img" :is-line="line" />
</div>
</div>
<el-dialog
:title="dialogTitle"
:visible.sync="showListDialog"
:close-on-click-modal="false"
:height="300"
:append-to-body="true"
width="800px"
>
<list-dialog v-if="showListDialog" :choose-data="chooseData" @handleClose="closeListForm" @handleConfirm="confirmListForm" />
</el-dialog>
</div>
</template>
<script>
import ListDialog from '../listDialog.vue'
import GMRT from '../GMRT.vue'
export default {
name: 'Shuju',
components: {
ListDialog,
GMRT
},
data() {
return {
img: true,
date: '',
week: '',
line: true,
showListDialog: false,
chooseData: '',
dialogTitle: '',
type_b: '',
showa: false,
center: { lng: 118.962643, lat: 35.618913 },
zoom: 3,
list: [
{
dingwei: {
lng: 119.054629,
lat: 36.373917
},
content: 'DY31-II-W1306-BC',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 119.919302,
lat: 34.226755
},
content: 'DY31-II-W1306-BC',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 119.560555,
lat: 34.421374
},
content: 'DY31-II-W1306-BC',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 116.442213,
lat: 35.556921
},
content: 'DY31-II-W1306-BC',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
}
],
radio: 3,
options: [
{
value: '选项1',
label: '类型1'
},
{
value: '选项2',
label: '类型2'
},
{
value: '选项3',
label: '类型3'
},
{
value: '选项4',
label: '类型4'
},
{
value: '选项5',
label: '类型5'
}
],
value: '',
options1: [
{
value: '选项1',
label: '航次1'
},
{
value: '选项2',
label: '航次2'
},
{
value: '选项3',
label: '航次3'
},
{
value: '选项4',
label: '航次4'
},
{
value: '选项5',
label: '航次5'
}
],
value1: '',
tags: [
{ name: '探索一号', type: 'info' },
{ name: '船载CTD', type: 'info' }
],
detail: [
{
title: '岩石SY510-TXS-YS-01',
year: '2012',
hangci: 'TS-14',
pingtai: '着陆器',
shebei: '机械手',
shuju: '岩石',
shouxi: 'MERY'
},
{
title: '岩石SY510-TXS-YS-01',
year: '2012',
hangci: 'TS-14',
pingtai: '着陆器',
shebei: '机械手',
shuju: '岩石',
shouxi: 'MERY'
},
{
title: '岩石SY510-TXS-YS-01',
year: '2012',
hangci: 'TS-14',
pingtai: '着陆器',
shebei: '机械手',
shuju: '岩石',
shouxi: 'MERY'
}
]
}
},
mounted() {
this.getTime2()
},
methods: {
turnDeatilPage() {
this.$router.push({ name: 'dataDetail' })
},
turnPage(val, a) {
if (!a) {
this.$router.push({ name: val })
} else {
window.open(val, '_blank')
}
},
handleClose(tag) {
this.tags.splice(this.tags.indexOf(tag), 1)
},
tosearch(e) {
this.input = e
},
/** 跳转到子网地址 */
jumpTo(url) {
window.open(url, '_blank')
},
getTime2() {
setInterval(this.getTime, 1000)
},
getTime() {
var today = new Date()
var y = today.getFullYear() + '.'
var month = today.getMonth() + 1 + '.'
var t = today.getDate() + ''
var h = ''
var m = ''
var s = ''
if (today.getHours() < 10) {
h = '0' + today.getHours() + ':'
} else {
h = today.getHours() + ':'
}
if (today.getMinutes() < 10) {
m = '0' + today.getMinutes() + ':'
} else {
m = today.getMinutes() + ':'
}
if (today.getSeconds() < 10) {
s = '0' + today.getSeconds()
} else {
s = today.getSeconds()
}
var day = today.getDay()
var weeks = new Array(
'星期日',
'星期一',
'星期二',
'星期三',
'星期四',
'星期五',
'星期六'
)
var week = weeks[day]
// this.date_time = "<span>"+y+month+t+"</span><b>"+h+m+s+"</b>"
this.time = h + m + s
this.date = y + month + t
this.week = week
},
openList(value, title) {
this.dialogTitle = title
this.showListDialog = true
},
// 关闭列表
closeListForm() {
this.showListDialog = false
// this.init()
},
// 保存列表
confirmListForm(val) {
this.showListDialog = false
if (val) {
this.type_b = val
}
// this.init()
},
handler({ BMap, map }) {
console.log(BMap, map)
this.center.lng = 116.404
this.center.lat = 39.915
this.zoom = 6
},
totap(e) {
console.log(e)
e.pic.url = 'http://shipin.hey17.com/dingwei_a.png'
e.pic.size.width = 22
e.pic.size.height = 28
for (var i = 0; i < this.list.length; i++) {
if (this.list[i] != e) {
this.list[i].pic.url = 'http://shipin.hey17.com/dingwei1.png'
this.list[i].pic.size.width = 16
this.list[i].pic.size.height = 21
}
}
},
shousuo() {
this.showa = true
},
toshow() {
this.showa = false
}
}
}
</script>
<style scoped lang="scss">
</style>
<style >
.left3_1 .el-radio {
margin-right: 15px;
}
.left3_1 .el-radio__label {
font-size: 15px;
}
.el-input__inner::-webkit-input-placeholder {
color: #333;
}
.left3_2 .el-input__inner {
padding-left: 0;
border: none;
font-size: 15px;
}
.BMapLabel{
border: none !important;
color: #fff;
background: none !important;
}
</style>

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_0.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_1.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_10.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_11.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_12.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_13.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_14.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_15.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_16.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_17.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_18.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_19.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_2.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_20.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_21.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_22.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_23.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_24.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_25.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_26.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_27.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_3.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_4.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_5.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_6.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_7.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_8.json
View File

File diff suppressed because one or more lines are too long

1
static/js/Cesium/Assets/IAU2006_XYS/IAU2006_XYS_9.json
View File

File diff suppressed because one or more lines are too long

BIN
static/js/Cesium/Assets/Images/bing_maps_credit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
static/js/Cesium/Assets/Images/cesium_credit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
static/js/Cesium/Assets/Images/google_earth_credit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.5 KiB

BIN
static/js/Cesium/Assets/Images/ion-credit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 KiB

BIN
static/js/Cesium/Assets/Textures/LensFlare/DirtMask.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 111 KiB

BIN
static/js/Cesium/Assets/Textures/LensFlare/StarBurst.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 191 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/0/0/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/0/1/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/1/0/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.1 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/1/0/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/1/1/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/1/1/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/1/2/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/1/2/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/1/3/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/1/3/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/0/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.0 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/0/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.1 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/0/2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.7 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/0/3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/1/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.7 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/1/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/1/2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/1/3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/2/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/2/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/2/2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/2/3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/3/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.3 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/3/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/3/2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/3/3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/4/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.3 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/4/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/4/2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/4/3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/5/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.4 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/5/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/5/2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/5/3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/6/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.5 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/6/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/6/2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/6/3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/7/0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.8 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/7/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/7/2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
static/js/Cesium/Assets/Textures/NaturalEarthII/2/7/3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

14
static/js/Cesium/Assets/Textures/NaturalEarthII/tilemapresource.xml
View File

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<TileMap version="1.0.0" tilemapservice="http://tms.osgeo.org/1.0.0">
<Title>NE2_HR_LC_SR_W_DR_recolored.tif</Title>
<Abstract></Abstract>
<SRS>EPSG:4326</SRS>
<BoundingBox miny="-90.00000000000000" minx="-180.00000000000000" maxy="90.00000000000000" maxx="180.00000000000000"/>
<Origin y="-90.00000000000000" x="-180.00000000000000"/>
<TileFormat width="256" height="256" mime-type="image/jpg" extension="jpg"/>
<TileSets profile="geodetic">
<TileSet href="0" units-per-pixel="0.70312500000000" order="0"/>
<TileSet href="1" units-per-pixel="0.35156250000000" order="1"/>
<TileSet href="2" units-per-pixel="0.17578125000000" order="2"/>
</TileSets>
</TileMap>

BIN
static/js/Cesium/Assets/Textures/SkyBox/tycho2t3_80_mx.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 131 KiB

BIN
static/js/Cesium/Assets/Textures/SkyBox/tycho2t3_80_my.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 164 KiB

BIN
static/js/Cesium/Assets/Textures/SkyBox/tycho2t3_80_mz.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 179 KiB

BIN
static/js/Cesium/Assets/Textures/SkyBox/tycho2t3_80_px.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 135 KiB

BIN
static/js/Cesium/Assets/Textures/SkyBox/tycho2t3_80_py.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 165 KiB

BIN
static/js/Cesium/Assets/Textures/SkyBox/tycho2t3_80_pz.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 165 KiB

Some files were not shown because too many files have changed in this diff Show More