删除 cesium 相关代码
This commit is contained in:
parent
f61af1183d
commit
c2cf9ae0f4
|
|
@ -10,8 +10,6 @@
|
|||
<link rel="apple-touch-icon" href="./static/images/logo_map.png" />
|
||||
|
||||
<link rel="stylesheet" href="./static/css/reset.css">
|
||||
<link rel="stylesheet" href="./static/js/Cesium/Widgets/widgets.css">
|
||||
<script type="text/javascript" src="./static/js/Cesium/Cesium.js"></script>
|
||||
|
||||
<!-- 引入 Mapbox GL JS -->
|
||||
<link href="./static/css/mapbox-gl-v3.16.0.css" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -1462,41 +1462,6 @@
|
|||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@cesium/engine": {
|
||||
"version": "11.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@cesium/engine/-/engine-11.1.0.tgz",
|
||||
"integrity": "sha512-vrEQAbYQuXt2cMYF9BpBu4Kxu+8uje1CrFHfyI5aNp7gCrUK1RYquldyqT7TDr3YKe7oZMHL+Xeb5Vm8ua6gZQ==",
|
||||
"requires": {
|
||||
"@tweenjs/tween.js": "^25.0.0",
|
||||
"@zip.js/zip.js": "^2.7.34",
|
||||
"autolinker": "^4.0.0",
|
||||
"bitmap-sdf": "^1.0.3",
|
||||
"dompurify": "^3.0.2",
|
||||
"draco3d": "^1.5.1",
|
||||
"earcut": "^3.0.0",
|
||||
"grapheme-splitter": "^1.0.4",
|
||||
"jsep": "^1.3.8",
|
||||
"kdbush": "^4.0.1",
|
||||
"ktx-parse": "^0.7.0",
|
||||
"lerc": "^2.0.0",
|
||||
"mersenne-twister": "^1.1.0",
|
||||
"meshoptimizer": "^0.21.0",
|
||||
"pako": "^2.0.4",
|
||||
"protobufjs": "^7.1.0",
|
||||
"rbush": "3.0.1",
|
||||
"topojson-client": "^3.1.0",
|
||||
"urijs": "^1.19.7"
|
||||
}
|
||||
},
|
||||
"@cesium/widgets": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@cesium/widgets/-/widgets-8.1.0.tgz",
|
||||
"integrity": "sha512-WD5eokNfSQmB3oqe97KmdmDefwzooHaMWBm9kE/Af9edyD2j3eQVTrbNhiJ06UIyEjd01U1af2iDOawI9adAgA==",
|
||||
"requires": {
|
||||
"@cesium/engine": "^11.1.0",
|
||||
"nosleep.js": "^0.12.0"
|
||||
}
|
||||
},
|
||||
"@eslint/eslintrc": {
|
||||
"version": "0.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
|
||||
|
|
@ -4565,15 +4530,6 @@
|
|||
"lazy-cache": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"cesium": {
|
||||
"version": "1.121.1",
|
||||
"resolved": "https://registry.npmjs.org/cesium/-/cesium-1.121.1.tgz",
|
||||
"integrity": "sha512-WpdaGFd8qCOHiE9khV0sWWjCMXAX1U9Aou8MzMC/F0Akp6YqcOk4HLk4LLhZKeOjO/Bh27iTIW2mxEZ5+dtCxg==",
|
||||
"requires": {
|
||||
"@cesium/engine": "^11.0.0",
|
||||
"@cesium/widgets": "^8.0.0"
|
||||
}
|
||||
},
|
||||
"chai-nightwatch": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/chai-nightwatch/-/chai-nightwatch-0.1.1.tgz",
|
||||
|
|
|
|||
|
|
@ -15,8 +15,6 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.2",
|
||||
"baidu-map": "^0.1.4",
|
||||
"cesium": "^1.117.0",
|
||||
"echarts": "^4.9.0",
|
||||
"echarts-gl": "^1.1.0",
|
||||
"element-ui": "^2.13.0",
|
||||
|
|
@ -32,9 +30,7 @@
|
|||
"swiper": "^6.8.4",
|
||||
"vue": "^2.5.2",
|
||||
"vue-awesome-swiper": "^3.1.3",
|
||||
"vue-baidu-map": "^0.21.22",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue2-google-maps": "^0.10.7",
|
||||
"vuex": "^3.1.1",
|
||||
"xml2js": "^0.6.2"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -208,16 +208,6 @@ export const constantRoutes = [
|
|||
loginAuthority: true
|
||||
}
|
||||
},
|
||||
// {
|
||||
// path: 'GMRT',
|
||||
// name: 'GMRT',
|
||||
// component: () => import('@/views/GMRT.vue'),
|
||||
// meta: {
|
||||
// title: '地图',
|
||||
// icon: 'peoples',
|
||||
// loginAuthority: true
|
||||
// }
|
||||
// },
|
||||
{
|
||||
path: 'dataSearch',
|
||||
name: 'dataSearch',
|
||||
|
|
@ -298,16 +288,16 @@ export const constantRoutes = [
|
|||
loginAuthority: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'physicalDataSearchCTD',
|
||||
name: 'physicalDataSearchCTD',
|
||||
component: () => import('@/views/sublibrary/physicalDataSearchCTD.vue'),
|
||||
meta: {
|
||||
title: '温盐深(CTD) 数据应用',
|
||||
icon: 'peoples',
|
||||
loginAuthority: true
|
||||
}
|
||||
},
|
||||
// {
|
||||
// path: 'physicalDataSearchCTD',
|
||||
// name: 'physicalDataSearchCTD',
|
||||
// component: () => import('@/views/sublibrary/physicalDataSearchCTD.vue'),
|
||||
// meta: {
|
||||
// title: '温盐深(CTD) 数据应用',
|
||||
// icon: 'peoples',
|
||||
// loginAuthority: true
|
||||
// }
|
||||
// },
|
||||
{
|
||||
path: 'phoneVideoIndex',
|
||||
name: 'phoneVideoIndex',
|
||||
|
|
@ -328,16 +318,6 @@ export const constantRoutes = [
|
|||
loginAuthority: true
|
||||
}
|
||||
},
|
||||
// {
|
||||
// path: 'analyse',
|
||||
// name: 'analyse',
|
||||
// component: () => import('@/views/analyse.vue'),
|
||||
// meta: {
|
||||
// title: '统计分析',
|
||||
// icon: 'peoples',
|
||||
// loginAuthority: true
|
||||
// }
|
||||
// },
|
||||
{
|
||||
path: 'statistics',
|
||||
name: 'statistics',
|
||||
|
|
|
|||
|
|
@ -1,83 +1 @@
|
|||
import { getParamsList } from '../api/home'
|
||||
|
||||
export function modifyCesiumMouseWheel(viewer) {
|
||||
// 地图缩放改为按下 Ctrl + 鼠标滚轮
|
||||
viewer.scene.screenSpaceCameraController.zoomEventTypes = [{ eventType: Cesium.CameraEventType.WHEEL, modifier: Cesium.KeyboardEventModifier.CTRL }];
|
||||
|
||||
// 改写 Cesium 原生鼠标滚轮事件
|
||||
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||||
handler.setInputAction((event) => {
|
||||
if (event < 0) {
|
||||
window.scrollBy({ left: 0, top: 15, behavior: 'auto' });
|
||||
} else {
|
||||
window.scrollBy({ left: 0, top: -15, behavior: 'auto' });
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.WHEEL);
|
||||
|
||||
// 鼠标移动时显示提示信息
|
||||
handler.setInputAction((event) => {
|
||||
document.getElementById('mouseWheelTip').style.display = '';
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||||
}
|
||||
|
||||
let imageryViewModels = [];
|
||||
export function setImageryViewModels(cesiumHostAddr) {
|
||||
if (imageryViewModels.length == 0) {
|
||||
// 世界影像地图
|
||||
const world_imagery = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
|
||||
// url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
|
||||
// url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer'
|
||||
}
|
||||
);
|
||||
// 彩色地形底图
|
||||
const colorMap = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: cesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
|
||||
layer: 'ougp:world',
|
||||
style: 'default',
|
||||
format: 'image/jpeg',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
}
|
||||
);
|
||||
// 灰度地形底图
|
||||
const grayMap = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: cesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world_gray/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
|
||||
layer: 'ougp:world_gray',
|
||||
style: 'default',
|
||||
format: 'image/jpeg',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
}
|
||||
);
|
||||
// 自定义底图
|
||||
imageryViewModels.push(new Cesium.ProviderViewModel({
|
||||
name: "世界影像地图",
|
||||
iconUrl: "static/images/world_imagery.png",
|
||||
tooltip: "世界影像地图",
|
||||
creationFunction: function () {
|
||||
return world_imagery;
|
||||
}
|
||||
}));
|
||||
imageryViewModels.push(new Cesium.ProviderViewModel({
|
||||
name: "地形地图",
|
||||
iconUrl: "static/images/world_color.png",
|
||||
tooltip: "彩色地形底图",
|
||||
creationFunction: function () {
|
||||
return colorMap;
|
||||
}
|
||||
}));
|
||||
imageryViewModels.push(new Cesium.ProviderViewModel({
|
||||
name: "灰度地图",
|
||||
iconUrl: "static/images/world_gray.png",
|
||||
tooltip: "灰度地形底图",
|
||||
creationFunction: function () {
|
||||
return grayMap;
|
||||
}
|
||||
}));
|
||||
}
|
||||
return imageryViewModels;
|
||||
}
|
||||
|
|
@ -61,7 +61,7 @@ export function initMapbox(mapId, options = {}) {
|
|||
attributionControl: false,
|
||||
boxZoom: true,//如果为true，则启用了“缩放框”交互，按住shift并在地图上拖框放大
|
||||
preserveDrawingBuffer: false,//如果为true，地图的canvas可以使用导出到png，通过map.getCanvas().toDataURL()。默认为false，会提高地图性能。
|
||||
projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
|
||||
// projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
|
||||
});
|
||||
Vue.config.maps[mapId] = map;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
|
||||
|
||||
const Cesium = window.Cesium
|
||||
export default {
|
||||
name: 'Shuju',
|
||||
data() {
|
||||
|
|
@ -247,7 +246,6 @@ export default {
|
|||
show: false,
|
||||
viewer: null,
|
||||
filter: null,
|
||||
color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE],
|
||||
searchType: [
|
||||
{
|
||||
label: '航次名称',
|
||||
|
|
@ -307,8 +305,6 @@ export default {
|
|||
chooseLine: null,
|
||||
currentVoyage: null, // 当前选中的航次
|
||||
currentSample: null, // 当前选中的数据样品集合
|
||||
// 地图图层基础地址
|
||||
CesiumHostAddr: '',
|
||||
// 保存自定义底图
|
||||
imageryViewModels: [],
|
||||
// 保存轨迹图层
|
||||
|
|
@ -362,16 +358,13 @@ export default {
|
|||
mounted() {
|
||||
initMapbox("dataSearchMap", {
|
||||
tileKey: "world_horizon_1",
|
||||
zoom: 4,
|
||||
zoom: 3,
|
||||
center: [122, 15],
|
||||
minZoom: 2,
|
||||
maxZoom: 29,
|
||||
coastlineOn:false,
|
||||
contourOn:false
|
||||
});
|
||||
|
||||
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||||
// this.initCesium()
|
||||
},
|
||||
methods: {
|
||||
// 获取菜单
|
||||
|
|
@ -488,20 +481,6 @@ export default {
|
|||
addHighlightLayer(voyageName, i) {
|
||||
Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", 4);
|
||||
this.dataList[i].highlight = true;
|
||||
return;
|
||||
|
||||
this.clearHighlight()
|
||||
const highlightLayer = new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${voyageName}-highlight/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||||
layer: `dsds:${voyageName}-highlight`,
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
});
|
||||
|
||||
this.highlightLayer = this.viewer.imageryLayers.addImageryProvider(highlightLayer);
|
||||
this.dataList[i].highlight = true;
|
||||
},
|
||||
// 清除高亮
|
||||
clearHighlight(voyageName, i) {
|
||||
|
|
@ -515,14 +494,6 @@ export default {
|
|||
];
|
||||
Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", lineWidthExpression);
|
||||
this.dataList[i].highlight = false;
|
||||
return;
|
||||
|
||||
this.dataList.map(item => { item.highlight = false })
|
||||
// 移除地图上的高亮图层
|
||||
if (this.highlightLayer) {
|
||||
this.viewer.imageryLayers.remove(this.highlightLayer);
|
||||
this.highlightLayer = null;
|
||||
}
|
||||
},
|
||||
// 显示
|
||||
addSingleLineImg(voyageName, i) {
|
||||
|
|
@ -532,29 +503,6 @@ export default {
|
|||
// 显示图层
|
||||
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "visible");
|
||||
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "visible");
|
||||
return;
|
||||
// 检查该航次图层是否已存在，避免重复添加
|
||||
if (this.trackLayerMap[voyageName]) {
|
||||
console.warn(`航次 ${voyageName} 的轨迹图层已存在`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建轨迹影像图层
|
||||
const trackLine = new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${voyageName}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||||
layer: `dsds:${voyageName}`,
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
});
|
||||
|
||||
// 添加图层到Cesium并存储引用
|
||||
const layerInstance = this.viewer.imageryLayers.addImageryProvider(trackLine);
|
||||
this.trackLayerMap[voyageName] = layerInstance; // 以航次名为键存储图层实例
|
||||
if (i !== null) {
|
||||
this.dataList[i].show = true;
|
||||
}
|
||||
},
|
||||
|
||||
// 隐藏
|
||||
|
|
@ -567,68 +515,6 @@ export default {
|
|||
// visibility = visibility == "visible" ? "none" : "visible";
|
||||
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "none");
|
||||
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "none");
|
||||
return;
|
||||
|
||||
const layerInstance = this.trackLayerMap[voyageName];
|
||||
if (layerInstance) {
|
||||
// 从Cesium的imageryLayers中移除该图层
|
||||
this.viewer.imageryLayers.remove(layerInstance);
|
||||
// 删除映射表中对该图层的引用
|
||||
delete this.trackLayerMap[voyageName];
|
||||
if (i !== null) {
|
||||
this.dataList[i].show = false;
|
||||
}
|
||||
} else {
|
||||
console.warn(`未找到航次 ${voyageName} 的轨迹图层`);
|
||||
}
|
||||
},
|
||||
// 测线业务相关图层
|
||||
sampleLineImage(item) {
|
||||
// 查询轨迹是否渲染过，避免重复渲染
|
||||
if (this.rendered.length) {
|
||||
const isRendered = this.rendered.find(ele => ele === item.sample_name)
|
||||
if (isRendered) return
|
||||
}
|
||||
if (!item.sample_name) return
|
||||
// 轨迹影像参数
|
||||
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.sample_name}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||||
layer: `dsds:${item.sample_name}`,
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
}
|
||||
)
|
||||
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
|
||||
this.trackLineLayers.push(trackLineLayer)
|
||||
// 记录已渲染的轨迹，防止重复渲染
|
||||
this.rendered.push(item.sample_name)
|
||||
},
|
||||
// 潜水器轨迹图层
|
||||
divingImage(item) {
|
||||
// 查询轨迹是否渲染过，避免重复渲染
|
||||
if (this.rendered.length) {
|
||||
const isRendered = this.rendered.find(ele => ele === item.diving_sn)
|
||||
if (isRendered) return
|
||||
}
|
||||
if (!item.diving_sn) return
|
||||
// 轨迹影像参数
|
||||
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.diving_sn}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||||
layer: `dsds:${item.diving_sn}`,
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
}
|
||||
)
|
||||
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
|
||||
this.trackLineLayers.push(trackLineLayer)
|
||||
// 记录已渲染的轨迹，防止重复渲染
|
||||
this.rendered.push(item.diving_sn)
|
||||
},
|
||||
// 清除所有轨迹图层
|
||||
clearAll() {
|
||||
|
|
@ -658,10 +544,6 @@ export default {
|
|||
loadVectorLayer(`sample_station_${item.dataset_name}`, ["symbol"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearchMap", "dsds", "sample_name");
|
||||
}
|
||||
i++;
|
||||
|
||||
// this.addSingleLineImg(item.voyage_name, null)
|
||||
// this.dataList[i].show = true;
|
||||
// this.divingImage(item)
|
||||
})
|
||||
const voyageList = arr
|
||||
voyageList.map(item => {
|
||||
|
|
@ -671,11 +553,6 @@ export default {
|
|||
dataset_id: item.tsy_id
|
||||
}).then(res => {
|
||||
item.sampleArray = res.array
|
||||
// if (res.array.length) {
|
||||
// res.array.forEach(sample => {
|
||||
// this.sampleLineImage(sample)
|
||||
// })
|
||||
// }
|
||||
})
|
||||
}
|
||||
if (item.job_type === '站位作业') {
|
||||
|
|
@ -684,104 +561,12 @@ export default {
|
|||
dataset_id: item.tsy_id
|
||||
}).then(res => {
|
||||
item.sampleArray = res.array
|
||||
// 格式化坐标点
|
||||
// if (res.array.length) {
|
||||
// res.array.forEach(sample => {
|
||||
// this.sampleLineImage(sample)
|
||||
// });
|
||||
// }
|
||||
})
|
||||
}
|
||||
})
|
||||
this.dataList = voyageList
|
||||
},
|
||||
|
||||
// 初始化cesium
|
||||
initCesium() {
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
||||
this.viewer = new Cesium.Viewer('dataSearchMap', {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
baseLayerPicker: false,
|
||||
// 设置自定义底图
|
||||
imageryProviderViewModels: this.imageryViewModels,
|
||||
// 关闭默认的地形底图
|
||||
terrainProviderViewModels: [],
|
||||
fullscreenButton: false,
|
||||
selectionIndicator: false,
|
||||
homeButton: false,
|
||||
sceneModePicker: false,
|
||||
animation: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
navigationHelpButton: false
|
||||
})
|
||||
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.moon.show = false
|
||||
this.viewer.scene.fog.enabled = false
|
||||
this.viewer.scene.skyAtmosphere.show = false
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.skyBox.show = false
|
||||
this.viewer.scene.globe.enableLighting = false
|
||||
this.viewer.shadowMap.darkness = 0.8
|
||||
this.viewer.scene._sunBloom = false
|
||||
this.viewer.scene.globe.showGroundAtmosphere = false
|
||||
this.viewer.scene.postProcessStages.fxaa.enabled = true
|
||||
|
||||
// 单击 homeButton 返回初始位置
|
||||
// this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
|
||||
// e.cancel = true;
|
||||
// this.viewer.camera.flyTo({
|
||||
// // 指定相机初始位置
|
||||
// destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000),
|
||||
// duration: 0.5
|
||||
// });
|
||||
// });
|
||||
|
||||
this.viewer.camera.setView({
|
||||
// 指定相机初始位置
|
||||
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
|
||||
})
|
||||
|
||||
// // 增加海岸线
|
||||
// const coastline = new Cesium.WebMapTileServiceImageryProvider(
|
||||
// {
|
||||
// url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
|
||||
// layer: 'ougp:GSHHS_f_L1',
|
||||
// style: 'default',
|
||||
// format: 'image/png',
|
||||
// tileMatrixSetID: 'EPSG:4326',
|
||||
// tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
// }
|
||||
// )
|
||||
// this.viewer.imageryLayers.addImageryProvider(coastline)
|
||||
// 沉船摄影拼接图
|
||||
const shipline = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:正射影像图_GM输出_20240516/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
|
||||
layer: 'ougp:正射影像图_GM输出_20240516',
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
}
|
||||
)
|
||||
this.viewer.imageryLayers.addImageryProvider(shipline)
|
||||
// 增加6000米等深线
|
||||
const contour6000 = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: Vue.config.baseUrl + 'geoserver/gwc/service/wmts/rest/ougp:contour6000/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
|
||||
layer: 'ougp:contour6000',
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
}
|
||||
)
|
||||
this.viewer.imageryLayers.addImageryProvider(contour6000)
|
||||
},
|
||||
turnDeatilPage(item) {
|
||||
this.dialog5 = true
|
||||
regInfo({ voyage_name: item.voyage_name }).then(res => {
|
||||
|
|
|
|||
1305
src/views/hh.html
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/swiper-bundle.css'
|
||||
import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer'
|
||||
import {
|
||||
modifyCesiumMouseWheel, setImageryViewModels
|
||||
} from '@/utils/common'
|
||||
import { loadVectorLayer } from '@/utils/vector-layer-utils'
|
||||
import { ColorGenerator } from '@/utils/color-generator';
|
||||
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
|
||||
|
||||
const Cesium = window.Cesium
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
|
|
@ -296,11 +291,6 @@ export default {
|
|||
highlightLayer: null, // 存储当前高亮图层实例
|
||||
dataUpdateList: [],
|
||||
sampleDataUpdateList: [],
|
||||
viewer: null,
|
||||
// 地图图层基础地址
|
||||
CesiumHostAddr: '',
|
||||
// 保存自定义底图
|
||||
imageryViewModels: [],
|
||||
multipleSelection: [], // 当前选中的航次数组
|
||||
trackLayerMap: {}, // 存储每个航次对应的轨迹图层实例 { voyage_name: layerInstance }
|
||||
depthOptions: [4500, 6000], // 可扩展更多深度值
|
||||
|
|
@ -315,7 +305,6 @@ export default {
|
|||
}
|
||||
},
|
||||
created() {
|
||||
this.CesiumHostAddr = process.env.NODE_ENV === 'development' ? 'http://124.222.8.13:9801/' : `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`
|
||||
this.getVoyageList()
|
||||
this.getStatisticsNums()
|
||||
this.dataUpdate()
|
||||
|
|
@ -324,9 +313,9 @@ export default {
|
|||
mounted() {
|
||||
initMapbox("homeMap", {
|
||||
tileKey: "World_Imagery",
|
||||
zoom: 4,
|
||||
zoom: 1.5,
|
||||
center: [122, 15],
|
||||
minZoom: 2,
|
||||
minZoom: 1,
|
||||
maxZoom: 29,
|
||||
coastlineOn: false,
|
||||
contourOn: false
|
||||
|
|
@ -342,8 +331,6 @@ export default {
|
|||
loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp');
|
||||
loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp');
|
||||
});
|
||||
|
||||
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||||
},
|
||||
methods: {
|
||||
// 查询航次列表
|
||||
|
|
@ -369,83 +356,6 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
// 初始化cesium
|
||||
initCesium() {
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
||||
this.viewer = new Cesium.Viewer('homeMap', {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
baseLayerPicker: false,
|
||||
// 设置自定义底图
|
||||
imageryProviderViewModels: this.imageryViewModels,
|
||||
// 关闭默认的地形底图
|
||||
terrainProviderViewModels: [],
|
||||
fullscreenButton: false,
|
||||
selectionIndicator: false,
|
||||
homeButton: false,
|
||||
sceneModePicker: false,
|
||||
animation: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
navigationHelpButton: false
|
||||
})
|
||||
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.moon.show = false
|
||||
this.viewer.scene.fog.enabled = false
|
||||
this.viewer.scene.skyAtmosphere.show = false
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.skyBox.show = false
|
||||
this.viewer.scene.globe.enableLighting = false
|
||||
this.viewer.shadowMap.darkness = 0.8
|
||||
this.viewer.scene._sunBloom = false
|
||||
this.viewer.scene.globe.showGroundAtmosphere = false
|
||||
this.viewer.scene.postProcessStages.fxaa.enabled = true
|
||||
|
||||
// 单击 homeButton 返回初始位置
|
||||
// this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
|
||||
// e.cancel = true;
|
||||
// this.viewer.camera.flyTo({
|
||||
// // 指定相机初始位置
|
||||
// destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000),
|
||||
// duration: 0.5
|
||||
// });
|
||||
// });
|
||||
|
||||
this.viewer.camera.setView({
|
||||
// 指定相机初始位置
|
||||
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
|
||||
});
|
||||
|
||||
// 改写 Cesium 原生鼠标滚轮事件，地图缩放改为按下 Ctrl + 鼠标滚轮
|
||||
modifyCesiumMouseWheel(this.viewer);
|
||||
|
||||
// // 增加海岸线
|
||||
// const coastline = new Cesium.WebMapTileServiceImageryProvider(
|
||||
// {
|
||||
// url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
|
||||
// layer: 'ougp:GSHHS_f_L1',
|
||||
// style: 'default',
|
||||
// format: 'image/png',
|
||||
// tileMatrixSetID: 'EPSG:4326',
|
||||
// tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
// }
|
||||
// )
|
||||
// this.viewer.imageryLayers.addImageryProvider(coastline)
|
||||
// 沉船摄影拼接图
|
||||
const shipline = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:正射影像图_GM输出_20240516/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
|
||||
layer: 'ougp:正射影像图_GM输出_20240516',
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
}
|
||||
)
|
||||
this.viewer.imageryLayers.addImageryProvider(shipline)
|
||||
},
|
||||
// 行点击事件处理
|
||||
handleRowClick(row, column, event) {
|
||||
// 原高亮逻辑改为图层显示/隐藏控制
|
||||
|
|
@ -454,55 +364,8 @@ export default {
|
|||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility", visibility);
|
||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-line`, "visibility", visibility);
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
return;
|
||||
|
||||
// 如果点击的是当前已选中的行，则取消选择
|
||||
if (this.currentVoyage === row.voyage_name) {
|
||||
this.clearHighlight();
|
||||
return;
|
||||
}
|
||||
|
||||
// 设置新的当前选中航次
|
||||
this.currentVoyage = row.voyage_name;
|
||||
|
||||
// 先移除可能存在的旧高亮图层
|
||||
if (this.highlightLayer) {
|
||||
this.viewer.imageryLayers.remove(this.highlightLayer);
|
||||
this.highlightLayer = null;
|
||||
}
|
||||
|
||||
// 加载新高亮图层
|
||||
this.addHighlightLayer(row.voyage_name);
|
||||
},
|
||||
|
||||
// 添加高亮图层
|
||||
addHighlightLayer(voyageName) {
|
||||
const highlightLayer = new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${voyageName}-highlight/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||||
layer: `dsds:${voyageName}-highlight`,
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
});
|
||||
|
||||
this.highlightLayer = this.viewer.imageryLayers.addImageryProvider(highlightLayer);
|
||||
},
|
||||
|
||||
// 清除高亮
|
||||
clearHighlight() {
|
||||
// 移除地图上的高亮图层
|
||||
if (this.highlightLayer) {
|
||||
this.viewer.imageryLayers.remove(this.highlightLayer);
|
||||
this.highlightLayer = null;
|
||||
}
|
||||
|
||||
// 清除表格高亮
|
||||
this.currentVoyage = null;
|
||||
|
||||
// 如果需要清除行高亮，可以调用El-Table的方法
|
||||
this.$refs.multipleTable.setCurrentRow(null);
|
||||
},
|
||||
// 处理表格选择项变化
|
||||
handleSelectionChange(val) {
|
||||
// 获取新旧选中的航次名称数组
|
||||
|
|
@ -516,7 +379,6 @@ export default {
|
|||
|
||||
// 移除不再需要的轨迹图层
|
||||
voyagesToRemove.forEach(voyage => {
|
||||
// this.removeSingleLineImg(voyage);
|
||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "none");
|
||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "none");
|
||||
});
|
||||
|
|
@ -526,7 +388,6 @@ export default {
|
|||
// 从val中找出对应航次的完整数据项
|
||||
const correspondingItem = val.find(item => item.voyage_name === voyage);
|
||||
if (correspondingItem) {
|
||||
// this.addSingleLineImg(correspondingItem);
|
||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "visible");
|
||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "visible");
|
||||
}
|
||||
|
|
@ -535,42 +396,7 @@ export default {
|
|||
// 更新当前选中项
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
// 添加单个航次的轨迹图层
|
||||
addSingleLineImg(item) {
|
||||
const voyageName = item.voyage_name;
|
||||
|
||||
// 检查该航次图层是否已存在，避免重复添加
|
||||
if (this.trackLayerMap[voyageName]) {
|
||||
console.warn(`航次 ${voyageName} 的轨迹图层已存在`);
|
||||
return;
|
||||
}
|
||||
|
||||
const trackLine = new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${voyageName}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||||
layer: `dsds:${voyageName}`,
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
});
|
||||
|
||||
// 添加图层到Cesium并存储引用
|
||||
const layerInstance = this.viewer.imageryLayers.addImageryProvider(trackLine);
|
||||
this.trackLayerMap[voyageName] = layerInstance; // 以航次名为键存储图层实例
|
||||
},
|
||||
|
||||
// 移除单个航次的轨迹图层
|
||||
removeSingleLineImg(voyageName) {
|
||||
const layerInstance = this.trackLayerMap[voyageName];
|
||||
if (layerInstance) {
|
||||
// 从Cesium的imageryLayers中移除该图层
|
||||
this.viewer.imageryLayers.remove(layerInstance);
|
||||
// 删除映射表中对该图层的引用
|
||||
delete this.trackLayerMap[voyageName];
|
||||
} else {
|
||||
console.warn(`未找到航次 ${voyageName} 的轨迹图层`);
|
||||
}
|
||||
},
|
||||
toggleDepth(depth) {
|
||||
// **方案1: 如果要求同时只能有一个按钮被选中**
|
||||
// this.selectedDepths = [depth]; // 数组只保留当前点击的深度
|
||||
|
|
@ -579,50 +405,13 @@ export default {
|
|||
const index = this.selectedDepths.indexOf(depth);
|
||||
if (index > -1) {
|
||||
this.selectedDepths.splice(index, 1); // 如果已选中，则移除
|
||||
// this.removeSingleContourLine(depth); // 移除指定深度的单条等深线
|
||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "none");
|
||||
} else {
|
||||
this.selectedDepths.push(depth); // 如果未选中，则添加
|
||||
// this.addSingleContourLine(depth); // 添加指定深度的单条等深线
|
||||
Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "visible");
|
||||
}
|
||||
},
|
||||
// 添加单条指定深度的等深线
|
||||
addSingleContourLine(deep) {
|
||||
// 先检查该深度的图层是否已存在，避免重复创建
|
||||
if (this.contourLayerMap[deep]) {
|
||||
// 图层已存在，只需将其设置为显示（如果需要控制显示隐藏的话）
|
||||
console.warn(`等深线 ${deep} 米图层已存在`);
|
||||
return;
|
||||
}
|
||||
|
||||
const contour = new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/ougp:contour${deep}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||||
layer: `ougp:contour${deep}`,
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
});
|
||||
|
||||
// 添加图层并存储引用
|
||||
const layerInstance = this.viewer.imageryLayers.addImageryProvider(contour);
|
||||
this.contourLayerMap[deep] = layerInstance; // 以深度值为键存储图层实例
|
||||
},
|
||||
|
||||
// 移除单条指定深度的等深线
|
||||
removeSingleContourLine(deep) {
|
||||
// 根据深度值从映射表中获取对应的图层实例
|
||||
const layerInstance = this.contourLayerMap[deep];
|
||||
if (layerInstance) {
|
||||
// 从Cesium的imageryLayers中移除该图层
|
||||
this.viewer.imageryLayers.remove(layerInstance);
|
||||
// 删除映射表中对该图层的引用
|
||||
delete this.contourLayerMap[deep];
|
||||
} else {
|
||||
console.warn(`未找到 ${deep} 米等深线图层`);
|
||||
}
|
||||
},
|
||||
// 统计数据
|
||||
getStatisticsNums() {
|
||||
statisticsNums().then(res => {
|
||||
|
|
@ -1428,10 +1217,6 @@ export default {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.cesium-viewer-bottom {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#map {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,31 +2,17 @@
|
|||
<div class="statistics">
|
||||
<div class="banner">
|
||||
<div class="banner-title-picker">
|
||||
<el-dropdown
|
||||
class="banner-type-dropdown"
|
||||
trigger="click"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<el-dropdown class="banner-type-dropdown" trigger="click" @command="handleCommand">
|
||||
<span class="banner-select-trigger">
|
||||
<span class="banner-select-text">{{ currentTitle }}</span>
|
||||
<svg
|
||||
class="banner-select-chevron"
|
||||
viewBox="0 0 24 24"
|
||||
width="40"
|
||||
height="40"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<svg class="banner-select-chevron" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true"
|
||||
focusable="false">
|
||||
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
|
||||
</svg>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
|
||||
<el-dropdown-item command="全部无人航行潜水器">全部无人航行潜水器</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-for="item in titles"
|
||||
:key="item.tsy_id"
|
||||
:command="item.report_name"
|
||||
>
|
||||
<el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
|
||||
{{ item.report_name }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
|
|
@ -79,17 +65,15 @@
|
|||
|
||||
<script>
|
||||
/**
|
||||
* 无人航行潜水器汇总统计页，请求 `/report/platform/auv` 系列接口；交互与遥控潜水器汇总页一致（Cesium + ECharts）。
|
||||
* 无人航行潜水器汇总统计页，请求 `/report/platform/auv` 系列接口；交互与遥控潜水器汇总页一致（ECharts）。
|
||||
*/
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import PieChart from './components/PieChart.vue'
|
||||
import { setImageryViewModels } from '../../utils/common'
|
||||
import { reportList, platformAuv, auvUnit, auvUnitYear, auvDiving } from '../../api/statistics'
|
||||
import { filterDictItems } from '../../utils/index'
|
||||
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
|
||||
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
|
||||
import { ColorGenerator } from '@/utils/color-generator';
|
||||
const Cesium = window.Cesium
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -122,13 +106,6 @@ export default {
|
|||
unit: '个'
|
||||
}
|
||||
],
|
||||
// Cesium相关 - 参航单位地图
|
||||
baiduCesiumViewer: null,
|
||||
baiduCesiumEntities: [], // 存储参航单位标记实体
|
||||
viewer: null,
|
||||
// 地图图层基础地址
|
||||
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
|
||||
trackLineLayers: [],
|
||||
barData1: {},
|
||||
barData2: {},
|
||||
barData3: {},
|
||||
|
|
@ -155,24 +132,14 @@ export default {
|
|||
});
|
||||
initMapbox("voyageMap_auv", {
|
||||
tileKey: "GEBCO_basemap_NCEI",
|
||||
zoom: 4,
|
||||
zoom: 3,
|
||||
center: [113, 15],
|
||||
minZoom: 2,
|
||||
maxZoom: 29
|
||||
});
|
||||
|
||||
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||||
// this.initCesium() // 初始化航次地图
|
||||
// this.initBaiduCesium() // 初始化参航单位地图
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清理Cesium资源
|
||||
if (this.baiduCesiumViewer) {
|
||||
this.baiduCesiumViewer.destroy()
|
||||
}
|
||||
if (this.viewer) {
|
||||
this.viewer.destroy()
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 无人航行潜水器数据
|
||||
|
|
@ -231,11 +198,6 @@ export default {
|
|||
});
|
||||
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_auv");
|
||||
|
||||
// // 清除之前的标记
|
||||
// this.clearBaiduCesiumMarkers()
|
||||
|
||||
// // 创建参航单位标记
|
||||
// this.createBaiduCesiumMarkers(res.array)
|
||||
const typeCount = res.array.reduce((acc, unit) => {
|
||||
const type = unit.unit_type
|
||||
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
|
||||
|
|
@ -247,55 +209,7 @@ export default {
|
|||
}))
|
||||
})
|
||||
},
|
||||
// 创建参航单位Cesium标记点
|
||||
createBaiduCesiumMarkers(units) {
|
||||
if (!this.baiduCesiumViewer) return
|
||||
|
||||
const entities = []
|
||||
|
||||
units.forEach((item, index) => {
|
||||
// 创建标记实体
|
||||
const entity = this.baiduCesiumViewer.entities.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(item.unit_lon, item.unit_lat),
|
||||
billboard: {
|
||||
image: '../../../static/img/01.png', // 正常状态的图标
|
||||
width: 32,
|
||||
height: 32,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER
|
||||
},
|
||||
label: {
|
||||
text: item.unit_name,
|
||||
font: '14pt monospace',
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
outlineWidth: 2,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffset: new Cesium.Cartesian2(0, -40), // 标签在标记下方
|
||||
fillColor: Cesium.Color.WHITE,
|
||||
outlineColor: Cesium.Color.BLACK
|
||||
},
|
||||
unitData: item, // 存储原始数据
|
||||
index: index // 存储索引
|
||||
})
|
||||
entities.push(entity)
|
||||
})
|
||||
|
||||
this.baiduCesiumEntities = entities
|
||||
|
||||
// 调整视角以显示所有标记
|
||||
if (entities.length > 0) {
|
||||
this.baiduCesiumViewer.zoomTo(entities)
|
||||
}
|
||||
},
|
||||
// 清除参航单位标记
|
||||
clearBaiduCesiumMarkers() {
|
||||
if (this.baiduCesiumViewer && this.baiduCesiumEntities.length > 0) {
|
||||
this.baiduCesiumEntities.forEach(entity => {
|
||||
this.baiduCesiumViewer.entities.remove(entity)
|
||||
})
|
||||
this.baiduCesiumEntities = []
|
||||
}
|
||||
},
|
||||
// 潜次统计
|
||||
gitAuvDiving(params = {}) {
|
||||
auvDiving(params).then(res => {
|
||||
|
|
@ -306,108 +220,10 @@ export default {
|
|||
// 加载轨迹图层
|
||||
loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_auv", "dsds");
|
||||
i++;
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// this.addSingleLineImg(item)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 初始化Cesium - 参航单位地图
|
||||
initBaiduCesium() {
|
||||
this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_auv, {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
baseLayerPicker: false,
|
||||
imageryProviderViewModels: this.imageryViewModels,
|
||||
terrainProviderViewModels: [],
|
||||
fullscreenButton: false,
|
||||
selectionIndicator: false,
|
||||
homeButton: false,
|
||||
sceneModePicker: false,
|
||||
animation: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
navigationHelpButton: false
|
||||
})
|
||||
this.baiduCesiumViewer._cesiumWidget._creditContainer.style.display = 'none'
|
||||
this.baiduCesiumViewer.scene.sun.show = false
|
||||
this.baiduCesiumViewer.scene.moon.show = false
|
||||
this.baiduCesiumViewer.scene.fog.enabled = false
|
||||
this.baiduCesiumViewer.scene.skyAtmosphere.show = false
|
||||
this.baiduCesiumViewer.scene.sun.show = false
|
||||
this.baiduCesiumViewer.scene.skyBox.show = false
|
||||
this.baiduCesiumViewer.scene.globe.enableLighting = false
|
||||
this.baiduCesiumViewer.shadowMap.darkness = 0.8
|
||||
this.baiduCesiumViewer.scene._sunBloom = false
|
||||
this.baiduCesiumViewer.scene.globe.showGroundAtmosphere = false
|
||||
this.baiduCesiumViewer.scene.postProcessStages.fxaa.enabled = true
|
||||
|
||||
this.baiduCesiumViewer.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(114.4040, 30.5196, 4000000)
|
||||
})
|
||||
},
|
||||
// 初始化cesium
|
||||
initCesium() {
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
||||
this.viewer = new Cesium.Viewer(this.$refs.voyageMap_auv, {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
baseLayerPicker: false,
|
||||
// 设置自定义底图
|
||||
imageryProviderViewModels: this.imageryViewModels,
|
||||
// 关闭默认的地形底图
|
||||
terrainProviderViewModels: [],
|
||||
fullscreenButton: false,
|
||||
selectionIndicator: false,
|
||||
homeButton: false,
|
||||
sceneModePicker: false,
|
||||
animation: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
navigationHelpButton: false
|
||||
})
|
||||
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.moon.show = false
|
||||
this.viewer.scene.fog.enabled = false
|
||||
this.viewer.scene.skyAtmosphere.show = false
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.skyBox.show = false
|
||||
this.viewer.scene.globe.enableLighting = false
|
||||
this.viewer.shadowMap.darkness = 0.8
|
||||
this.viewer.scene._sunBloom = false
|
||||
this.viewer.scene.globe.showGroundAtmosphere = false
|
||||
this.viewer.scene.postProcessStages.fxaa.enabled = true
|
||||
|
||||
this.viewer.camera.setView({
|
||||
// 指定相机初始位置
|
||||
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
|
||||
})
|
||||
},
|
||||
// 添加轨迹图层
|
||||
addSingleLineImg(item) {
|
||||
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.diving_sn}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||||
layer: `dsds:${item.diving_sn}`,
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
}
|
||||
)
|
||||
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
|
||||
this.trackLineLayers.push(trackLineLayer)
|
||||
},
|
||||
// 移除轨迹图层
|
||||
removeSingleLineImg() {
|
||||
if (this.trackLineLayers.length) {
|
||||
this.trackLineLayers.forEach(line => {
|
||||
this.viewer.imageryLayers.remove(line)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 参潜单位年度
|
||||
gitAuvUnitYear(params = {}) {
|
||||
auvUnitYear(params).then(res => {
|
||||
|
|
|
|||
|
|
@ -2,31 +2,17 @@
|
|||
<div class="statistics">
|
||||
<div class="banner">
|
||||
<div class="banner-title-picker">
|
||||
<el-dropdown
|
||||
class="banner-type-dropdown"
|
||||
trigger="click"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<el-dropdown class="banner-type-dropdown" trigger="click" @command="handleCommand">
|
||||
<span class="banner-select-trigger">
|
||||
<span class="banner-select-text">{{ currentTitle }}</span>
|
||||
<svg
|
||||
class="banner-select-chevron"
|
||||
viewBox="0 0 24 24"
|
||||
width="40"
|
||||
height="40"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<svg class="banner-select-chevron" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true"
|
||||
focusable="false">
|
||||
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
|
||||
</svg>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
|
||||
<el-dropdown-item command="全部载人潜水器">全部载人潜水器</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-for="item in titles"
|
||||
:key="item.tsy_id"
|
||||
:command="item.report_name"
|
||||
>
|
||||
<el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
|
||||
{{ item.report_name }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
|
|
@ -54,49 +40,24 @@
|
|||
<!-- echarts板块-->
|
||||
<div class="echarts-module">
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
:title="barData1.title"
|
||||
:chart-data="barData1.salesData"
|
||||
:categories="barData1.productCategories"
|
||||
chart-type="single"
|
||||
/>
|
||||
<BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
|
||||
chart-type="single" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
:title="barData2.title"
|
||||
:chart-data="barData2.salesData"
|
||||
:categories="barData2.productCategories"
|
||||
chart-type="stacked"
|
||||
stack-name="新增单位数"
|
||||
/>
|
||||
<BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
|
||||
chart-type="stacked" stack-name="新增单位数" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
:title="barData3.title"
|
||||
:chart-data="barData3.salesData"
|
||||
:categories="barData3.productCategories"
|
||||
/>
|
||||
<BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
:title="barData4.title"
|
||||
:chart-data="barData4.salesData"
|
||||
:categories="barData4.productCategories"
|
||||
/>
|
||||
<BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
:title="barData5.title"
|
||||
:chart-data="barData5.salesData"
|
||||
:categories="barData5.productCategories"
|
||||
/>
|
||||
<BarChart :title="barData5.title" :chart-data="barData5.salesData" :categories="barData5.productCategories" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<PieChart
|
||||
:chart-data="pieData"
|
||||
title="下潜单位类型"
|
||||
chart-type="ring"
|
||||
/>
|
||||
<PieChart :chart-data="pieData" title="下潜单位类型" chart-type="ring" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -111,7 +72,6 @@ import { filterDictItems } from '../../utils/index'
|
|||
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
|
||||
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
|
||||
import { ColorGenerator } from '@/utils/color-generator';
|
||||
const Cesium = window.Cesium
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -144,13 +104,6 @@ export default {
|
|||
unit: '个'
|
||||
}
|
||||
],
|
||||
// Cesium相关 - 参航单位地图
|
||||
baiduCesiumViewer: null,
|
||||
baiduCesiumEntities: [], // 存储参航单位标记实体
|
||||
viewer: null,
|
||||
// 地图图层基础地址
|
||||
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
|
||||
trackLineLayers: [],
|
||||
barData1: {},
|
||||
barData2: {},
|
||||
barData3: {},
|
||||
|
|
@ -177,24 +130,14 @@ export default {
|
|||
});
|
||||
initMapbox("voyageMap_hov", {
|
||||
tileKey: "GEBCO_basemap_NCEI",
|
||||
zoom: 4,
|
||||
zoom: 3,
|
||||
center: [113, 15],
|
||||
minZoom: 2,
|
||||
maxZoom: 29
|
||||
});
|
||||
|
||||
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||||
// this.initCesium() // 初始化航次地图
|
||||
// this.initBaiduCesium() // 初始化参航单位地图
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清理Cesium资源
|
||||
if (this.baiduCesiumViewer) {
|
||||
this.baiduCesiumViewer.destroy()
|
||||
}
|
||||
if (this.viewer) {
|
||||
this.viewer.destroy()
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 载人潜水器数据
|
||||
|
|
@ -253,11 +196,6 @@ export default {
|
|||
});
|
||||
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_hov");
|
||||
|
||||
// // 清除之前的标记
|
||||
// this.clearBaiduCesiumMarkers()
|
||||
|
||||
// // 创建参航单位标记
|
||||
// this.createBaiduCesiumMarkers(res.array)
|
||||
const typeCount = res.array.reduce((acc, unit) => {
|
||||
const type = unit.unit_type
|
||||
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
|
||||
|
|
@ -269,55 +207,7 @@ export default {
|
|||
}))
|
||||
})
|
||||
},
|
||||
// 创建参航单位Cesium标记点
|
||||
createBaiduCesiumMarkers(units) {
|
||||
if (!this.baiduCesiumViewer) return
|
||||
|
||||
const entities = []
|
||||
|
||||
units.forEach((item, index) => {
|
||||
// 创建标记实体
|
||||
const entity = this.baiduCesiumViewer.entities.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(item.unit_lon, item.unit_lat),
|
||||
billboard: {
|
||||
image: '../../../static/img/01.png', // 正常状态的图标
|
||||
width: 32,
|
||||
height: 32,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER
|
||||
},
|
||||
label: {
|
||||
text: item.unit_name,
|
||||
font: '14pt monospace',
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
outlineWidth: 2,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffset: new Cesium.Cartesian2(0, -40), // 标签在标记下方
|
||||
fillColor: Cesium.Color.WHITE,
|
||||
outlineColor: Cesium.Color.BLACK
|
||||
},
|
||||
unitData: item, // 存储原始数据
|
||||
index: index // 存储索引
|
||||
})
|
||||
entities.push(entity)
|
||||
})
|
||||
|
||||
this.baiduCesiumEntities = entities
|
||||
|
||||
// 调整视角以显示所有标记
|
||||
if (entities.length > 0) {
|
||||
this.baiduCesiumViewer.zoomTo(entities)
|
||||
}
|
||||
},
|
||||
// 清除参航单位标记
|
||||
clearBaiduCesiumMarkers() {
|
||||
if (this.baiduCesiumViewer && this.baiduCesiumEntities.length > 0) {
|
||||
this.baiduCesiumEntities.forEach(entity => {
|
||||
this.baiduCesiumViewer.entities.remove(entity)
|
||||
})
|
||||
this.baiduCesiumEntities = []
|
||||
}
|
||||
},
|
||||
// 潜次统计
|
||||
gitHovDiving(params = {}) {
|
||||
hovDiving(params).then(res => {
|
||||
|
|
@ -333,103 +223,7 @@ export default {
|
|||
})
|
||||
})
|
||||
},
|
||||
// 初始化Cesium - 参航单位地图
|
||||
initBaiduCesium() {
|
||||
this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_hov, {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
baseLayerPicker: false,
|
||||
imageryProviderViewModels: this.imageryViewModels,
|
||||
terrainProviderViewModels: [],
|
||||
fullscreenButton: false,
|
||||
selectionIndicator: false,
|
||||
homeButton: false,
|
||||
sceneModePicker: false,
|
||||
animation: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
navigationHelpButton: false
|
||||
})
|
||||
this.baiduCesiumViewer._cesiumWidget._creditContainer.style.display = 'none'
|
||||
this.baiduCesiumViewer.scene.sun.show = false
|
||||
this.baiduCesiumViewer.scene.moon.show = false
|
||||
this.baiduCesiumViewer.scene.fog.enabled = false
|
||||
this.baiduCesiumViewer.scene.skyAtmosphere.show = false
|
||||
this.baiduCesiumViewer.scene.sun.show = false
|
||||
this.baiduCesiumViewer.scene.skyBox.show = false
|
||||
this.baiduCesiumViewer.scene.globe.enableLighting = false
|
||||
this.baiduCesiumViewer.shadowMap.darkness = 0.8
|
||||
this.baiduCesiumViewer.scene._sunBloom = false
|
||||
this.baiduCesiumViewer.scene.globe.showGroundAtmosphere = false
|
||||
this.baiduCesiumViewer.scene.postProcessStages.fxaa.enabled = true
|
||||
|
||||
this.baiduCesiumViewer.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(114.4040, 30.5196, 4000000)
|
||||
})
|
||||
},
|
||||
// 初始化cesium
|
||||
initCesium() {
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
||||
this.viewer = new Cesium.Viewer('voyageMap_hov', {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
baseLayerPicker: false,
|
||||
// 设置自定义底图
|
||||
imageryProviderViewModels: this.imageryViewModels,
|
||||
// 关闭默认的地形底图
|
||||
terrainProviderViewModels: [],
|
||||
fullscreenButton: false,
|
||||
selectionIndicator: false,
|
||||
homeButton: false,
|
||||
sceneModePicker: false,
|
||||
animation: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
navigationHelpButton: false
|
||||
})
|
||||
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.moon.show = false
|
||||
this.viewer.scene.fog.enabled = false
|
||||
this.viewer.scene.skyAtmosphere.show = false
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.skyBox.show = false
|
||||
this.viewer.scene.globe.enableLighting = false
|
||||
this.viewer.shadowMap.darkness = 0.8
|
||||
this.viewer.scene._sunBloom = false
|
||||
this.viewer.scene.globe.showGroundAtmosphere = false
|
||||
this.viewer.scene.postProcessStages.fxaa.enabled = true
|
||||
|
||||
this.viewer.camera.setView({
|
||||
// 指定相机初始位置
|
||||
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
|
||||
})
|
||||
},
|
||||
// 添加轨迹图层
|
||||
addSingleLineImg(item) {
|
||||
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.diving_sn}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||||
layer: `dsds:${item.diving_sn}`,
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
}
|
||||
)
|
||||
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
|
||||
this.trackLineLayers.push(trackLineLayer)
|
||||
},
|
||||
// 移除轨迹图层
|
||||
removeSingleLineImg() {
|
||||
if (this.trackLineLayers.length) {
|
||||
this.trackLineLayers.forEach(line => {
|
||||
this.viewer.imageryLayers.remove(line)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 参潜单位年度
|
||||
gitHovUnitYear(params = {}) {
|
||||
hovUnitYear(params).then(res => {
|
||||
|
|
@ -576,24 +370,29 @@ export default {
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.value {
|
||||
font-size: 56px;
|
||||
font-weight: bold;
|
||||
|
||||
.unit {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-module {
|
||||
padding: 50px 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 50px;
|
||||
|
||||
.bezel {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
|
@ -611,6 +410,7 @@ export default {
|
|||
z-index: 8888;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.map-year {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
|
|
@ -621,6 +421,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.echarts-module {
|
||||
padding: 0 50px 50px;
|
||||
display: grid;
|
||||
|
|
|
|||
|
|
@ -2,31 +2,17 @@
|
|||
<div class="statistics">
|
||||
<div class="banner">
|
||||
<div class="banner-title-picker">
|
||||
<el-dropdown
|
||||
class="banner-type-dropdown"
|
||||
trigger="click"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<el-dropdown class="banner-type-dropdown" trigger="click" @command="handleCommand">
|
||||
<span class="banner-select-trigger">
|
||||
<span class="banner-select-text">{{ currentTitle }}</span>
|
||||
<svg
|
||||
class="banner-select-chevron"
|
||||
viewBox="0 0 24 24"
|
||||
width="40"
|
||||
height="40"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<svg class="banner-select-chevron" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true"
|
||||
focusable="false">
|
||||
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
|
||||
</svg>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
|
||||
<el-dropdown-item command="全部遥控潜水器">全部遥控潜水器</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-for="item in titles"
|
||||
:key="item.tsy_id"
|
||||
:command="item.report_name"
|
||||
>
|
||||
<el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
|
||||
{{ item.report_name }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
|
|
@ -83,13 +69,11 @@
|
|||
*/
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import PieChart from './components/PieChart.vue'
|
||||
import { setImageryViewModels } from '../../utils/common'
|
||||
import { reportList, platformRov, rovUnit, rovUnitYear, rovDiving } from '../../api/statistics'
|
||||
import { filterDictItems } from '../../utils/index'
|
||||
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
|
||||
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
|
||||
import { ColorGenerator } from '@/utils/color-generator';
|
||||
const Cesium = window.Cesium
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -122,13 +106,6 @@ export default {
|
|||
unit: '个'
|
||||
}
|
||||
],
|
||||
// Cesium相关 - 参航单位地图
|
||||
baiduCesiumViewer: null,
|
||||
baiduCesiumEntities: [], // 存储参航单位标记实体
|
||||
viewer: null,
|
||||
// 地图图层基础地址
|
||||
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
|
||||
trackLineLayers: [],
|
||||
barData1: {},
|
||||
barData2: {},
|
||||
barData3: {},
|
||||
|
|
@ -155,24 +132,14 @@ export default {
|
|||
});
|
||||
initMapbox("voyageMap_rov", {
|
||||
tileKey: "GEBCO_basemap_NCEI",
|
||||
zoom: 4,
|
||||
zoom: 3,
|
||||
center: [113, 15],
|
||||
minZoom: 2,
|
||||
maxZoom: 29
|
||||
});
|
||||
|
||||
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||||
// this.initCesium() // 初始化航次地图
|
||||
// this.initBaiduCesium() // 初始化参航单位地图
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清理Cesium资源
|
||||
if (this.baiduCesiumViewer) {
|
||||
this.baiduCesiumViewer.destroy()
|
||||
}
|
||||
if (this.viewer) {
|
||||
this.viewer.destroy()
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 遥控潜水器数据
|
||||
|
|
@ -184,7 +151,7 @@ export default {
|
|||
// 选择遥控潜水器
|
||||
handleCommand(command) {
|
||||
this.currentTitle = command
|
||||
this.removeSingleLineImg()
|
||||
// this.removeSingleLineImg()
|
||||
if (command === '全部遥控潜水器') {
|
||||
this.getRovList()
|
||||
this.gitRovDiving()
|
||||
|
|
@ -231,11 +198,6 @@ export default {
|
|||
});
|
||||
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_rov");
|
||||
|
||||
// // 清除之前的标记
|
||||
// this.clearBaiduCesiumMarkers()
|
||||
|
||||
// // 创建参航单位标记
|
||||
// this.createBaiduCesiumMarkers(res.array)
|
||||
const typeCount = res.array.reduce((acc, unit) => {
|
||||
const type = unit.unit_type
|
||||
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
|
||||
|
|
@ -247,55 +209,7 @@ export default {
|
|||
}))
|
||||
})
|
||||
},
|
||||
// 创建参航单位Cesium标记点
|
||||
createBaiduCesiumMarkers(units) {
|
||||
if (!this.baiduCesiumViewer) return
|
||||
|
||||
const entities = []
|
||||
|
||||
units.forEach((item, index) => {
|
||||
// 创建标记实体
|
||||
const entity = this.baiduCesiumViewer.entities.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(item.unit_lon, item.unit_lat),
|
||||
billboard: {
|
||||
image: '../../../static/img/01.png', // 正常状态的图标
|
||||
width: 32,
|
||||
height: 32,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER
|
||||
},
|
||||
label: {
|
||||
text: item.unit_name,
|
||||
font: '14pt monospace',
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
outlineWidth: 2,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffset: new Cesium.Cartesian2(0, -40), // 标签在标记下方
|
||||
fillColor: Cesium.Color.WHITE,
|
||||
outlineColor: Cesium.Color.BLACK
|
||||
},
|
||||
unitData: item, // 存储原始数据
|
||||
index: index // 存储索引
|
||||
})
|
||||
entities.push(entity)
|
||||
})
|
||||
|
||||
this.baiduCesiumEntities = entities
|
||||
|
||||
// 调整视角以显示所有标记
|
||||
if (entities.length > 0) {
|
||||
this.baiduCesiumViewer.zoomTo(entities)
|
||||
}
|
||||
},
|
||||
// 清除参航单位标记
|
||||
clearBaiduCesiumMarkers() {
|
||||
if (this.baiduCesiumViewer && this.baiduCesiumEntities.length > 0) {
|
||||
this.baiduCesiumEntities.forEach(entity => {
|
||||
this.baiduCesiumViewer.entities.remove(entity)
|
||||
})
|
||||
this.baiduCesiumEntities = []
|
||||
}
|
||||
},
|
||||
// 潜次统计
|
||||
gitRovDiving(params = {}) {
|
||||
rovDiving(params).then(res => {
|
||||
|
|
@ -306,108 +220,9 @@ export default {
|
|||
// 加载轨迹图层
|
||||
loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_rov", "dsds");
|
||||
i++;
|
||||
|
||||
// this.addSingleLineImg(item)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 初始化Cesium - 参航单位地图
|
||||
initBaiduCesium() {
|
||||
this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_rov, {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
baseLayerPicker: false,
|
||||
imageryProviderViewModels: this.imageryViewModels,
|
||||
terrainProviderViewModels: [],
|
||||
fullscreenButton: false,
|
||||
selectionIndicator: false,
|
||||
homeButton: false,
|
||||
sceneModePicker: false,
|
||||
animation: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
navigationHelpButton: false
|
||||
})
|
||||
this.baiduCesiumViewer._cesiumWidget._creditContainer.style.display = 'none'
|
||||
this.baiduCesiumViewer.scene.sun.show = false
|
||||
this.baiduCesiumViewer.scene.moon.show = false
|
||||
this.baiduCesiumViewer.scene.fog.enabled = false
|
||||
this.baiduCesiumViewer.scene.skyAtmosphere.show = false
|
||||
this.baiduCesiumViewer.scene.sun.show = false
|
||||
this.baiduCesiumViewer.scene.skyBox.show = false
|
||||
this.baiduCesiumViewer.scene.globe.enableLighting = false
|
||||
this.baiduCesiumViewer.shadowMap.darkness = 0.8
|
||||
this.baiduCesiumViewer.scene._sunBloom = false
|
||||
this.baiduCesiumViewer.scene.globe.showGroundAtmosphere = false
|
||||
this.baiduCesiumViewer.scene.postProcessStages.fxaa.enabled = true
|
||||
|
||||
this.baiduCesiumViewer.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(114.4040, 30.5196, 4000000)
|
||||
})
|
||||
},
|
||||
// 初始化cesium
|
||||
initCesium() {
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
||||
this.viewer = new Cesium.Viewer(this.$refs.voyageMap_rov, {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
baseLayerPicker: false,
|
||||
// 设置自定义底图
|
||||
imageryProviderViewModels: this.imageryViewModels,
|
||||
// 关闭默认的地形底图
|
||||
terrainProviderViewModels: [],
|
||||
fullscreenButton: false,
|
||||
selectionIndicator: false,
|
||||
homeButton: false,
|
||||
sceneModePicker: false,
|
||||
animation: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
navigationHelpButton: false
|
||||
})
|
||||
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.moon.show = false
|
||||
this.viewer.scene.fog.enabled = false
|
||||
this.viewer.scene.skyAtmosphere.show = false
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.skyBox.show = false
|
||||
this.viewer.scene.globe.enableLighting = false
|
||||
this.viewer.shadowMap.darkness = 0.8
|
||||
this.viewer.scene._sunBloom = false
|
||||
this.viewer.scene.globe.showGroundAtmosphere = false
|
||||
this.viewer.scene.postProcessStages.fxaa.enabled = true
|
||||
|
||||
this.viewer.camera.setView({
|
||||
// 指定相机初始位置
|
||||
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
|
||||
})
|
||||
},
|
||||
// 添加轨迹图层
|
||||
addSingleLineImg(item) {
|
||||
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.diving_sn}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||||
layer: `dsds:${item.diving_sn}`,
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
}
|
||||
)
|
||||
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
|
||||
this.trackLineLayers.push(trackLineLayer)
|
||||
},
|
||||
// 移除轨迹图层
|
||||
removeSingleLineImg() {
|
||||
if (this.trackLineLayers.length) {
|
||||
this.trackLineLayers.forEach(line => {
|
||||
this.viewer.imageryLayers.remove(line)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 参潜单位年度
|
||||
gitRovUnitYear(params = {}) {
|
||||
rovUnitYear(params).then(res => {
|
||||
|
|
|
|||
|
|
@ -2,31 +2,17 @@
|
|||
<div class="statistics">
|
||||
<div class="banner">
|
||||
<div class="banner-title-picker">
|
||||
<el-dropdown
|
||||
class="banner-type-dropdown"
|
||||
trigger="click"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<el-dropdown class="banner-type-dropdown" trigger="click" @command="handleCommand">
|
||||
<span class="banner-select-trigger">
|
||||
<span class="banner-select-text">{{ currentTitle }}</span>
|
||||
<svg
|
||||
class="banner-select-chevron"
|
||||
viewBox="0 0 24 24"
|
||||
width="40"
|
||||
height="40"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<svg class="banner-select-chevron" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true"
|
||||
focusable="false">
|
||||
<path fill="#ffffff" d="M7 10l5 5 5-5H7z" />
|
||||
</svg>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown" class="banner-type-dropdown-popper">
|
||||
<el-dropdown-item command="全部科考船">全部科考船</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-for="item in titles"
|
||||
:key="item.tsy_id"
|
||||
:command="item.report_name"
|
||||
>
|
||||
<el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
|
||||
{{ item.report_name }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
|
|
@ -50,16 +36,8 @@
|
|||
<div class="map-title">航次地图</div>
|
||||
<div class="map-year-panel">
|
||||
<span class="map-year-label">年份</span>
|
||||
<el-date-picker
|
||||
v-model="voyageYear"
|
||||
type="year"
|
||||
size="small"
|
||||
placeholder="全部"
|
||||
class="map-year"
|
||||
clearable
|
||||
format="yyyy"
|
||||
@change="selectVoyageYear"
|
||||
/>
|
||||
<el-date-picker v-model="voyageYear" type="year" size="small" placeholder="全部" class="map-year" clearable
|
||||
format="yyyy" @change="selectVoyageYear" />
|
||||
</div>
|
||||
<div id="voyageMap_ship" ref="voyageMap_ship" style="height: 100%;width:100%;" />
|
||||
</div>
|
||||
|
|
@ -71,21 +49,12 @@
|
|||
chart-type="single" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
:title="barDataDays.title"
|
||||
:chart-data="barDataDays.salesData"
|
||||
:categories="barDataDays.productCategories"
|
||||
chart-type="single"
|
||||
/>
|
||||
<BarChart :title="barDataDays.title" :chart-data="barDataDays.salesData"
|
||||
:categories="barDataDays.productCategories" chart-type="single" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
:title="barData2.title"
|
||||
:chart-data="barData2.salesData"
|
||||
:categories="barData2.productCategories"
|
||||
chart-type="stacked"
|
||||
stack-name="新增单位数"
|
||||
/>
|
||||
<BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
|
||||
chart-type="stacked" stack-name="新增单位数" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
|
||||
|
|
@ -104,15 +73,12 @@
|
|||
import Vue from 'vue'
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import PieChart from './components/PieChart.vue'
|
||||
import { setImageryViewModels } from '../../utils/common'
|
||||
import { reportList, shipTotal, shipUnit, shipUnitYear, shipVoyage } from '../../api/statistics'
|
||||
import { getYearRange, filterDictItems } from '../../utils/index'
|
||||
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
|
||||
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
|
||||
import { ColorGenerator } from '@/utils/color-generator';
|
||||
|
||||
const Cesium = window.Cesium
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BarChart,
|
||||
|
|
@ -149,13 +115,6 @@ export default {
|
|||
unit: 'km'
|
||||
}
|
||||
],
|
||||
// Cesium相关 - 参航单位地图
|
||||
baiduCesiumViewer: null,
|
||||
baiduCesiumEntities: [], // 存储参航单位标记实体
|
||||
viewer: null,
|
||||
// 地图图层基础地址
|
||||
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
|
||||
trackLineLayers: [],
|
||||
voyageYear: '',
|
||||
barData1: {},
|
||||
/** 年度航次天数（与 barData1 同源接口按年） */
|
||||
|
|
@ -184,23 +143,14 @@ export default {
|
|||
});
|
||||
initMapbox("voyageMap_ship", {
|
||||
tileKey: "GEBCO_basemap_NCEI",
|
||||
zoom: 4,
|
||||
zoom: 3,
|
||||
center: [113, 15],
|
||||
minZoom: 2,
|
||||
maxZoom: 29
|
||||
});
|
||||
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||||
// this.initBaiduCesium() // 初始化参航单位地图
|
||||
// this.initCesium() // 初始化航次地图
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清理Cesium资源
|
||||
if (this.baiduCesiumViewer) {
|
||||
this.baiduCesiumViewer.destroy()
|
||||
}
|
||||
if (this.viewer) {
|
||||
this.viewer.destroy()
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 科考船数据
|
||||
|
|
@ -212,7 +162,7 @@ export default {
|
|||
// 选择科考船
|
||||
handleCommand(command) {
|
||||
this.currentTitle = command
|
||||
this.removeSingleLineImg()
|
||||
// this.removeSingleLineImg()
|
||||
if (command === '全部科考船') {
|
||||
this.getShipList()
|
||||
this.gitShipVoyage()
|
||||
|
|
@ -260,11 +210,6 @@ export default {
|
|||
});
|
||||
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_ship");
|
||||
|
||||
// // 清除之前的标记
|
||||
// this.clearBaiduCesiumMarkers()
|
||||
// // 创建参航单位标记
|
||||
// this.createBaiduCesiumMarkers(res.array)
|
||||
|
||||
const typeCount = res.array.reduce((acc, unit) => {
|
||||
const type = unit.unit_type
|
||||
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
|
||||
|
|
@ -276,55 +221,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 = []
|
||||
}
|
||||
},
|
||||
// 航次统计
|
||||
gitShipVoyage(params = {}) {
|
||||
shipVoyage(params).then(res => {
|
||||
|
|
@ -335,115 +232,15 @@ export default {
|
|||
// 加载轨迹图层
|
||||
loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_ship", "dsds");
|
||||
i++;
|
||||
|
||||
// this.addSingleLineImg(item)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 初始化Cesium - 参航单位地图
|
||||
initBaiduCesium() {
|
||||
this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_ship, {
|
||||
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_ship, {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
baseLayerPicker: false,
|
||||
// 设置自定义底图
|
||||
imageryProviderViewModels: this.imageryViewModels,
|
||||
// 关闭默认的地形底图
|
||||
terrainProviderViewModels: [],
|
||||
fullscreenButton: false,
|
||||
selectionIndicator: false,
|
||||
homeButton: false,
|
||||
sceneModePicker: false,
|
||||
animation: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
navigationHelpButton: false
|
||||
})
|
||||
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.moon.show = false
|
||||
this.viewer.scene.fog.enabled = false
|
||||
this.viewer.scene.skyAtmosphere.show = false
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.skyBox.show = false
|
||||
this.viewer.scene.globe.enableLighting = false
|
||||
this.viewer.shadowMap.darkness = 0.8
|
||||
this.viewer.scene._sunBloom = false
|
||||
this.viewer.scene.globe.showGroundAtmosphere = false
|
||||
this.viewer.scene.postProcessStages.fxaa.enabled = true
|
||||
|
||||
this.viewer.camera.setView({
|
||||
// 指定相机初始位置
|
||||
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
|
||||
});
|
||||
|
||||
},
|
||||
// 添加轨迹图层
|
||||
addSingleLineImg(item) {
|
||||
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.voyage_name}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||||
layer: `dsds:${item.voyage_name}`,
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
tileMatrixSetID: 'EPSG:4326',
|
||||
tilingScheme: new Cesium.GeographicTilingScheme()
|
||||
}
|
||||
)
|
||||
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
|
||||
this.trackLineLayers.push(trackLineLayer)
|
||||
},
|
||||
// 移除轨迹图层
|
||||
removeSingleLineImg() {
|
||||
if (this.trackLineLayers.length) {
|
||||
this.trackLineLayers.forEach(line => {
|
||||
this.viewer.imageryLayers.remove(line)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 选择航次地图年份
|
||||
selectVoyageYear(val) {
|
||||
const shipName = this.currentTitle === '全部科考船' ? '' : this.currentTitle
|
||||
if (val) {
|
||||
this.removeSingleLineImg()
|
||||
// this.removeSingleLineImg()
|
||||
const params = getYearRange(val)
|
||||
this.gitShipVoyage({ ...params, ship_name: shipName })
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -13,24 +13,10 @@
|
|||
<div class="unit-toolbar-inner">
|
||||
<div class="unit-filter-box">
|
||||
<span class="banner-unit-label">统计单位</span>
|
||||
<el-select
|
||||
v-model="selectedUnits"
|
||||
class="banner-unit-select"
|
||||
multiple
|
||||
filterable
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="请选择单位（不选表示全部）"
|
||||
value-key="unit_name"
|
||||
collapse-tags
|
||||
@change="onBannerUnitsChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="unit in unitOptions"
|
||||
:key="unit.unit_id || unit.unit_name"
|
||||
:label="unit.unit_name"
|
||||
:value="unit"
|
||||
/>
|
||||
<el-select v-model="selectedUnits" class="banner-unit-select" multiple filterable clearable size="small"
|
||||
placeholder="请选择单位（不选表示全部）" value-key="unit_name" collapse-tags @change="onBannerUnitsChange">
|
||||
<el-option v-for="unit in unitOptions" :key="unit.unit_id || unit.unit_name" :label="unit.unit_name"
|
||||
:value="unit" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -45,16 +31,8 @@
|
|||
<div class="map-title">航次地图</div>
|
||||
<div class="map-year-panel">
|
||||
<span class="map-year-label">年份</span>
|
||||
<el-date-picker
|
||||
v-model="voyageYear"
|
||||
type="year"
|
||||
size="small"
|
||||
placeholder="全部"
|
||||
class="map-year"
|
||||
clearable
|
||||
format="yyyy"
|
||||
@change="selectVoyageYear"
|
||||
/>
|
||||
<el-date-picker v-model="voyageYear" type="year" size="small" placeholder="全部" class="map-year" clearable
|
||||
format="yyyy" @change="selectVoyageYear" />
|
||||
</div>
|
||||
<div id="voyageMap_uuv" ref="voyageMap_uuv" style="height: 100%;width:100%;" />
|
||||
</div>
|
||||
|
|
@ -62,47 +40,24 @@
|
|||
<!-- echarts板块-->
|
||||
<div class="echarts-module">
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
:title="barVoyageCount.title"
|
||||
:chart-data="barVoyageCount.salesData"
|
||||
:categories="barVoyageCount.productCategories"
|
||||
chart-type="single"
|
||||
/>
|
||||
<BarChart :title="barVoyageCount.title" :chart-data="barVoyageCount.salesData"
|
||||
:categories="barVoyageCount.productCategories" chart-type="single" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
:title="barVoyageDays.title"
|
||||
:chart-data="barVoyageDays.salesData"
|
||||
:categories="barVoyageDays.productCategories"
|
||||
chart-type="single"
|
||||
/>
|
||||
<BarChart :title="barVoyageDays.title" :chart-data="barVoyageDays.salesData"
|
||||
:categories="barVoyageDays.productCategories" chart-type="single" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
:title="barPeopleDiving.title"
|
||||
:chart-data="barPeopleDiving.salesData"
|
||||
:categories="barPeopleDiving.productCategories"
|
||||
chart-type="multiple"
|
||||
/>
|
||||
<BarChart :title="barPeopleDiving.title" :chart-data="barPeopleDiving.salesData"
|
||||
:categories="barPeopleDiving.productCategories" chart-type="multiple" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
:title="barFirstPeopleDiving.title"
|
||||
:chart-data="barFirstPeopleDiving.salesData"
|
||||
:categories="barFirstPeopleDiving.productCategories"
|
||||
chart-type="multiple"
|
||||
/>
|
||||
<BarChart :title="barFirstPeopleDiving.title" :chart-data="barFirstPeopleDiving.salesData"
|
||||
:categories="barFirstPeopleDiving.productCategories" chart-type="multiple" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
:title="mixedMileage.title"
|
||||
:chart-data="mixedMileage.series"
|
||||
:categories="mixedMileage.categories"
|
||||
chart-type="mixed"
|
||||
:dual-y-axis="true"
|
||||
left-axis-name="次数"
|
||||
right-axis-name="天数"
|
||||
/>
|
||||
<BarChart :title="mixedMileage.title" :chart-data="mixedMileage.series" :categories="mixedMileage.categories"
|
||||
chart-type="mixed" :dual-y-axis="true" left-axis-name="次数" right-axis-name="天数" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -206,7 +161,7 @@ export default {
|
|||
})
|
||||
initMapbox('voyageMap_uuv', {
|
||||
tileKey: 'GEBCO_basemap_NCEI',
|
||||
zoom: 4,
|
||||
zoom: 3,
|
||||
center: [113, 15],
|
||||
minZoom: 2,
|
||||
maxZoom: 29
|
||||
|
|
@ -532,13 +487,16 @@ export default {
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.value {
|
||||
font-size: 56px;
|
||||
font-weight: bold;
|
||||
|
||||
.unit {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
|
@ -605,6 +563,7 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 50px;
|
||||
|
||||
.bezel {
|
||||
flex: 1;
|
||||
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