调整参航单位统计页面地图
This commit is contained in:
80937518651731347
parent
f0608a28b0
commit
f61af1183d
|
|
@ -35,11 +35,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图板块-->
|
||||
<!-- 地图板块（与科考船汇总统计页 ships 一致：Mapbox + shipUnit + shipVoyage） -->
|
||||
<div class="map-module">
|
||||
<div class="bezel">
|
||||
<div class="map-title">参航单位</div>
|
||||
<div id="baiduCesiumContainer" ref="baiduCesiumContainer" style="height: 100%;width:100%;" />
|
||||
<div id="workUnitMap_uuv" ref="workUnitMap_uuv" style="height: 100%;width:100%;" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<div class="map-title">航次地图</div>
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
@change="selectVoyageYear"
|
||||
/>
|
||||
</div>
|
||||
<div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;" />
|
||||
<div id="voyageMap_uuv" ref="voyageMap_uuv" style="height: 100%;width:100%;" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- echarts板块-->
|
||||
|
|
@ -109,11 +109,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import { setImageryViewModels } from '../../utils/common'
|
||||
import { unitTotal, hovUnit, hovDiving } from '../../api/statistics'
|
||||
import { unitTotal, hovUnit, shipUnit, shipVoyage } from '../../api/statistics'
|
||||
import { getYearRange } from '../../utils/index'
|
||||
const Cesium = window.Cesium
|
||||
import { initMapbox, handleWheel } from '@/utils/mapbox-utils'
|
||||
import { loadVectorLayer, loadJsonPointFeature } from '@/utils/vector-layer-utils'
|
||||
import { ColorGenerator } from '@/utils/color-generator'
|
||||
|
||||
/**
|
||||
* @param {*} v 原始值
|
||||
|
|
@ -134,12 +136,10 @@ export default {
|
|||
currentTitle: '参航单位统计',
|
||||
voyageYear: '',
|
||||
unitOptions: [],
|
||||
/** 与 Banner 多选绑定：筛选单位汇总图表与航次地图轨迹（空表示全部） */
|
||||
/** 与 Banner 多选绑定：筛选单位汇总图表（空表示全部） */
|
||||
selectedUnits: [],
|
||||
/** unitTotal 全量缓存，便于按 Banner 选择做前端过滤 */
|
||||
unitTotalRawList: [],
|
||||
// 缓存 hovDiving 返回数据，便于多选单位时仅做前端过滤与重绘
|
||||
hovDivingItems: [],
|
||||
numbers: [
|
||||
{
|
||||
label: '参航单位数量',
|
||||
|
|
@ -157,13 +157,6 @@ export default {
|
|||
unit: '次'
|
||||
}
|
||||
],
|
||||
// Cesium相关 - 参航单位地图
|
||||
baiduCesiumViewer: null,
|
||||
baiduCesiumEntities: [], // 存储参航单位标记实体
|
||||
viewer: null,
|
||||
// 地图图层基础地址
|
||||
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
|
||||
trackLineLayers: [],
|
||||
/** 航行次数（柱状） */
|
||||
barVoyageCount: { title: '航行次数', salesData: [], productCategories: [] },
|
||||
/** 参航天数（柱状） */
|
||||
|
|
@ -200,64 +193,44 @@ export default {
|
|||
created() {
|
||||
this.loadUnitTotalFromApi()
|
||||
this.getHovUnit()
|
||||
this.gitHovDiving()
|
||||
this.getShipUnit()
|
||||
this.gitShipVoyage()
|
||||
},
|
||||
mounted() {
|
||||
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||||
this.initCesium() // 初始化航次地图
|
||||
this.initBaiduCesium() // 初始化参航单位地图
|
||||
this.refreshTrackLines()
|
||||
initMapbox('workUnitMap_uuv', {
|
||||
tileKey: 'gaode',
|
||||
zoom: 3,
|
||||
center: [110, 31],
|
||||
minZoom: 2,
|
||||
maxZoom: 29
|
||||
})
|
||||
initMapbox('voyageMap_uuv', {
|
||||
tileKey: 'GEBCO_basemap_NCEI',
|
||||
zoom: 4,
|
||||
center: [113, 15],
|
||||
minZoom: 2,
|
||||
maxZoom: 29
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清理Cesium资源
|
||||
if (this.baiduCesiumViewer) {
|
||||
this.baiduCesiumViewer.destroy()
|
||||
const unitMap = Vue.config.maps && Vue.config.maps['workUnitMap_uuv']
|
||||
if (unitMap) {
|
||||
unitMap.remove()
|
||||
delete Vue.config.maps['workUnitMap_uuv']
|
||||
}
|
||||
if (this.viewer) {
|
||||
this.viewer.destroy()
|
||||
const voyageMap = Vue.config.maps && Vue.config.maps['voyageMap_uuv']
|
||||
if (voyageMap) {
|
||||
voyageMap.remove()
|
||||
delete Vue.config.maps['voyageMap_uuv']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 刷新航次地图轨迹图层（按单位多选进行前端过滤）。
|
||||
* @returns {void}
|
||||
*/
|
||||
refreshTrackLines() {
|
||||
if (!this.viewer) return
|
||||
this.removeSingleLineImg()
|
||||
|
||||
const selectedNameSet = new Set(
|
||||
(this.selectedUnits || [])
|
||||
.map(u => u && u.unit_name)
|
||||
.filter(Boolean)
|
||||
)
|
||||
const selectedIdSet = new Set(
|
||||
(this.selectedUnits || [])
|
||||
.map(u => (u && (u.unit_id || u.unitId)) || null)
|
||||
.filter(Boolean)
|
||||
)
|
||||
|
||||
const unitFilterEnabled = selectedNameSet.size > 0 || selectedIdSet.size > 0
|
||||
const itemsToShow = unitFilterEnabled
|
||||
? (this.hovDivingItems || []).filter(item => {
|
||||
const itemName = item.unit_name || item.unitName || item.unit_name_cn || null
|
||||
const itemId = item.unit_id || item.unitId || item.unit_code || null
|
||||
return selectedNameSet.has(itemName) || selectedIdSet.has(itemId)
|
||||
})
|
||||
: (this.hovDivingItems || [])
|
||||
|
||||
itemsToShow.forEach(item => {
|
||||
this.addSingleLineImg(item)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Banner 统计单位多选变更：刷新汇总图表与航次地图轨迹。
|
||||
* Banner 统计单位多选变更：刷新汇总图表。
|
||||
* @returns {void}
|
||||
*/
|
||||
onBannerUnitsChange() {
|
||||
this.applyFilteredUnitTotal()
|
||||
this.refreshTrackLines()
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -384,189 +357,80 @@ export default {
|
|||
]
|
||||
}
|
||||
},
|
||||
// 下潜单位统计
|
||||
|
||||
/**
|
||||
* 载人潜水器参航单位列表：仅用于 Banner 多选筛选图表。
|
||||
* @returns {void}
|
||||
*/
|
||||
getHovUnit() {
|
||||
hovUnit().then(res => {
|
||||
// 初始化单位下拉选项（去重）
|
||||
const map = new Map()
|
||||
;(res.array || []).forEach(unit => {
|
||||
const k = unit.unit_id || unit.unitId || unit.unit_name
|
||||
if (!map.has(k)) map.set(k, unit)
|
||||
})
|
||||
this.unitOptions = Array.from(map.values())
|
||||
|
||||
// 清除之前的标记
|
||||
this.clearBaiduCesiumMarkers()
|
||||
|
||||
// 创建参航单位标记
|
||||
this.createBaiduCesiumMarkers(res.array || [])
|
||||
})
|
||||
},
|
||||
// 创建参航单位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)
|
||||
/**
|
||||
* 科考船侧参航单位点位（与 ships 页地图同源接口），通过 Mapbox GeoJSON 渲染。
|
||||
* @returns {void}
|
||||
*/
|
||||
getShipUnit() {
|
||||
shipUnit().then(res => {
|
||||
const geojson = {
|
||||
type: 'FeatureCollection',
|
||||
features: []
|
||||
}
|
||||
;(res.array || []).forEach(element => {
|
||||
geojson.features.push({
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [element.unit_lon, element.unit_lat]
|
||||
},
|
||||
// 清除参航单位标记
|
||||
clearBaiduCesiumMarkers() {
|
||||
if (this.baiduCesiumViewer && this.baiduCesiumEntities.length > 0) {
|
||||
this.baiduCesiumEntities.forEach(entity => {
|
||||
this.baiduCesiumViewer.entities.remove(entity)
|
||||
})
|
||||
this.baiduCesiumEntities = []
|
||||
properties: {
|
||||
unit_name: element.unit_name,
|
||||
unit_type: element.unit_type,
|
||||
create_time: element.create_time,
|
||||
tsy_id: element.tsy_id
|
||||
}
|
||||
},
|
||||
// 潜次统计
|
||||
gitHovDiving(params = {}) {
|
||||
hovDiving(params).then(res => {
|
||||
this.hovDivingItems = res.array || []
|
||||
this.refreshTrackLines()
|
||||
})
|
||||
})
|
||||
loadJsonPointFeature('workUnit', 'blue', geojson, 'unit_name', 'workUnitMap_uuv')
|
||||
})
|
||||
},
|
||||
// 初始化Cesium - 参航单位地图
|
||||
initBaiduCesium() {
|
||||
this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.baiduCesiumContainer, {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
baseLayerPicker: false,
|
||||
imageryProviderViewModels: this.imageryViewModels,
|
||||
terrainProviderViewModels: [],
|
||||
fullscreenButton: false,
|
||||
selectionIndicator: false,
|
||||
homeButton: false,
|
||||
sceneModePicker: false,
|
||||
animation: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
navigationHelpButton: false
|
||||
})
|
||||
this.baiduCesiumViewer._cesiumWidget._creditContainer.style.display = 'none'
|
||||
this.baiduCesiumViewer.scene.sun.show = false
|
||||
this.baiduCesiumViewer.scene.moon.show = false
|
||||
this.baiduCesiumViewer.scene.fog.enabled = false
|
||||
this.baiduCesiumViewer.scene.skyAtmosphere.show = false
|
||||
this.baiduCesiumViewer.scene.sun.show = false
|
||||
this.baiduCesiumViewer.scene.skyBox.show = false
|
||||
this.baiduCesiumViewer.scene.globe.enableLighting = false
|
||||
this.baiduCesiumViewer.shadowMap.darkness = 0.8
|
||||
this.baiduCesiumViewer.scene._sunBloom = false
|
||||
this.baiduCesiumViewer.scene.globe.showGroundAtmosphere = false
|
||||
this.baiduCesiumViewer.scene.postProcessStages.fxaa.enabled = true
|
||||
|
||||
this.baiduCesiumViewer.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(114.4040, 30.5196, 4000000)
|
||||
/**
|
||||
* 科考船航次轨迹（与 ships 页地图同源接口），通过 Mapbox 矢量图层渲染。
|
||||
* @param {Object} [params] 查询参数
|
||||
* @returns {void}
|
||||
*/
|
||||
gitShipVoyage(params = {}) {
|
||||
shipVoyage(params).then(res => {
|
||||
let i = 0
|
||||
const colors = ColorGenerator.generateDivergingColors((res.array || []).length)
|
||||
;(res.array || []).forEach(item => {
|
||||
loadVectorLayer(item.voyage_name, ['line', 'symbol'], [colors[i], '#FFFFFF'], 'visible', 'voyageMap_uuv', 'dsds')
|
||||
i++
|
||||
})
|
||||
})
|
||||
},
|
||||
// 初始化cesium
|
||||
initCesium() {
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
||||
this.viewer = new Cesium.Viewer('cesiumContainer', {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
baseLayerPicker: false,
|
||||
// 设置自定义底图
|
||||
imageryProviderViewModels: this.imageryViewModels,
|
||||
// 关闭默认的地形底图
|
||||
terrainProviderViewModels: [],
|
||||
fullscreenButton: false,
|
||||
selectionIndicator: false,
|
||||
homeButton: false,
|
||||
sceneModePicker: false,
|
||||
animation: false,
|
||||
infoBox: false,
|
||||
geocoder: false,
|
||||
navigationHelpButton: false
|
||||
})
|
||||
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.moon.show = false
|
||||
this.viewer.scene.fog.enabled = false
|
||||
this.viewer.scene.skyAtmosphere.show = false
|
||||
this.viewer.scene.sun.show = false
|
||||
this.viewer.scene.skyBox.show = false
|
||||
this.viewer.scene.globe.enableLighting = false
|
||||
this.viewer.shadowMap.darkness = 0.8
|
||||
this.viewer.scene._sunBloom = false
|
||||
this.viewer.scene.globe.showGroundAtmosphere = false
|
||||
this.viewer.scene.postProcessStages.fxaa.enabled = true
|
||||
|
||||
this.viewer.camera.setView({
|
||||
// 指定相机初始位置
|
||||
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
|
||||
})
|
||||
},
|
||||
// 添加轨迹图层
|
||||
addSingleLineImg(item) {
|
||||
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.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.viewer && this.trackLineLayers.length) {
|
||||
this.trackLineLayers.forEach(line => {
|
||||
this.viewer.imageryLayers.remove(line)
|
||||
})
|
||||
}
|
||||
// 清空引用，避免重复 remove 或无限增长
|
||||
this.trackLineLayers = []
|
||||
},
|
||||
// 选择航次地图年份
|
||||
/**
|
||||
* 选择航次地图年份。
|
||||
* @param {*} val 年份值
|
||||
* @returns {void}
|
||||
*/
|
||||
selectVoyageYear(val) {
|
||||
this.removeSingleLineImg()
|
||||
if (val) {
|
||||
const params = getYearRange(val)
|
||||
this.gitHovDiving({ ...params })
|
||||
this.gitShipVoyage({ ...params })
|
||||
} else {
|
||||
this.gitHovDiving({})
|
||||
this.gitShipVoyage({})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -737,7 +601,7 @@ export default {
|
|||
}
|
||||
|
||||
.map-module {
|
||||
padding: 20px 50px 50px;
|
||||
padding: 50px 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 50px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue