import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
export let graphicLayer
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
shadows: true,
|
center: { lat: 12.845055, lng: 112.931363, alt: 24286797, heading: 3, pitch: -90 },
|
cameraController: {
|
zoomFactor: 3.0,
|
minimumZoomDistance: 1000,
|
maximumZoomDistance: 300000000,
|
constrainedAxis: false // 解除在南北极区域鼠标操作限制
|
},
|
globe: { enableLighting: true },
|
clock: {
|
multiplier: 1 // 速度
|
}
|
},
|
control: {
|
clockAnimate: true, // 时钟动画控制(左下角)
|
timeline: true, // 是否显示时间线控件
|
compass: { top: "10px", left: "5px" }
|
},
|
layers: [
|
{
|
name: "夜晚图片",
|
icon: "img/basemaps/blackMarble.png",
|
type: "image",
|
url: "//data.mars3d.cn/file/img/world/night2.jpg",
|
dayAlpha: 0.1,
|
nightAlpha: 1.0,
|
brightness: 3.5,
|
show: true
|
}
|
]
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map map.toolbar.style.bottom = "55px"// 修改toolbar控件的样式
|
|
// 创建矢量数据图层
|
graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
graphicLayer.on(mars3d.EventType.click, function (event) {
|
console.log("单击了卫星", event)
|
// 单击事件
|
highlightSatellite(event.graphic)
|
})
|
graphicLayer.on(mars3d.EventType.change, function (event) {
|
// 位置变化事件
|
processInArea(event.graphic)
|
})
|
|
bindLayerPopup()
|
|
creatreDmzList()
|
|
mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/apidemo/tle-china.json" })
|
.then(function (data) {
|
createSatelliteList(data.data)
|
})
|
.catch(function () {
|
globalMsg("获取卫星信息异常！")
|
})
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
// 创建卫星列表
|
function createSatelliteList(arr) {
|
// 单击地图空白处
|
map.on(mars3d.EventType.clickMap, function (event) {
|
highlightSatellite()
|
})
|
|
for (let i = 0; i < arr.length; i++) {
|
const item = arr[i]
|
|
// 属性处理
|
item.model = {
|
url: "//data.mars3d.cn/gltf/mars/weixin.gltf",
|
...(item.model || {}),
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_near: 0,
|
distanceDisplayCondition_far: 20000000,
|
show: true
|
}
|
// 当视角距离超过20000000米(distanceDisplayCondition_far定义的) 后显示为点对象的样式
|
item.point = {
|
show: true,
|
color: "#ffff00",
|
pixelSize: 5,
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_near: 20000000,
|
distanceDisplayCondition_far: Number.MAX_VALUE
|
}
|
|
item.label = item.label || {}
|
item.label.show = true
|
|
// path显示后FPS下降的厉害
|
item.path = item.path || {}
|
item.path.color = Cesium.defaultValue(item.path.color, "#e2e2e2")
|
item.path.closure = Cesium.defaultValue(item.path.closure, true)
|
|
item.cone = {
|
sensorType: i % 2 === 1 ? mars3d.graphic.SatelliteSensor.Type.Rect : mars3d.graphic.SatelliteSensor.Type.Conic,
|
angle1: random(20, 40),
|
angle2: random(10, 20),
|
show: false
|
}
|
// 属性处理 END
|
|
const satelliteObj = new mars3d.graphic.Satellite(item)
|
graphicLayer.addGraphic(satelliteObj)
|
}
|
console.log("当前卫星数量: " + arr.length)
|
}
|
|
// 在图层绑定Popup弹窗
|
export function bindLayerPopup() {
|
graphicLayer.bindPopup(function (event) {
|
const attr = event.graphic.options
|
return `名称：${attr.name}<br/>英文名：${attr.name_en || ""}<br/>类型：${attr.type}`
|
})
|
}
|
|
let lastSelectWX
|
|
function highlightSatellite(satelliteObj) {
|
if (lastSelectWX) {
|
// 重置上次选中的轨道样式
|
lastSelectWX.setOptions({
|
path: {
|
color: "#e2e2e2",
|
opacity: 0.5,
|
width: 1
|
}
|
})
|
lastSelectWX.coneShow = false // 关闭视锥体
|
lastSelectWX = null
|
}
|
|
if (satelliteObj) {
|
// 高亮选中的轨道样式
|
satelliteObj.setOptions({
|
path: {
|
color: "#ffff00",
|
opacity: 1,
|
width: 2
|
}
|
})
|
satelliteObj.coneShow = true // 打开视锥体
|
lastSelectWX = satelliteObj
|
}
|
}
|
|
// 判断卫星是否在面内
|
function processInArea(weixin) {
|
const position = weixin?.position
|
if (!position) {
|
return
|
}
|
|
dmzLayer.eachGraphic(function (dmzGraphic) {
|
if (!dmzGraphic._isFW) {
|
return
|
}
|
|
dmzGraphic._lastInPoly[weixin.uuid] = dmzGraphic._lastInPoly[weixin.uuid] || {}
|
const lastState = dmzGraphic._lastInPoly[weixin.uuid]
|
|
const thisIsInPoly = dmzGraphic.isInPoly(position)
|
if (thisIsInPoly !== lastState.state) {
|
if (thisIsInPoly) {
|
// 开始进入区域内
|
console.log(`${weixin.name} 卫星开始进入 ${dmzGraphic.name} 地面站区域内`)
|
|
const line = new mars3d.graphic.PolylineEntity({
|
positions: new Cesium.CallbackProperty(function (time) {
|
const pots = weixin.position
|
if (!pots) {
|
return []
|
}
|
return [pots, dmzGraphic.positionShow]
|
}, false),
|
style: {
|
width: 7,
|
// 动画线材质
|
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
|
url: "./img/textures/arrow-h.png",
|
color: Cesium.Color.AQUA,
|
repeat: new Cesium.Cartesian2(15, 1),
|
speed: 60 // 时长，控制速度
|
}),
|
arcType: Cesium.ArcType.NONE
|
}
|
})
|
map.graphicLayer.addGraphic(line)
|
lastState.line = line
|
|
weixin.coneShow = true // 打开视锥体
|
} else {
|
// 离开区域
|
console.log(`${weixin.name} 卫星离开 ${dmzGraphic.name} 地面站区域内`)
|
|
if (lastState.line) {
|
map.graphicLayer.removeGraphic(lastState.line)
|
delete lastState.line
|
}
|
weixin.coneShow = false // 关闭视锥体
|
}
|
|
dmzGraphic._lastInPoly[weixin.uuid].state = thisIsInPoly
|
}
|
})
|
}
|
|
// 取随机数字
|
function random(min, max) {
|
return Math.floor(Math.random() * (max - min + 1) + min)
|
}
|
|
// 地面站图层
|
let dmzLayer
|
// 创建地面站
|
function creatreDmzList() {
|
const arr = [
|
{ name: "西安", radius: 1500000, point: [108.938314, 34.345614, 342.9] },
|
{ name: "喀什", radius: 1800000, point: [75.990372, 39.463507, 1249.5] },
|
{ name: "文昌", radius: 1200000, point: [110.755151, 19.606573, 21.1] }
|
]
|
|
// 创建矢量数据图层
|
dmzLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(dmzLayer)
|
|
for (let i = 0; i < arr.length; i++) {
|
const item = arr[i]
|
// 地面站gltf模型
|
const graphic = new mars3d.graphic.ModelEntity({
|
name: "地面站模型",
|
position: item.point,
|
style: {
|
url: "//data.mars3d.cn/gltf/mars/leida.glb",
|
heading: 270,
|
scale: 30,
|
minimumPixelSize: 40
|
},
|
popup: item.name
|
})
|
dmzLayer.addGraphic(graphic)
|
|
const dmfwGraphic = new mars3d.graphic.CircleEntity({
|
name: item.name,
|
position: item.point,
|
style: {
|
radius: item.radius,
|
color: "#ff0000",
|
opacity: 0.3
|
},
|
popup: item.name
|
})
|
dmzLayer.addGraphic(dmfwGraphic)
|
|
// 判断时会用到的变量
|
dmfwGraphic._isFW = true
|
dmfwGraphic._lastInPoly = {}
|
}
|
}
|
