import * as mars3d from "mars3d"
|
import { Typhoon, PlayTyphoon } from "./Typhoon"
|
|
export let map // mars3d.Map三维地图对象
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lat: 8.560501, lng: 111.849127, alt: 10725692, heading: 358, pitch: -87 }
|
}
|
}
|
|
export const eventTarget = new mars3d.BaseClass()
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
// 绘制24/48小时警戒线
|
drawWarningLine()
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
// 所有已构造的台风集合
|
const typhoonListObj = {}
|
|
// 当前选择的台风
|
let selectTyphoon
|
|
// 勾选台风
|
export function selectOneTyphoon(row) {
|
stopPlay()
|
|
const id = row.id
|
if (!typhoonListObj[id]) {
|
typhoonListObj[id] = new Typhoon({ ...row }, map)
|
}
|
|
const typhoon = typhoonListObj[id]
|
typhoon.show = true
|
typhoon.flyTo()
|
|
selectTyphoon = typhoon
|
}
|
|
// 取消勾选台风
|
export function unSelectOneTyphoon(id) {
|
const typhoon = typhoonListObj[id]
|
if (!typhoon) {
|
return
|
}
|
|
if (typhoon.playTyphoon) {
|
typhoon.playTyphoon.stop()
|
}
|
typhoon.show = false
|
|
selectTyphoon = null
|
}
|
|
// 定位到台风
|
export function clickTyRow(row) {
|
const typhoon = typhoonListObj[row.id]
|
if (typhoon) {
|
typhoon.flyTo()
|
}
|
}
|
|
// 定位到轨迹点
|
export function clickPathRow(row) {
|
selectTyphoon.showPointFQ(row)
|
const graphic = selectTyphoon.getPointById(row.id)
|
if (graphic) {
|
graphic.flyTo({
|
radius: 1600000,
|
complete() {
|
graphic.openTooltip()
|
}
|
})
|
}
|
}
|
|
// 开始播放
|
export function startPlay() {
|
if (!selectTyphoon) {
|
return
|
}
|
|
if (!selectTyphoon.playTyphoon) {
|
selectTyphoon.playTyphoon = new PlayTyphoon(selectTyphoon.options, map)
|
}
|
|
selectTyphoon.playTyphoon.start()
|
selectTyphoon.show = false
|
}
|
|
// 停止播放
|
export function stopPlay() {
|
if (selectTyphoon?.playTyphoon) {
|
selectTyphoon.playTyphoon.stop()
|
selectTyphoon.show = true
|
}
|
}
|
|
// 绘制警戒线
|
function drawWarningLine() {
|
// 绘制24小时警戒线
|
const lineWarning24 = new mars3d.graphic.PolylineEntity({
|
positions: [
|
[127, 34],
|
[127, 22],
|
[119, 18],
|
[119, 11],
|
[113, 4.5],
|
[105, 0]
|
],
|
style: {
|
color: "#828314",
|
width: 2,
|
zIndex: 1
|
}
|
})
|
map.graphicLayer.addGraphic(lineWarning24)
|
|
// 注记文本
|
const textWarning24 = new mars3d.graphic.RectangleEntity({
|
positions: [
|
[128.129019, 29.104287],
|
[125.850451, 28.424599]
|
],
|
style: {
|
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.Text, {
|
text: "24小时警戒线",
|
font: "80px 楷体",
|
color: "#828314",
|
backgroundColor: new Cesium.Color(0.0, 0.0, 0.0, 0)
|
}),
|
rotationDegree: 90
|
}
|
})
|
map.graphicLayer.addGraphic(textWarning24)
|
|
// 绘制48小时警戒线
|
const lineWarning48 = new mars3d.graphic.PolylineEntity({
|
positions: [
|
[132, 34],
|
[132, 22],
|
[119, 0],
|
[105, 0]
|
],
|
style: {
|
width: 2,
|
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.PolylineDash, {
|
dashLength: 20.0,
|
color: "#4dba3d"
|
})
|
}
|
})
|
map.graphicLayer.addGraphic(lineWarning48)
|
|
// 注记文本
|
const textWarning48 = new mars3d.graphic.RectangleEntity({
|
positions: [
|
[130.502492, 25.959716],
|
[133.423638, 26.772991]
|
],
|
style: {
|
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.Text, {
|
text: "48小时警戒线",
|
font: "80px 楷体",
|
color: "#4dba3d",
|
backgroundColor: new Cesium.Color(0.0, 0.0, 0.0, 0)
|
}),
|
rotationDegree: 90,
|
zIndex: 4
|
}
|
})
|
map.graphicLayer.addGraphic(textWarning48)
|
}
|
|
export const formatDate = mars3d.Util.formatDate
|
