import * as mars3d from "mars3d"
|
import { $message } from "@mars/components/mars-ui/index"
|
|
export let map // mars3d.Map三维地图对象
|
let graphicLayer
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lat: 30.178797, lng: 118.183551, alt: 210053, heading: 353, pitch: -49 },
|
clock: {
|
startTime: "2017/08/25 08:00:00",
|
stopTime: "2017/08/25 08:01:30"
|
}
|
},
|
control: {
|
animation: true, // 是否创建 动画小器件，左下角仪表
|
timeline: true // 是否显示 时间线控件
|
}
|
}
|
|
export const eventTarget = new mars3d.BaseClass()
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
|
// 创建矢量数据图层
|
graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
// 静态数据
|
mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/apidemo/exercise-fixed.json" }).then(function (json) {
|
graphicLayer.loadGeoJSON(json)
|
})
|
|
// 动态数据
|
mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/apidemo/exercise-dynamic.json" }).then(function (arrData) {
|
for (let i = 0; i < arrData.length; i++) {
|
const data = arrData[i]
|
|
// 动态坐标属性
|
const property = new Cesium.SampledPositionProperty()
|
data.path.forEach((item, index) => {
|
const startTime = item.time
|
let tempTime = Cesium.JulianDate.fromDate(new Date(startTime))
|
tempTime = Cesium.JulianDate.addSeconds(tempTime, 0, new Cesium.JulianDate())
|
property.addSample(tempTime, Cesium.Cartesian3.fromDegrees(...item.position))
|
})
|
|
switch (data.type) {
|
case "plane":
|
addPlane(property, data.team)
|
break
|
case "arrow":
|
addAttackArrow(property, data.team)
|
break
|
case "missile":
|
addMissile(property, data.team)
|
break
|
case "fire":
|
addFire(property)
|
break
|
default:
|
break
|
}
|
}
|
})
|
|
addWallPrimitive(
|
[
|
[118.67566, 32.349367],
|
[119.291568, 31.835385],
|
[118.374952, 31.373451]
|
],
|
"#4755C9"
|
)
|
|
addWallPrimitive(
|
[
|
[116.44771, 31.324743],
|
[116.553874, 32.231496],
|
[117.649474, 32.017338]
|
],
|
"#FF0004"
|
)
|
|
setMapView(22, () => {
|
map.setCameraView({ lat: 31.252058, lng: 117.988745, alt: 95026, heading: 340, pitch: -49 })
|
})
|
setMapView(55, () => {
|
$message("红方获得胜利")
|
})
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
function addWallPrimitive(positions, color) {
|
const Square = new mars3d.graphic.WallPrimitive({
|
positions: mars3d.graphic.GatheringPlace.getOutlinePositions(positions),
|
style: {
|
diffHeight: 5000,
|
closure: true,
|
material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
|
image: "img/textures/fence.png",
|
color: color,
|
speed: 10, // 速度，建议取值范围1-100
|
axisY: true
|
})
|
}
|
})
|
graphicLayer.addGraphic(Square)
|
}
|
|
// 【动态】飞机飞行路线
|
function addPlane(property, team) {
|
const feijiPath = new mars3d.graphic.PathEntity({
|
position: property,
|
style: {
|
width: 6,
|
leadTime: 0, // 前方的路线不显示
|
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
|
color: getTeamColor(team),
|
repeat: new Cesium.Cartesian2(2.0, 1.0),
|
image: "img/textures/line-gradual.png",
|
speed: 15
|
})
|
},
|
model: {
|
url: "//data.mars3d.cn/gltf/mars/zhanji.glb",
|
scale: 0.001,
|
minimumPixelSize: 100,
|
show: true,
|
clampAnimations: true,
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_near: 0,
|
distanceDisplayCondition_far: 900000
|
},
|
billboard: {
|
show: false,
|
image: "img/icon/plane_blue.png",
|
color: getTeamColor(team),
|
scale: 0.2,
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_near: 90000,
|
distanceDisplayCondition_far: Number.MAX_VALUE
|
}
|
})
|
graphicLayer.addGraphic(feijiPath)
|
}
|
|
// 【动态】进攻箭头标号
|
function addAttackArrow(property, team) {
|
// property.forwardExtrapolationType = Cesium.ExtrapolationType.HOLD;
|
|
const times = [].concat(property._property._times)
|
const positions = [property.getValue(times.shift())]
|
const graphicTriangle = new mars3d.graphic.AttackArrowPW({
|
positions: new Cesium.CallbackProperty(function (time) {
|
for (let index = 0, len = times.length; index < len; index++) {
|
const item = times[index]
|
if (item.secondsOfDay === Math.round(time.secondsOfDay)) {
|
if (property.getValue(time)) {
|
positions.push(property.getValue(time))
|
times.shift()
|
break
|
}
|
}
|
}
|
|
const point = property.getValue(time)
|
if (point) {
|
return positions.concat(point)
|
} else {
|
return positions
|
}
|
}, false),
|
style: {
|
color: getTeamColor(team),
|
opacity: 0.6,
|
outline: true,
|
outlineWidth: 3,
|
outlineColor: "#ffffff"
|
// clampToGround: true,
|
}
|
})
|
graphicLayer.addGraphic(graphicTriangle)
|
}
|
|
// 【动态】导弹飞行路线
|
function addMissile(property, team) {
|
let missileImage
|
if (team === "red") {
|
missileImage = "img/icon/missile_red.png"
|
} else {
|
missileImage = "img/icon/missile_blue.png"
|
}
|
|
const graphic = new mars3d.graphic.BillboardEntity({
|
position: property,
|
orientation: new Cesium.VelocityOrientationProperty(property),
|
style: {
|
image: missileImage,
|
scale: 0.5,
|
alignedAxis: new Cesium.VelocityVectorProperty(property, true)
|
},
|
hasEdit: false
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
|
// 【动态】导弹爆炸之后的滞留
|
function addFire(property) {
|
const fireImage = new mars3d.graphic.BillboardEntity({
|
position: property,
|
orientation: new Cesium.VelocityOrientationProperty(property),
|
style: {
|
image: "img/icon/fire.png",
|
scale: 1.0,
|
alignedAxis: new Cesium.VelocityVectorProperty(property, true)
|
},
|
hasEdit: false
|
})
|
graphicLayer.addGraphic(fireImage)
|
}
|
|
function getTeamColor(team) {
|
if (team === "red") {
|
return "#FF0000"
|
} else {
|
return "#0099FF"
|
}
|
}
|
|
let num
|
function setMapView(time, callback) {
|
map.on(mars3d.EventType.clockTick, function (event) {
|
if (new Date(event.currentTime).getMinutes() === 0 && new Date(event.currentTime).getSeconds() === time) {
|
clearTimeout(num)
|
num = setTimeout(() => {
|
callback()
|
}, 2000)
|
}
|
})
|
}
|
