更新banner背景图
This commit is contained in:
80937518651731347
commit
bbb844b266
|
|
@ -10,8 +10,6 @@
|
||||||
<link rel="apple-touch-icon" href="./static/images/logo_map.png" />
|
<link rel="apple-touch-icon" href="./static/images/logo_map.png" />
|
||||||
|
|
||||||
<link rel="stylesheet" href="./static/css/reset.css">
|
<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 -->
|
<!-- 引入 Mapbox GL JS -->
|
||||||
<link href="./static/css/mapbox-gl-v3.16.0.css" rel="stylesheet">
|
<link href="./static/css/mapbox-gl-v3.16.0.css" rel="stylesheet">
|
||||||
|
|
|
||||||
|
|
@ -1462,41 +1462,6 @@
|
||||||
"to-fast-properties": "^2.0.0"
|
"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": {
|
"@eslint/eslintrc": {
|
||||||
"version": "0.4.3",
|
"version": "0.4.3",
|
||||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
|
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
|
||||||
|
|
@ -4565,15 +4530,6 @@
|
||||||
"lazy-cache": "^1.0.3"
|
"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": {
|
"chai-nightwatch": {
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/chai-nightwatch/-/chai-nightwatch-0.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/chai-nightwatch/-/chai-nightwatch-0.1.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,6 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.19.2",
|
"axios": "^0.19.2",
|
||||||
"baidu-map": "^0.1.4",
|
|
||||||
"cesium": "^1.117.0",
|
|
||||||
"echarts": "^4.9.0",
|
"echarts": "^4.9.0",
|
||||||
"echarts-gl": "^1.1.0",
|
"echarts-gl": "^1.1.0",
|
||||||
"element-ui": "^2.13.0",
|
"element-ui": "^2.13.0",
|
||||||
|
|
@ -32,9 +30,7 @@
|
||||||
"swiper": "^6.8.4",
|
"swiper": "^6.8.4",
|
||||||
"vue": "^2.5.2",
|
"vue": "^2.5.2",
|
||||||
"vue-awesome-swiper": "^3.1.3",
|
"vue-awesome-swiper": "^3.1.3",
|
||||||
"vue-baidu-map": "^0.21.22",
|
|
||||||
"vue-router": "^3.0.1",
|
"vue-router": "^3.0.1",
|
||||||
"vue2-google-maps": "^0.10.7",
|
|
||||||
"vuex": "^3.1.1",
|
"vuex": "^3.1.1",
|
||||||
"xml2js": "^0.6.2"
|
"xml2js": "^0.6.2"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -208,16 +208,6 @@ export const constantRoutes = [
|
||||||
loginAuthority: true
|
loginAuthority: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// path: 'GMRT',
|
|
||||||
// name: 'GMRT',
|
|
||||||
// component: () => import('@/views/GMRT.vue'),
|
|
||||||
// meta: {
|
|
||||||
// title: '地图',
|
|
||||||
// icon: 'peoples',
|
|
||||||
// loginAuthority: true
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
path: 'dataSearch',
|
path: 'dataSearch',
|
||||||
name: 'dataSearch',
|
name: 'dataSearch',
|
||||||
|
|
@ -298,16 +288,16 @@ export const constantRoutes = [
|
||||||
loginAuthority: true
|
loginAuthority: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
path: 'physicalDataSearchCTD',
|
// path: 'physicalDataSearchCTD',
|
||||||
name: 'physicalDataSearchCTD',
|
// name: 'physicalDataSearchCTD',
|
||||||
component: () => import('@/views/sublibrary/physicalDataSearchCTD.vue'),
|
// component: () => import('@/views/sublibrary/physicalDataSearchCTD.vue'),
|
||||||
meta: {
|
// meta: {
|
||||||
title: '温盐深(CTD) 数据应用',
|
// title: '温盐深(CTD) 数据应用',
|
||||||
icon: 'peoples',
|
// icon: 'peoples',
|
||||||
loginAuthority: true
|
// loginAuthority: true
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
path: 'phoneVideoIndex',
|
path: 'phoneVideoIndex',
|
||||||
name: 'phoneVideoIndex',
|
name: 'phoneVideoIndex',
|
||||||
|
|
@ -328,16 +318,6 @@ export const constantRoutes = [
|
||||||
loginAuthority: true
|
loginAuthority: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// path: 'analyse',
|
|
||||||
// name: 'analyse',
|
|
||||||
// component: () => import('@/views/analyse.vue'),
|
|
||||||
// meta: {
|
|
||||||
// title: '统计分析',
|
|
||||||
// icon: 'peoples',
|
|
||||||
// loginAuthority: true
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
path: 'statistics',
|
path: 'statistics',
|
||||||
name: 'statistics',
|
name: 'statistics',
|
||||||
|
|
|
||||||
|
|
@ -1,83 +1 @@
|
||||||
import { getParamsList } from '../api/home'
|
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;
|
|
||||||
}
|
|
||||||
|
|
@ -61,7 +61,7 @@ export function initMapbox(mapId, options = {}) {
|
||||||
attributionControl: false,
|
attributionControl: false,
|
||||||
boxZoom: true,//如果为true，则启用了“缩放框”交互，按住shift并在地图上拖框放大
|
boxZoom: true,//如果为true，则启用了“缩放框”交互，按住shift并在地图上拖框放大
|
||||||
preserveDrawingBuffer: false,//如果为true，地图的canvas可以使用导出到png，通过map.getCanvas().toDataURL()。默认为false，会提高地图性能。
|
preserveDrawingBuffer: false,//如果为true，地图的canvas可以使用导出到png，通过map.getCanvas().toDataURL()。默认为false，会提高地图性能。
|
||||||
projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
|
// projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
|
||||||
});
|
});
|
||||||
Vue.config.maps[mapId] = map;
|
Vue.config.maps[mapId] = map;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -239,7 +239,6 @@ import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFe
|
||||||
import { ColorGenerator } from '@/utils/color-generator';
|
import { ColorGenerator } from '@/utils/color-generator';
|
||||||
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
|
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
|
||||||
|
|
||||||
const Cesium = window.Cesium
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Shuju',
|
name: 'Shuju',
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -247,7 +246,6 @@ export default {
|
||||||
show: false,
|
show: false,
|
||||||
viewer: null,
|
viewer: null,
|
||||||
filter: null,
|
filter: null,
|
||||||
color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE],
|
|
||||||
searchType: [
|
searchType: [
|
||||||
{
|
{
|
||||||
label: '航次名称',
|
label: '航次名称',
|
||||||
|
|
@ -307,8 +305,6 @@ export default {
|
||||||
chooseLine: null,
|
chooseLine: null,
|
||||||
currentVoyage: null, // 当前选中的航次
|
currentVoyage: null, // 当前选中的航次
|
||||||
currentSample: null, // 当前选中的数据样品集合
|
currentSample: null, // 当前选中的数据样品集合
|
||||||
// 地图图层基础地址
|
|
||||||
CesiumHostAddr: '',
|
|
||||||
// 保存自定义底图
|
// 保存自定义底图
|
||||||
imageryViewModels: [],
|
imageryViewModels: [],
|
||||||
// 保存轨迹图层
|
// 保存轨迹图层
|
||||||
|
|
@ -362,16 +358,13 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
initMapbox("dataSearchMap", {
|
initMapbox("dataSearchMap", {
|
||||||
tileKey: "world_horizon_1",
|
tileKey: "world_horizon_1",
|
||||||
zoom: 4,
|
zoom: 3,
|
||||||
center: [122, 15],
|
center: [122, 15],
|
||||||
minZoom: 2,
|
minZoom: 2,
|
||||||
maxZoom: 29,
|
maxZoom: 29,
|
||||||
coastlineOn:false,
|
coastlineOn:false,
|
||||||
contourOn:false
|
contourOn:false
|
||||||
});
|
});
|
||||||
|
|
||||||
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
|
||||||
// this.initCesium()
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取菜单
|
// 获取菜单
|
||||||
|
|
@ -488,20 +481,6 @@ export default {
|
||||||
addHighlightLayer(voyageName, i) {
|
addHighlightLayer(voyageName, i) {
|
||||||
Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", 4);
|
Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", 4);
|
||||||
this.dataList[i].highlight = true;
|
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) {
|
clearHighlight(voyageName, i) {
|
||||||
|
|
@ -515,14 +494,6 @@ export default {
|
||||||
];
|
];
|
||||||
Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", lineWidthExpression);
|
Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", lineWidthExpression);
|
||||||
this.dataList[i].highlight = false;
|
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) {
|
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}-symbol`, "visibility", "visible");
|
||||||
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "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";
|
// visibility = visibility == "visible" ? "none" : "visible";
|
||||||
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "none");
|
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "none");
|
||||||
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "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() {
|
clearAll() {
|
||||||
|
|
@ -658,10 +544,6 @@ export default {
|
||||||
loadVectorLayer(`sample_station_${item.dataset_name}`, ["symbol"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearchMap", "dsds", "sample_name");
|
loadVectorLayer(`sample_station_${item.dataset_name}`, ["symbol"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearchMap", "dsds", "sample_name");
|
||||||
}
|
}
|
||||||
i++;
|
i++;
|
||||||
|
|
||||||
// this.addSingleLineImg(item.voyage_name, null)
|
|
||||||
// this.dataList[i].show = true;
|
|
||||||
// this.divingImage(item)
|
|
||||||
})
|
})
|
||||||
const voyageList = arr
|
const voyageList = arr
|
||||||
voyageList.map(item => {
|
voyageList.map(item => {
|
||||||
|
|
@ -671,11 +553,6 @@ export default {
|
||||||
dataset_id: item.tsy_id
|
dataset_id: item.tsy_id
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
item.sampleArray = res.array
|
item.sampleArray = res.array
|
||||||
// if (res.array.length) {
|
|
||||||
// res.array.forEach(sample => {
|
|
||||||
// this.sampleLineImage(sample)
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
if (item.job_type === '站位作业') {
|
if (item.job_type === '站位作业') {
|
||||||
|
|
@ -684,104 +561,12 @@ export default {
|
||||||
dataset_id: item.tsy_id
|
dataset_id: item.tsy_id
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
item.sampleArray = res.array
|
item.sampleArray = res.array
|
||||||
// 格式化坐标点
|
|
||||||
// if (res.array.length) {
|
|
||||||
// res.array.forEach(sample => {
|
|
||||||
// this.sampleLineImage(sample)
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.dataList = voyageList
|
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) {
|
turnDeatilPage(item) {
|
||||||
this.dialog5 = true
|
this.dialog5 = true
|
||||||
regInfo({ voyage_name: item.voyage_name }).then(res => {
|
regInfo({ voyage_name: item.voyage_name }).then(res => {
|
||||||
|
|
|
||||||
1305
src/views/hh.html
1305
src/views/hh.html
File diff suppressed because it is too large
Load Diff
|
|
@ -234,15 +234,10 @@ import { getVoyage, statisticsNums } from '../api/home'
|
||||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||||
import 'swiper/swiper-bundle.css'
|
import 'swiper/swiper-bundle.css'
|
||||||
import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer'
|
import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer'
|
||||||
import {
|
|
||||||
modifyCesiumMouseWheel, setImageryViewModels
|
|
||||||
} from '@/utils/common'
|
|
||||||
import { loadVectorLayer } from '@/utils/vector-layer-utils'
|
import { loadVectorLayer } from '@/utils/vector-layer-utils'
|
||||||
import { ColorGenerator } from '@/utils/color-generator';
|
import { ColorGenerator } from '@/utils/color-generator';
|
||||||
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
|
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
|
||||||
|
|
||||||
const Cesium = window.Cesium
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Index',
|
name: 'Index',
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -296,11 +291,6 @@ export default {
|
||||||
highlightLayer: null, // 存储当前高亮图层实例
|
highlightLayer: null, // 存储当前高亮图层实例
|
||||||
dataUpdateList: [],
|
dataUpdateList: [],
|
||||||
sampleDataUpdateList: [],
|
sampleDataUpdateList: [],
|
||||||
viewer: null,
|
|
||||||
// 地图图层基础地址
|
|
||||||
CesiumHostAddr: '',
|
|
||||||
// 保存自定义底图
|
|
||||||
imageryViewModels: [],
|
|
||||||
multipleSelection: [], // 当前选中的航次数组
|
multipleSelection: [], // 当前选中的航次数组
|
||||||
trackLayerMap: {}, // 存储每个航次对应的轨迹图层实例 { voyage_name: layerInstance }
|
trackLayerMap: {}, // 存储每个航次对应的轨迹图层实例 { voyage_name: layerInstance }
|
||||||
depthOptions: [4500, 6000], // 可扩展更多深度值
|
depthOptions: [4500, 6000], // 可扩展更多深度值
|
||||||
|
|
@ -315,7 +305,6 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
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.getVoyageList()
|
||||||
this.getStatisticsNums()
|
this.getStatisticsNums()
|
||||||
this.dataUpdate()
|
this.dataUpdate()
|
||||||
|
|
@ -324,9 +313,9 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
initMapbox("homeMap", {
|
initMapbox("homeMap", {
|
||||||
tileKey: "World_Imagery",
|
tileKey: "World_Imagery",
|
||||||
zoom: 4,
|
zoom: 1.5,
|
||||||
center: [122, 15],
|
center: [122, 15],
|
||||||
minZoom: 2,
|
minZoom: 1,
|
||||||
maxZoom: 29,
|
maxZoom: 29,
|
||||||
coastlineOn: false,
|
coastlineOn: false,
|
||||||
contourOn: false
|
contourOn: false
|
||||||
|
|
@ -342,8 +331,6 @@ export default {
|
||||||
loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp');
|
loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp');
|
||||||
loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp');
|
loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp');
|
||||||
});
|
});
|
||||||
|
|
||||||
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
|
||||||
},
|
},
|
||||||
methods: {
|
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) {
|
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}-symbol`, "visibility", visibility);
|
||||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-line`, "visibility", visibility);
|
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-line`, "visibility", visibility);
|
||||||
this.$refs.multipleTable.toggleRowSelection(row);
|
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) {
|
handleSelectionChange(val) {
|
||||||
// 获取新旧选中的航次名称数组
|
// 获取新旧选中的航次名称数组
|
||||||
|
|
@ -516,7 +379,6 @@ export default {
|
||||||
|
|
||||||
// 移除不再需要的轨迹图层
|
// 移除不再需要的轨迹图层
|
||||||
voyagesToRemove.forEach(voyage => {
|
voyagesToRemove.forEach(voyage => {
|
||||||
// this.removeSingleLineImg(voyage);
|
|
||||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "none");
|
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "none");
|
||||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "none");
|
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "none");
|
||||||
});
|
});
|
||||||
|
|
@ -526,7 +388,6 @@ export default {
|
||||||
// 从val中找出对应航次的完整数据项
|
// 从val中找出对应航次的完整数据项
|
||||||
const correspondingItem = val.find(item => item.voyage_name === voyage);
|
const correspondingItem = val.find(item => item.voyage_name === voyage);
|
||||||
if (correspondingItem) {
|
if (correspondingItem) {
|
||||||
// this.addSingleLineImg(correspondingItem);
|
|
||||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "visible");
|
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "visible");
|
||||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "visible");
|
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "visible");
|
||||||
}
|
}
|
||||||
|
|
@ -535,42 +396,7 @@ export default {
|
||||||
// 更新当前选中项
|
// 更新当前选中项
|
||||||
this.multipleSelection = val;
|
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) {
|
toggleDepth(depth) {
|
||||||
// **方案1: 如果要求同时只能有一个按钮被选中**
|
// **方案1: 如果要求同时只能有一个按钮被选中**
|
||||||
// this.selectedDepths = [depth]; // 数组只保留当前点击的深度
|
// this.selectedDepths = [depth]; // 数组只保留当前点击的深度
|
||||||
|
|
@ -579,50 +405,13 @@ export default {
|
||||||
const index = this.selectedDepths.indexOf(depth);
|
const index = this.selectedDepths.indexOf(depth);
|
||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
this.selectedDepths.splice(index, 1); // 如果已选中，则移除
|
this.selectedDepths.splice(index, 1); // 如果已选中，则移除
|
||||||
// this.removeSingleContourLine(depth); // 移除指定深度的单条等深线
|
|
||||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "none");
|
Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "none");
|
||||||
} else {
|
} else {
|
||||||
this.selectedDepths.push(depth); // 如果未选中，则添加
|
this.selectedDepths.push(depth); // 如果未选中，则添加
|
||||||
// this.addSingleContourLine(depth); // 添加指定深度的单条等深线
|
|
||||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "visible");
|
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() {
|
getStatisticsNums() {
|
||||||
statisticsNums().then(res => {
|
statisticsNums().then(res => {
|
||||||
|
|
@ -1428,10 +1217,6 @@ export default {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cesium-viewer-bottom {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#map {
|
#map {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,31 +2,17 @@
|
||||||
<div class="statistics">
|
<div class="statistics">
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<div class="banner-title-picker">
|
<div class="banner-title-picker">
|
||||||
<el-dropdown
|
<el-dropdown class="banner-type-dropdown" trigger="click" @command="handleCommand">
|
||||||
class="banner-type-dropdown"
|
|
||||||
trigger="click"
|
|
||||||
@command="handleCommand"
|
|
||||||
>
|
|
||||||
<span class="banner-select-trigger">
|
<span class="banner-select-trigger">
|
||||||
<span class="banner-select-text">{{ currentTitle }}</span>
|
<span class="banner-select-text">{{ currentTitle }}</span>
|
||||||
<svg
|
<svg class="banner-select-chevron" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true"
|
||||||
class="banner-select-chevron"
|
focusable="false">
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="40"
|
|
||||||
height="40"
|
|
||||||
aria-hidden="true"
|
|
||||||
focusable="false"
|
|
||||||
>
|
|
||||||
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
|
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
|
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
|
||||||
<el-dropdown-item command="全部无人航行潜水器">全部无人航行潜水器</el-dropdown-item>
|
<el-dropdown-item command="全部无人航行潜水器">全部无人航行潜水器</el-dropdown-item>
|
||||||
<el-dropdown-item
|
<el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
|
||||||
v-for="item in titles"
|
|
||||||
:key="item.tsy_id"
|
|
||||||
:command="item.report_name"
|
|
||||||
>
|
|
||||||
{{ item.report_name }}
|
{{ item.report_name }}
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
|
|
@ -79,17 +65,15 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/**
|
/**
|
||||||
* 无人航行潜水器汇总统计页，请求 `/report/platform/auv` 系列接口；交互与遥控潜水器汇总页一致（Cesium + ECharts）。
|
* 无人航行潜水器汇总统计页，请求 `/report/platform/auv` 系列接口；交互与遥控潜水器汇总页一致（ECharts）。
|
||||||
*/
|
*/
|
||||||
import BarChart from './components/BarChart.vue'
|
import BarChart from './components/BarChart.vue'
|
||||||
import PieChart from './components/PieChart.vue'
|
import PieChart from './components/PieChart.vue'
|
||||||
import { setImageryViewModels } from '../../utils/common'
|
|
||||||
import { reportList, platformAuv, auvUnit, auvUnitYear, auvDiving } from '../../api/statistics'
|
import { reportList, platformAuv, auvUnit, auvUnitYear, auvDiving } from '../../api/statistics'
|
||||||
import { filterDictItems } from '../../utils/index'
|
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 { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
|
||||||
import { ColorGenerator } from '@/utils/color-generator';
|
import { ColorGenerator } from '@/utils/color-generator';
|
||||||
const Cesium = window.Cesium
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -122,13 +106,6 @@ export default {
|
||||||
unit: '个'
|
unit: '个'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
// Cesium相关 - 参航单位地图
|
|
||||||
baiduCesiumViewer: null,
|
|
||||||
baiduCesiumEntities: [], // 存储参航单位标记实体
|
|
||||||
viewer: null,
|
|
||||||
// 地图图层基础地址
|
|
||||||
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
|
|
||||||
trackLineLayers: [],
|
|
||||||
barData1: {},
|
barData1: {},
|
||||||
barData2: {},
|
barData2: {},
|
||||||
barData3: {},
|
barData3: {},
|
||||||
|
|
@ -155,24 +132,14 @@ export default {
|
||||||
});
|
});
|
||||||
initMapbox("voyageMap_auv", {
|
initMapbox("voyageMap_auv", {
|
||||||
tileKey: "GEBCO_basemap_NCEI",
|
tileKey: "GEBCO_basemap_NCEI",
|
||||||
zoom: 4,
|
zoom: 3,
|
||||||
center: [113, 15],
|
center: [113, 15],
|
||||||
minZoom: 2,
|
minZoom: 2,
|
||||||
maxZoom: 29
|
maxZoom: 29
|
||||||
});
|
});
|
||||||
|
|
||||||
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
|
||||||
// this.initCesium() // 初始化航次地图
|
|
||||||
// this.initBaiduCesium() // 初始化参航单位地图
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
// 清理Cesium资源
|
|
||||||
if (this.baiduCesiumViewer) {
|
|
||||||
this.baiduCesiumViewer.destroy()
|
|
||||||
}
|
|
||||||
if (this.viewer) {
|
|
||||||
this.viewer.destroy()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 无人航行潜水器数据
|
// 无人航行潜水器数据
|
||||||
|
|
@ -231,11 +198,6 @@ export default {
|
||||||
});
|
});
|
||||||
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_auv");
|
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_auv");
|
||||||
|
|
||||||
// // 清除之前的标记
|
|
||||||
// this.clearBaiduCesiumMarkers()
|
|
||||||
|
|
||||||
// // 创建参航单位标记
|
|
||||||
// this.createBaiduCesiumMarkers(res.array)
|
|
||||||
const typeCount = res.array.reduce((acc, unit) => {
|
const typeCount = res.array.reduce((acc, unit) => {
|
||||||
const type = unit.unit_type
|
const type = unit.unit_type
|
||||||
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
|
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 = {}) {
|
gitAuvDiving(params = {}) {
|
||||||
auvDiving(params).then(res => {
|
auvDiving(params).then(res => {
|
||||||
|
|
@ -306,108 +220,10 @@ export default {
|
||||||
// 加载轨迹图层
|
// 加载轨迹图层
|
||||||
loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_auv", "dsds");
|
loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_auv", "dsds");
|
||||||
i++;
|
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 = {}) {
|
gitAuvUnitYear(params = {}) {
|
||||||
auvUnitYear(params).then(res => {
|
auvUnitYear(params).then(res => {
|
||||||
|
|
|
||||||
|
|
@ -2,31 +2,17 @@
|
||||||
<div class="statistics">
|
<div class="statistics">
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<div class="banner-title-picker">
|
<div class="banner-title-picker">
|
||||||
<el-dropdown
|
<el-dropdown class="banner-type-dropdown" trigger="click" @command="handleCommand">
|
||||||
class="banner-type-dropdown"
|
|
||||||
trigger="click"
|
|
||||||
@command="handleCommand"
|
|
||||||
>
|
|
||||||
<span class="banner-select-trigger">
|
<span class="banner-select-trigger">
|
||||||
<span class="banner-select-text">{{ currentTitle }}</span>
|
<span class="banner-select-text">{{ currentTitle }}</span>
|
||||||
<svg
|
<svg class="banner-select-chevron" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true"
|
||||||
class="banner-select-chevron"
|
focusable="false">
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="40"
|
|
||||||
height="40"
|
|
||||||
aria-hidden="true"
|
|
||||||
focusable="false"
|
|
||||||
>
|
|
||||||
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
|
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
|
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
|
||||||
<el-dropdown-item command="全部载人潜水器">全部载人潜水器</el-dropdown-item>
|
<el-dropdown-item command="全部载人潜水器">全部载人潜水器</el-dropdown-item>
|
||||||
<el-dropdown-item
|
<el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
|
||||||
v-for="item in titles"
|
|
||||||
:key="item.tsy_id"
|
|
||||||
:command="item.report_name"
|
|
||||||
>
|
|
||||||
{{ item.report_name }}
|
{{ item.report_name }}
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
|
|
@ -54,49 +40,24 @@
|
||||||
<!-- echarts板块-->
|
<!-- echarts板块-->
|
||||||
<div class="echarts-module">
|
<div class="echarts-module">
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
|
||||||
:title="barData1.title"
|
chart-type="single" />
|
||||||
:chart-data="barData1.salesData"
|
|
||||||
:categories="barData1.productCategories"
|
|
||||||
chart-type="single"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
|
||||||
:title="barData2.title"
|
chart-type="stacked" stack-name="新增单位数" />
|
||||||
:chart-data="barData2.salesData"
|
|
||||||
:categories="barData2.productCategories"
|
|
||||||
chart-type="stacked"
|
|
||||||
stack-name="新增单位数"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
|
||||||
:title="barData3.title"
|
|
||||||
:chart-data="barData3.salesData"
|
|
||||||
:categories="barData3.productCategories"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
|
||||||
:title="barData4.title"
|
|
||||||
:chart-data="barData4.salesData"
|
|
||||||
:categories="barData4.productCategories"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barData5.title" :chart-data="barData5.salesData" :categories="barData5.productCategories" />
|
||||||
:title="barData5.title"
|
|
||||||
:chart-data="barData5.salesData"
|
|
||||||
:categories="barData5.productCategories"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<PieChart
|
<PieChart :chart-data="pieData" title="下潜单位类型" chart-type="ring" />
|
||||||
:chart-data="pieData"
|
|
||||||
title="下潜单位类型"
|
|
||||||
chart-type="ring"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -108,10 +69,9 @@ import PieChart from './components/PieChart.vue'
|
||||||
import { setImageryViewModels } from '../../utils/common'
|
import { setImageryViewModels } from '../../utils/common'
|
||||||
import { reportList, platformHov, hovUnit, hovUnitYear, hovDiving } from '../../api/statistics'
|
import { reportList, platformHov, hovUnit, hovUnitYear, hovDiving } from '../../api/statistics'
|
||||||
import { filterDictItems } from '../../utils/index'
|
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 { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
|
||||||
import { ColorGenerator } from '@/utils/color-generator';
|
import { ColorGenerator } from '@/utils/color-generator';
|
||||||
const Cesium = window.Cesium
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -144,13 +104,6 @@ export default {
|
||||||
unit: '个'
|
unit: '个'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
// Cesium相关 - 参航单位地图
|
|
||||||
baiduCesiumViewer: null,
|
|
||||||
baiduCesiumEntities: [], // 存储参航单位标记实体
|
|
||||||
viewer: null,
|
|
||||||
// 地图图层基础地址
|
|
||||||
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
|
|
||||||
trackLineLayers: [],
|
|
||||||
barData1: {},
|
barData1: {},
|
||||||
barData2: {},
|
barData2: {},
|
||||||
barData3: {},
|
barData3: {},
|
||||||
|
|
@ -168,7 +121,7 @@ export default {
|
||||||
this.getChartBar({ year: '2025' })
|
this.getChartBar({ year: '2025' })
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
initMapbox("workUnitMap_hov", {
|
initMapbox("workUnitMap_hov", {
|
||||||
tileKey: "gaode",
|
tileKey: "gaode",
|
||||||
zoom: 3,
|
zoom: 3,
|
||||||
center: [110, 31],
|
center: [110, 31],
|
||||||
|
|
@ -177,24 +130,14 @@ export default {
|
||||||
});
|
});
|
||||||
initMapbox("voyageMap_hov", {
|
initMapbox("voyageMap_hov", {
|
||||||
tileKey: "GEBCO_basemap_NCEI",
|
tileKey: "GEBCO_basemap_NCEI",
|
||||||
zoom: 4,
|
zoom: 3,
|
||||||
center: [113, 15],
|
center: [113, 15],
|
||||||
minZoom: 2,
|
minZoom: 2,
|
||||||
maxZoom: 29
|
maxZoom: 29
|
||||||
});
|
});
|
||||||
|
|
||||||
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
|
||||||
// this.initCesium() // 初始化航次地图
|
|
||||||
// this.initBaiduCesium() // 初始化参航单位地图
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
// 清理Cesium资源
|
|
||||||
if (this.baiduCesiumViewer) {
|
|
||||||
this.baiduCesiumViewer.destroy()
|
|
||||||
}
|
|
||||||
if (this.viewer) {
|
|
||||||
this.viewer.destroy()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 载人潜水器数据
|
// 载人潜水器数据
|
||||||
|
|
@ -253,11 +196,6 @@ export default {
|
||||||
});
|
});
|
||||||
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_hov");
|
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_hov");
|
||||||
|
|
||||||
// // 清除之前的标记
|
|
||||||
// this.clearBaiduCesiumMarkers()
|
|
||||||
|
|
||||||
// // 创建参航单位标记
|
|
||||||
// this.createBaiduCesiumMarkers(res.array)
|
|
||||||
const typeCount = res.array.reduce((acc, unit) => {
|
const typeCount = res.array.reduce((acc, unit) => {
|
||||||
const type = unit.unit_type
|
const type = unit.unit_type
|
||||||
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
|
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 = {}) {
|
gitHovDiving(params = {}) {
|
||||||
hovDiving(params).then(res => {
|
hovDiving(params).then(res => {
|
||||||
|
|
@ -328,108 +218,12 @@ export default {
|
||||||
// 加载轨迹图层
|
// 加载轨迹图层
|
||||||
loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_hov", "dsds");
|
loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_hov", "dsds");
|
||||||
i++;
|
i++;
|
||||||
|
|
||||||
// this.addSingleLineImg(item)
|
// this.addSingleLineImg(item)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 初始化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 = {}) {
|
gitHovUnitYear(params = {}) {
|
||||||
hovUnitYear(params).then(res => {
|
hovUnitYear(params).then(res => {
|
||||||
|
|
@ -577,24 +371,29 @@ export default {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
font-size: 56px;
|
font-size: 56px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
.unit {
|
.unit {
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.map-module {
|
.map-module {
|
||||||
padding: 50px 50px;
|
padding: 50px 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
|
|
||||||
.bezel {
|
.bezel {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -612,6 +411,7 @@ export default {
|
||||||
z-index: 8888;
|
z-index: 8888;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.map-year {
|
.map-year {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
|
|
@ -622,6 +422,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.echarts-module {
|
.echarts-module {
|
||||||
padding: 0 50px 50px;
|
padding: 0 50px 50px;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
||||||
|
|
@ -2,31 +2,17 @@
|
||||||
<div class="statistics">
|
<div class="statistics">
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<div class="banner-title-picker">
|
<div class="banner-title-picker">
|
||||||
<el-dropdown
|
<el-dropdown class="banner-type-dropdown" trigger="click" @command="handleCommand">
|
||||||
class="banner-type-dropdown"
|
|
||||||
trigger="click"
|
|
||||||
@command="handleCommand"
|
|
||||||
>
|
|
||||||
<span class="banner-select-trigger">
|
<span class="banner-select-trigger">
|
||||||
<span class="banner-select-text">{{ currentTitle }}</span>
|
<span class="banner-select-text">{{ currentTitle }}</span>
|
||||||
<svg
|
<svg class="banner-select-chevron" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true"
|
||||||
class="banner-select-chevron"
|
focusable="false">
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="40"
|
|
||||||
height="40"
|
|
||||||
aria-hidden="true"
|
|
||||||
focusable="false"
|
|
||||||
>
|
|
||||||
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
|
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
|
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
|
||||||
<el-dropdown-item command="全部遥控潜水器">全部遥控潜水器</el-dropdown-item>
|
<el-dropdown-item command="全部遥控潜水器">全部遥控潜水器</el-dropdown-item>
|
||||||
<el-dropdown-item
|
<el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
|
||||||
v-for="item in titles"
|
|
||||||
:key="item.tsy_id"
|
|
||||||
:command="item.report_name"
|
|
||||||
>
|
|
||||||
{{ item.report_name }}
|
{{ item.report_name }}
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
|
|
@ -83,13 +69,11 @@
|
||||||
*/
|
*/
|
||||||
import BarChart from './components/BarChart.vue'
|
import BarChart from './components/BarChart.vue'
|
||||||
import PieChart from './components/PieChart.vue'
|
import PieChart from './components/PieChart.vue'
|
||||||
import { setImageryViewModels } from '../../utils/common'
|
|
||||||
import { reportList, platformRov, rovUnit, rovUnitYear, rovDiving } from '../../api/statistics'
|
import { reportList, platformRov, rovUnit, rovUnitYear, rovDiving } from '../../api/statistics'
|
||||||
import { filterDictItems } from '../../utils/index'
|
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 { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
|
||||||
import { ColorGenerator } from '@/utils/color-generator';
|
import { ColorGenerator } from '@/utils/color-generator';
|
||||||
const Cesium = window.Cesium
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -122,13 +106,6 @@ export default {
|
||||||
unit: '个'
|
unit: '个'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
// Cesium相关 - 参航单位地图
|
|
||||||
baiduCesiumViewer: null,
|
|
||||||
baiduCesiumEntities: [], // 存储参航单位标记实体
|
|
||||||
viewer: null,
|
|
||||||
// 地图图层基础地址
|
|
||||||
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
|
|
||||||
trackLineLayers: [],
|
|
||||||
barData1: {},
|
barData1: {},
|
||||||
barData2: {},
|
barData2: {},
|
||||||
barData3: {},
|
barData3: {},
|
||||||
|
|
@ -155,24 +132,14 @@ export default {
|
||||||
});
|
});
|
||||||
initMapbox("voyageMap_rov", {
|
initMapbox("voyageMap_rov", {
|
||||||
tileKey: "GEBCO_basemap_NCEI",
|
tileKey: "GEBCO_basemap_NCEI",
|
||||||
zoom: 4,
|
zoom: 3,
|
||||||
center: [113, 15],
|
center: [113, 15],
|
||||||
minZoom: 2,
|
minZoom: 2,
|
||||||
maxZoom: 29
|
maxZoom: 29
|
||||||
});
|
});
|
||||||
|
|
||||||
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
|
||||||
// this.initCesium() // 初始化航次地图
|
|
||||||
// this.initBaiduCesium() // 初始化参航单位地图
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
// 清理Cesium资源
|
|
||||||
if (this.baiduCesiumViewer) {
|
|
||||||
this.baiduCesiumViewer.destroy()
|
|
||||||
}
|
|
||||||
if (this.viewer) {
|
|
||||||
this.viewer.destroy()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 遥控潜水器数据
|
// 遥控潜水器数据
|
||||||
|
|
@ -184,7 +151,7 @@ export default {
|
||||||
// 选择遥控潜水器
|
// 选择遥控潜水器
|
||||||
handleCommand(command) {
|
handleCommand(command) {
|
||||||
this.currentTitle = command
|
this.currentTitle = command
|
||||||
this.removeSingleLineImg()
|
// this.removeSingleLineImg()
|
||||||
if (command === '全部遥控潜水器') {
|
if (command === '全部遥控潜水器') {
|
||||||
this.getRovList()
|
this.getRovList()
|
||||||
this.gitRovDiving()
|
this.gitRovDiving()
|
||||||
|
|
@ -231,11 +198,6 @@ export default {
|
||||||
});
|
});
|
||||||
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_rov");
|
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_rov");
|
||||||
|
|
||||||
// // 清除之前的标记
|
|
||||||
// this.clearBaiduCesiumMarkers()
|
|
||||||
|
|
||||||
// // 创建参航单位标记
|
|
||||||
// this.createBaiduCesiumMarkers(res.array)
|
|
||||||
const typeCount = res.array.reduce((acc, unit) => {
|
const typeCount = res.array.reduce((acc, unit) => {
|
||||||
const type = unit.unit_type
|
const type = unit.unit_type
|
||||||
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
|
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 = {}) {
|
gitRovDiving(params = {}) {
|
||||||
rovDiving(params).then(res => {
|
rovDiving(params).then(res => {
|
||||||
|
|
@ -306,108 +220,9 @@ export default {
|
||||||
// 加载轨迹图层
|
// 加载轨迹图层
|
||||||
loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_rov", "dsds");
|
loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_rov", "dsds");
|
||||||
i++;
|
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 = {}) {
|
gitRovUnitYear(params = {}) {
|
||||||
rovUnitYear(params).then(res => {
|
rovUnitYear(params).then(res => {
|
||||||
|
|
|
||||||
|
|
@ -2,31 +2,17 @@
|
||||||
<div class="statistics">
|
<div class="statistics">
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<div class="banner-title-picker">
|
<div class="banner-title-picker">
|
||||||
<el-dropdown
|
<el-dropdown class="banner-type-dropdown" trigger="click" @command="handleCommand">
|
||||||
class="banner-type-dropdown"
|
|
||||||
trigger="click"
|
|
||||||
@command="handleCommand"
|
|
||||||
>
|
|
||||||
<span class="banner-select-trigger">
|
<span class="banner-select-trigger">
|
||||||
<span class="banner-select-text">{{ currentTitle }}</span>
|
<span class="banner-select-text">{{ currentTitle }}</span>
|
||||||
<svg
|
<svg class="banner-select-chevron" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true"
|
||||||
class="banner-select-chevron"
|
focusable="false">
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="40"
|
|
||||||
height="40"
|
|
||||||
aria-hidden="true"
|
|
||||||
focusable="false"
|
|
||||||
>
|
|
||||||
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
|
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
|
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
|
||||||
<el-dropdown-item command="全部科考船">全部科考船</el-dropdown-item>
|
<el-dropdown-item command="全部科考船">全部科考船</el-dropdown-item>
|
||||||
<el-dropdown-item
|
<el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
|
||||||
v-for="item in titles"
|
|
||||||
:key="item.tsy_id"
|
|
||||||
:command="item.report_name"
|
|
||||||
>
|
|
||||||
{{ item.report_name }}
|
{{ item.report_name }}
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
|
|
@ -44,73 +30,40 @@
|
||||||
<div class="map-module">
|
<div class="map-module">
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<div class="map-title">参航单位</div>
|
<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>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<div class="map-title">航次地图</div>
|
<div class="map-title">航次地图</div>
|
||||||
<div class="map-year-panel">
|
<div class="map-year-panel">
|
||||||
<span class="map-year-label">年份</span>
|
<span class="map-year-label">年份</span>
|
||||||
<el-date-picker
|
<el-date-picker v-model="voyageYear" type="year" size="small" placeholder="全部" class="map-year" clearable
|
||||||
v-model="voyageYear"
|
format="yyyy" @change="selectVoyageYear" />
|
||||||
type="year"
|
|
||||||
size="small"
|
|
||||||
placeholder="全部"
|
|
||||||
class="map-year"
|
|
||||||
clearable
|
|
||||||
format="yyyy"
|
|
||||||
@change="selectVoyageYear"
|
|
||||||
/>
|
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<!-- echarts板块-->
|
<!-- echarts板块-->
|
||||||
<div class="echarts-module">
|
<div class="echarts-module">
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
|
||||||
:title="barData1.title"
|
chart-type="single" />
|
||||||
:chart-data="barData1.salesData"
|
|
||||||
:categories="barData1.productCategories"
|
|
||||||
chart-type="single"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barDataDays.title" :chart-data="barDataDays.salesData"
|
||||||
:title="barDataDays.title"
|
:categories="barDataDays.productCategories" chart-type="single" />
|
||||||
:chart-data="barDataDays.salesData"
|
|
||||||
:categories="barDataDays.productCategories"
|
|
||||||
chart-type="single"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
|
||||||
:title="barData2.title"
|
chart-type="stacked" stack-name="新增单位数" />
|
||||||
:chart-data="barData2.salesData"
|
|
||||||
:categories="barData2.productCategories"
|
|
||||||
chart-type="stacked"
|
|
||||||
stack-name="新增单位数"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
|
||||||
:title="barData3.title"
|
|
||||||
:chart-data="barData3.salesData"
|
|
||||||
:categories="barData3.productCategories"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
|
||||||
:title="barData4.title"
|
|
||||||
:chart-data="barData4.salesData"
|
|
||||||
:categories="barData4.productCategories"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<PieChart
|
<PieChart :chart-data="pieData" title="参航单位类型" chart-type="ring" />
|
||||||
:chart-data="pieData"
|
|
||||||
title="参航单位类型"
|
|
||||||
chart-type="ring"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -119,10 +72,11 @@
|
||||||
<script>
|
<script>
|
||||||
import BarChart from './components/BarChart.vue'
|
import BarChart from './components/BarChart.vue'
|
||||||
import PieChart from './components/PieChart.vue'
|
import PieChart from './components/PieChart.vue'
|
||||||
import { setImageryViewModels } from '../../utils/common'
|
|
||||||
import { reportList, shipTotal, shipUnit, shipUnitYear, shipVoyage } from '../../api/statistics'
|
import { reportList, shipTotal, shipUnit, shipUnitYear, shipVoyage } from '../../api/statistics'
|
||||||
import { getYearRange, filterDictItems } from '../../utils/index'
|
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 {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -160,13 +114,6 @@ export default {
|
||||||
unit: 'km'
|
unit: 'km'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
// Cesium相关 - 参航单位地图
|
|
||||||
baiduCesiumViewer: null,
|
|
||||||
baiduCesiumEntities: [], // 存储参航单位标记实体
|
|
||||||
viewer: null,
|
|
||||||
// 地图图层基础地址
|
|
||||||
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
|
|
||||||
trackLineLayers: [],
|
|
||||||
voyageYear: '',
|
voyageYear: '',
|
||||||
barData1: {},
|
barData1: {},
|
||||||
/** 年度航次天数（与 barData1 同源接口按年） */
|
/** 年度航次天数（与 barData1 同源接口按年） */
|
||||||
|
|
@ -180,27 +127,29 @@ export default {
|
||||||
created() {
|
created() {
|
||||||
this.getTypeList()
|
this.getTypeList()
|
||||||
this.getShipList()
|
this.getShipList()
|
||||||
|
this.getShipUnit()
|
||||||
|
this.gitShipVoyage()
|
||||||
this.gitShipUnitYear()
|
this.gitShipUnitYear()
|
||||||
this.getChartBar({ year: '2025' })
|
this.getChartBar({ year: '2025' })
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
initMapbox('workUnitMap_ship', {
|
||||||
this.initCesium() // 初始化航次地图
|
tileKey: 'gaode',
|
||||||
this.initBaiduCesium() // 初始化参航单位地图
|
zoom: 3,
|
||||||
// 依赖 Cesium Viewer 的接口须在地图就绪后调用（created 阶段 viewer 尚未创建）
|
center: [110, 31],
|
||||||
this.$nextTick(() => {
|
minZoom: 2,
|
||||||
this.getShipUnit()
|
maxZoom: 29
|
||||||
this.gitShipVoyage()
|
})
|
||||||
|
initMapbox('voyageMap_ship', {
|
||||||
|
tileKey: 'GEBCO_basemap_NCEI',
|
||||||
|
zoom: 3,
|
||||||
|
center: [113, 15],
|
||||||
|
minZoom: 2,
|
||||||
|
maxZoom: 29
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
// 清理Cesium资源
|
|
||||||
if (this.baiduCesiumViewer) {
|
|
||||||
this.baiduCesiumViewer.destroy()
|
|
||||||
}
|
|
||||||
if (this.viewer) {
|
|
||||||
this.viewer.destroy()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 科考船数据
|
// 科考船数据
|
||||||
|
|
@ -212,7 +161,7 @@ export default {
|
||||||
// 选择科考船
|
// 选择科考船
|
||||||
handleCommand(command) {
|
handleCommand(command) {
|
||||||
this.currentTitle = command
|
this.currentTitle = command
|
||||||
this.removeSingleLineImg()
|
// this.removeSingleLineImg()
|
||||||
if (command === '全部科考船') {
|
if (command === '全部科考船') {
|
||||||
this.getShipList()
|
this.getShipList()
|
||||||
this.gitShipVoyage()
|
this.gitShipVoyage()
|
||||||
|
|
@ -239,11 +188,26 @@ export default {
|
||||||
// 参航单位统计
|
// 参航单位统计
|
||||||
getShipUnit() {
|
getShipUnit() {
|
||||||
shipUnit().then(res => {
|
shipUnit().then(res => {
|
||||||
// 清除之前的标记
|
const geojson = {
|
||||||
this.clearBaiduCesiumMarkers()
|
type: 'FeatureCollection',
|
||||||
|
features: []
|
||||||
// 创建参航单位标记
|
}
|
||||||
this.createBaiduCesiumMarkers(res.array)
|
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 typeCount = res.array.reduce((acc, unit) => {
|
||||||
const type = unit.unit_type
|
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 = {}) {
|
gitShipVoyage(params = {}) {
|
||||||
shipVoyage(params).then(res => {
|
shipVoyage(params).then(res => {
|
||||||
|
let i = 0
|
||||||
|
const colors = ColorGenerator.generateDivergingColors(res.array.length)
|
||||||
// 添加轨迹图层
|
// 添加轨迹图层
|
||||||
res.array.forEach(item => {
|
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) {
|
selectVoyageYear(val) {
|
||||||
const shipName = this.currentTitle === '全部科考船' ? '' : this.currentTitle
|
const shipName = this.currentTitle === '全部科考船' ? '' : this.currentTitle
|
||||||
if (val) {
|
if (val) {
|
||||||
this.removeSingleLineImg()
|
// this.removeSingleLineImg()
|
||||||
const params = getYearRange(val)
|
const params = getYearRange(val)
|
||||||
this.gitShipVoyage({ ...params, ship_name: shipName })
|
this.gitShipVoyage({ ...params, ship_name: shipName })
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -570,24 +393,29 @@ export default {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
font-size: 56px;
|
font-size: 56px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
.unit {
|
.unit {
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.map-module {
|
.map-module {
|
||||||
padding: 50px 50px;
|
padding: 50px 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
|
|
||||||
.bezel {
|
.bezel {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -680,6 +508,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.echarts-module {
|
.echarts-module {
|
||||||
padding: 0 50px 50px;
|
padding: 0 50px 50px;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
||||||
|
|
@ -13,24 +13,10 @@
|
||||||
<div class="unit-toolbar-inner">
|
<div class="unit-toolbar-inner">
|
||||||
<div class="unit-filter-box">
|
<div class="unit-filter-box">
|
||||||
<span class="banner-unit-label">统计单位</span>
|
<span class="banner-unit-label">统计单位</span>
|
||||||
<el-select
|
<el-select v-model="selectedUnits" class="banner-unit-select" multiple filterable clearable size="small"
|
||||||
v-model="selectedUnits"
|
placeholder="请选择单位（不选表示全部）" value-key="unit_name" collapse-tags @change="onBannerUnitsChange">
|
||||||
class="banner-unit-select"
|
<el-option v-for="unit in unitOptions" :key="unit.unit_id || unit.unit_name" :label="unit.unit_name"
|
||||||
multiple
|
:value="unit" />
|
||||||
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>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -45,16 +31,8 @@
|
||||||
<div class="map-title">航次地图</div>
|
<div class="map-title">航次地图</div>
|
||||||
<div class="map-year-panel">
|
<div class="map-year-panel">
|
||||||
<span class="map-year-label">年份</span>
|
<span class="map-year-label">年份</span>
|
||||||
<el-date-picker
|
<el-date-picker v-model="voyageYear" type="year" size="small" placeholder="全部" class="map-year" clearable
|
||||||
v-model="voyageYear"
|
format="yyyy" @change="selectVoyageYear" />
|
||||||
type="year"
|
|
||||||
size="small"
|
|
||||||
placeholder="全部"
|
|
||||||
class="map-year"
|
|
||||||
clearable
|
|
||||||
format="yyyy"
|
|
||||||
@change="selectVoyageYear"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="voyageMap_uuv" ref="voyageMap_uuv" style="height: 100%;width:100%;" />
|
<div id="voyageMap_uuv" ref="voyageMap_uuv" style="height: 100%;width:100%;" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -62,47 +40,24 @@
|
||||||
<!-- echarts板块-->
|
<!-- echarts板块-->
|
||||||
<div class="echarts-module">
|
<div class="echarts-module">
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barVoyageCount.title" :chart-data="barVoyageCount.salesData"
|
||||||
:title="barVoyageCount.title"
|
:categories="barVoyageCount.productCategories" chart-type="single" />
|
||||||
:chart-data="barVoyageCount.salesData"
|
|
||||||
:categories="barVoyageCount.productCategories"
|
|
||||||
chart-type="single"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barVoyageDays.title" :chart-data="barVoyageDays.salesData"
|
||||||
:title="barVoyageDays.title"
|
:categories="barVoyageDays.productCategories" chart-type="single" />
|
||||||
:chart-data="barVoyageDays.salesData"
|
|
||||||
:categories="barVoyageDays.productCategories"
|
|
||||||
chart-type="single"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barPeopleDiving.title" :chart-data="barPeopleDiving.salesData"
|
||||||
:title="barPeopleDiving.title"
|
:categories="barPeopleDiving.productCategories" chart-type="multiple" />
|
||||||
:chart-data="barPeopleDiving.salesData"
|
|
||||||
:categories="barPeopleDiving.productCategories"
|
|
||||||
chart-type="multiple"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="barFirstPeopleDiving.title" :chart-data="barFirstPeopleDiving.salesData"
|
||||||
:title="barFirstPeopleDiving.title"
|
:categories="barFirstPeopleDiving.productCategories" chart-type="multiple" />
|
||||||
:chart-data="barFirstPeopleDiving.salesData"
|
|
||||||
:categories="barFirstPeopleDiving.productCategories"
|
|
||||||
chart-type="multiple"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bezel">
|
<div class="bezel">
|
||||||
<BarChart
|
<BarChart :title="mixedMileage.title" :chart-data="mixedMileage.series" :categories="mixedMileage.categories"
|
||||||
:title="mixedMileage.title"
|
chart-type="mixed" :dual-y-axis="true" left-axis-name="次数" right-axis-name="天数" />
|
||||||
:chart-data="mixedMileage.series"
|
|
||||||
:categories="mixedMileage.categories"
|
|
||||||
chart-type="mixed"
|
|
||||||
:dual-y-axis="true"
|
|
||||||
left-axis-name="次数"
|
|
||||||
right-axis-name="天数"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -206,7 +161,7 @@ export default {
|
||||||
})
|
})
|
||||||
initMapbox('voyageMap_uuv', {
|
initMapbox('voyageMap_uuv', {
|
||||||
tileKey: 'GEBCO_basemap_NCEI',
|
tileKey: 'GEBCO_basemap_NCEI',
|
||||||
zoom: 4,
|
zoom: 3,
|
||||||
center: [113, 15],
|
center: [113, 15],
|
||||||
minZoom: 2,
|
minZoom: 2,
|
||||||
maxZoom: 29
|
maxZoom: 29
|
||||||
|
|
@ -365,10 +320,10 @@ export default {
|
||||||
getHovUnit() {
|
getHovUnit() {
|
||||||
hovUnit().then(res => {
|
hovUnit().then(res => {
|
||||||
const map = new Map()
|
const map = new Map()
|
||||||
;(res.array || []).forEach(unit => {
|
; (res.array || []).forEach(unit => {
|
||||||
const k = unit.unit_id || unit.unitId || unit.unit_name
|
const k = unit.unit_id || unit.unitId || unit.unit_name
|
||||||
if (!map.has(k)) map.set(k, unit)
|
if (!map.has(k)) map.set(k, unit)
|
||||||
})
|
})
|
||||||
this.unitOptions = Array.from(map.values())
|
this.unitOptions = Array.from(map.values())
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -383,21 +338,21 @@ export default {
|
||||||
type: 'FeatureCollection',
|
type: 'FeatureCollection',
|
||||||
features: []
|
features: []
|
||||||
}
|
}
|
||||||
;(res.array || []).forEach(element => {
|
; (res.array || []).forEach(element => {
|
||||||
geojson.features.push({
|
geojson.features.push({
|
||||||
type: 'Feature',
|
type: 'Feature',
|
||||||
geometry: {
|
geometry: {
|
||||||
type: 'Point',
|
type: 'Point',
|
||||||
coordinates: [element.unit_lon, element.unit_lat]
|
coordinates: [element.unit_lon, element.unit_lat]
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
unit_name: element.unit_name,
|
unit_name: element.unit_name,
|
||||||
unit_type: element.unit_type,
|
unit_type: element.unit_type,
|
||||||
create_time: element.create_time,
|
create_time: element.create_time,
|
||||||
tsy_id: element.tsy_id
|
tsy_id: element.tsy_id
|
||||||
}
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
|
||||||
loadJsonPointFeature('workUnit', 'blue', geojson, 'unit_name', 'workUnitMap_uuv')
|
loadJsonPointFeature('workUnit', 'blue', geojson, 'unit_name', 'workUnitMap_uuv')
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -411,10 +366,10 @@ export default {
|
||||||
shipVoyage(params).then(res => {
|
shipVoyage(params).then(res => {
|
||||||
let i = 0
|
let i = 0
|
||||||
const colors = ColorGenerator.generateDivergingColors((res.array || []).length)
|
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')
|
loadVectorLayer(item.voyage_name, ['line', 'symbol'], [colors[i], '#FFFFFF'], 'visible', 'voyageMap_uuv', 'dsds')
|
||||||
i++
|
i++
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -533,13 +488,16 @@ export default {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
font-size: 56px;
|
font-size: 56px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
.unit {
|
.unit {
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
@ -606,6 +564,7 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
|
|
||||||
.bezel {
|
.bezel {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,448 +0,0 @@
|
||||||
<template>
|
|
||||||
|
|
||||||
<div class="shuju">
|
|
||||||
<div class="header">
|
|
||||||
<div class="header_con">
|
|
||||||
<div class="header1">
|
|
||||||
<div class="time">
|
|
||||||
<!-- <p>{{ date }} {{ 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>
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -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>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 165 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 165 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue