import * as mars3d from "mars3d"
|
|
export let map // mars3d.Map三维地图对象
|
let roamLine
|
const roamLineData = {}
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lat: 31.344715, lng: 115.783073, alt: 10056, heading: 158, pitch: -55 },
|
globe: {
|
// depthTestAgainstTerrain: true,
|
}
|
}
|
}
|
export const eventTarget = new mars3d.BaseClass() // 事件对象，用于抛出事件到面板中
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
map.hasTerrain = false
|
|
addGraphicLayer()
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
function addGraphicLayer() {
|
// 创建矢量数据图层
|
const graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
// 该数据可以从 基础项目 飞行漫游功能界面操作后保存JSON
|
const flydata = {
|
speed: 200,
|
positions: [
|
[115.833866, 31.311451, 4000],
|
[115.785116, 31.293944, 4000],
|
[115.748115, 31.266263, 4000],
|
[115.711031, 31.216472, 4000]
|
],
|
model: {
|
url: "//data.mars3d.cn/gltf/mars/zhanji.glb",
|
scale: 0.01,
|
minimumPixelSize: 100,
|
show: true
|
},
|
path: {
|
color: "#ffff00",
|
width: 3,
|
show: true
|
},
|
shadow: {
|
type: "wall",
|
show: true
|
},
|
camera: {
|
type: "zy",
|
followedX: 50,
|
followedZ: 10
|
},
|
clockLoop: false,
|
interpolation: false,
|
showGroundHeight: true,
|
clampToGround: false
|
}
|
|
roamLine = new mars3d.graphic.RoamLine(flydata)
|
graphicLayer.addGraphic(roamLine)
|
|
// 启动漫游
|
roamLine.start()
|
|
testShading()
|
|
if (map.controls.timeline) {
|
map.controls.timeline.zoomTo(roamLine.startTime, roamLine.stopTime)
|
}
|
|
// 显示基本信息，名称、总长、总时间
|
roamLineData.td_alltimes = mars3d.Util.formatTime(roamLine.alltimes)
|
roamLineData.td_alllength = mars3d.MeasureUtil.formatDistance(roamLine.alllen)
|
|
roamLine.on(mars3d.EventType.change, (event) => {
|
// 面板显示相关信息
|
showRealTimeInfo(event, roamLine.alltimes)
|
// 漫游组件
|
eventTarget.fire("roamLineChange", roamLineData)
|
})
|
|
eventTarget.fire("loadRoamLine")
|
}
|
|
export function updateModel(isAuto, val) {
|
const pitch = val.slidePitchStep
|
const roll = val.slideRollStep
|
|
roamLine.updateAngle(isAuto, {
|
pitch: pitch,
|
roll: roll
|
})
|
}
|
|
export function clearGraphic() {
|
groundLayer.clear()
|
}
|
|
// 显示实时坐标和时间
|
function showRealTimeInfo(params, _alltime) {
|
if (params == null) {
|
return
|
}
|
|
let val = Math.ceil((params.time * 100) / _alltime)
|
if (val < 1) {
|
val = 1
|
}
|
if (val > 100) {
|
val = 100
|
}
|
|
roamLineData.percent = val
|
|
roamLineData.td_jd = params.lng
|
roamLineData.td_wd = params.lat
|
roamLineData.td_gd = mars3d.MeasureUtil.formatDistance(params.alt)
|
|
roamLineData.td_times = mars3d.Util.formatTime(params.time)
|
roamLineData.td_length = mars3d.MeasureUtil.formatDistance(params.len)
|
|
if (params.hbgd) {
|
roamLineData.td_dmhb = mars3d.MeasureUtil.formatDistance(params.hbgd)
|
} else {
|
roamLineData.td_dmhb = "未知"
|
}
|
|
if (params.ldgd) {
|
roamLineData.td_ldgd = mars3d.MeasureUtil.formatDistance(params.ldgd)
|
} else {
|
roamLineData.td_ldgd = "未知"
|
}
|
}
|
|
let groundLayer // 地面投影图层
|
|
function testShading() {
|
// 卫星朝向的中线地面点
|
const line1 = new mars3d.graphic.PolylineEntity({
|
positions: new Cesium.CallbackProperty(function (time) {
|
const pt1 = roamLine.position
|
const pt2 = centerPosion
|
if (!pt1 || !pt2) {
|
return []
|
}
|
|
return [pt1, pt2]
|
}, false),
|
style: {
|
width: 2,
|
color: "#ff0000",
|
arcType: Cesium.ArcType.NONE
|
}
|
})
|
map.graphicLayer.addGraphic(line1)
|
|
// 卫星边线2点
|
const graphicTriangle = new mars3d.graphic.PolylineEntity({
|
positions: new Cesium.CallbackProperty(function (time) {
|
const positions = getFourShadingPosition({
|
angle: 2.4,
|
angle2: 1.4
|
})
|
return positions
|
}, false),
|
style: {
|
width: 2,
|
color: "#0000ff",
|
clampToGround: true
|
}
|
})
|
map.graphicLayer.addGraphic(graphicTriangle)
|
|
// 创建矢量数据图层
|
groundLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(groundLayer)
|
|
setInterval(function () {
|
if (!map.clock.shouldAnimate || !thisPositions) {
|
return
|
}
|
addPolygon()
|
}, 1500)
|
}
|
|
// 获取地面的四棱台投影面
|
let thisPositions
|
let centerPosion
|
|
function getFourShadingPosition(opts) {
|
// 位置
|
const pt1 = roamLine.position
|
if (!pt1) {
|
return
|
}
|
|
const ellipsoid = map.scene.globe.ellipsoid
|
|
// 张角
|
const angle1 = Cesium.Math.toRadians(opts.angle) / 2
|
|
const heading = Cesium.Math.toRadians(Cesium.defaultValue(opts.heading, roamLine.heading))
|
const pitch = Cesium.Math.toRadians(Cesium.defaultValue(opts.pitch, roamLine.pitch))
|
const roll = Cesium.Math.toRadians(Cesium.defaultValue(opts.heading, roamLine.roll))
|
|
// 张角
|
const angle2 = Cesium.Math.toRadians(opts.angle2) / 2
|
|
const ptLeft1 = mars3d.PointUtil.getRayEarthPosition(pt1, new Cesium.HeadingPitchRoll(heading, pitch + angle2, roll + angle1), true, ellipsoid)
|
if (!ptLeft1) {
|
return
|
}
|
|
const ptRight1 = mars3d.PointUtil.getRayEarthPosition(pt1, new Cesium.HeadingPitchRoll(heading, pitch + angle2, roll - angle1), true, ellipsoid)
|
if (!ptRight1) {
|
return
|
}
|
|
const ptRight2 = mars3d.PointUtil.getRayEarthPosition(pt1, new Cesium.HeadingPitchRoll(heading, pitch - angle2, roll - angle1), true, ellipsoid)
|
if (!ptRight2) {
|
return
|
}
|
|
const ptLeft2 = mars3d.PointUtil.getRayEarthPosition(pt1, new Cesium.HeadingPitchRoll(heading, pitch - angle2, roll + angle1), true, ellipsoid)
|
if (!ptLeft2) {
|
return
|
}
|
|
const ptLeft = Cesium.Cartesian3.midpoint(ptLeft1, ptLeft2, new Cesium.Cartesian3())
|
const ptRight = Cesium.Cartesian3.midpoint(ptRight1, ptRight2, new Cesium.Cartesian3())
|
thisPositions = [ptLeft, ptRight]
|
|
centerPosion = Cesium.Cartesian3.midpoint(ptLeft, ptRight, new Cesium.Cartesian3())
|
|
return [ptLeft1, ptRight1, ptRight2, ptLeft2, ptLeft1]
|
}
|
|
let lastPositions
|
|
function addPolygon() {
|
if (lastPositions == null) {
|
lastPositions = thisPositions
|
return
|
}
|
const positions = [lastPositions[0], lastPositions[1], thisPositions[1], thisPositions[0]]
|
lastPositions = thisPositions
|
|
const primitive = new mars3d.graphic.PolygonPrimitive({
|
positions: positions,
|
style: {
|
color: "#ff0000",
|
opacity: 0.3
|
}
|
})
|
groundLayer.addGraphic(primitive)
|
|
if (groundLayer.length > 2000) {
|
groundLayer.clear()
|
}
|
}
|
