import * as mars3d from "mars3d"
|
import { $message } from "@mars/components/mars-ui/index"
|
|
export let map // mars3d.Map三维地图对象
|
export let graphicLayer
|
|
let video2D
|
let videoElement
|
|
// 事件对象，用于抛出事件给面板
|
export const eventTarget = new mars3d.BaseClass()
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
export const mapOptions = {
|
scene: {
|
center: { lat: 31.844188, lng: 117.205321, alt: 143, heading: 175, pitch: -26 }
|
}
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
export function onMounted(mapInstance) {
|
map = mapInstance // 记录首次创建的map
|
|
// 添加参考三维模型
|
const tiles3dLayer = new mars3d.layer.TilesetLayer({
|
name: "合肥国家大学科技园",
|
url: "//data.mars3d.cn/3dtiles/qx-hfdxy/tileset.json",
|
position: { alt: -24 },
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024
|
})
|
map.addLayer(tiles3dLayer)
|
|
// 创建矢量数据图层
|
graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
// 2.在layer上绑定监听事件
|
graphicLayer.on(mars3d.EventType.click, function (event) {
|
console.log("监听layer，单击了矢量对象", event)
|
})
|
|
// 可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
|
graphicLayer.bindPopup("我是layer上绑定的Popup")
|
|
// 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
|
graphicLayer.bindContextMenu([
|
{
|
text: "删除对象",
|
icon: "fa fa-trash-o",
|
callback: function (e) {
|
const graphic = e.graphic
|
if (graphic) {
|
graphicLayer.removeGraphic(graphic)
|
}
|
}
|
}
|
])
|
|
createVideoDom()
|
addDemoGraphic1()
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
export function onUnmounted() {
|
map = null
|
}
|
|
const flvUrl = "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv"
|
|
function createVideoDom() {
|
videoElement = mars3d.DomUtil.create("video", "", document.body)
|
videoElement.setAttribute("muted", "muted")
|
videoElement.setAttribute("autoplay", "autoplay")
|
videoElement.setAttribute("loop", "loop")
|
videoElement.setAttribute("crossorigin", "")
|
videoElement.setAttribute("controls", "")
|
videoElement.style.display = "none"
|
|
if (window.flvjs.isSupported()) {
|
const flvPlayer = window.flvjs.createPlayer({
|
type: "flv",
|
url: flvUrl
|
})
|
flvPlayer.attachMediaElement(videoElement)
|
flvPlayer.load()
|
flvPlayer.play()
|
} else {
|
$message("不支持flv格式视频")
|
}
|
|
setTimeout(() => {
|
try {
|
if (videoElement.paused) {
|
globalMsg("当前浏览器已限制自动播放，请单击播放按钮")
|
videoElement.play()
|
}
|
} catch (e) {
|
// 规避浏览器权限异常
|
globalMsg("当前浏览器已限制自动播放，请单击播放按钮")
|
}
|
}, 3000)
|
}
|
|
// 加载已配置好的视频（此参数为界面上“打印参数”按钮获取的）
|
function addDemoGraphic1() {
|
video2D = new mars3d.graphic.Video2D({
|
position: [117.205459, 31.842988, 64.3],
|
style: {
|
container: videoElement,
|
angle: 46.3,
|
angle2: 15.5,
|
heading: 178.5,
|
pitch: 8.2,
|
distance: 78,
|
showFrustum: true
|
}
|
})
|
graphicLayer.addGraphic(video2D)
|
|
eventTarget.fire("loadVideo", {
|
value: {
|
cameraAngle: video2D.angle,
|
cameraAngle2: video2D.angle2,
|
heading: video2D.heading,
|
pitchValue: video2D.pitch,
|
distanceValue: video2D.distance,
|
opcity: video2D.opacity,
|
ckdFrustum: video2D.showFrustum
|
}
|
})
|
}
|
|
// 投射视频
|
export function addVideo(data) {
|
graphicLayer.clear()
|
// 开始绘制
|
graphicLayer.startDraw({
|
type: "video2D",
|
style: {
|
container: videoElement,
|
angle: data.cameraAngle,
|
angle2: data.cameraAngle2,
|
heading: data.heading,
|
pitch: data.pitchValue,
|
opcity: data.opacity,
|
distance: data.distanceValue,
|
showFrustum: data.ckdFrustum
|
},
|
success: function (graphic) {
|
console.log("绘制完成", graphic)
|
|
video2D = graphic // 记录下
|
}
|
})
|
}
|
|
// 按当前相机投射视频
|
export function addThisCamera(data) {
|
graphicLayer.clear()
|
// 取屏幕中心点
|
const targetPosition = map.getCenter({ format: false })
|
if (!targetPosition) {
|
return
|
}
|
|
const cameraPosition = Cesium.clone(map.camera.position)
|
|
// 构造投射体
|
video2D = new mars3d.graphic.Video2D({
|
position: cameraPosition,
|
targetPosition: targetPosition,
|
style: {
|
container: videoElement,
|
angle: data.cameraAngle,
|
angle2: data.cameraAngle2,
|
opacity: data.opcity,
|
showFrustum: data.ckdFrustum
|
}
|
})
|
graphicLayer.addGraphic(video2D)
|
}
|
|
// 清除
|
export function clear() {
|
graphicLayer.clear()
|
video2D = null
|
}
|
|
export function playOrpause() {
|
video2D.play = !video2D.play
|
}
|
|
// 改变水平角度
|
export function onChangeAngle(value) {
|
if (video2D) {
|
video2D.angle = value
|
}
|
}
|
|
// 改变垂直角度
|
export function onChangeAngle2(value) {
|
if (video2D) {
|
video2D.angle2 = value
|
}
|
}
|
|
// 改变投射距离
|
export function onChangeDistance(value) {
|
if (video2D) {
|
video2D.distance = value
|
}
|
}
|
|
// 改变四周距离
|
export function onChangeHeading(value) {
|
if (video2D) {
|
video2D.heading = value
|
}
|
}
|
|
// 改变俯仰角度
|
export function onChangePitch(value) {
|
if (video2D) {
|
video2D.pitch = value
|
}
|
}
|
|
/**
|
*
|
* @export
|
* @param {boolean} isCheckde 线框是否显示
|
* @returns {void}
|
*/
|
export function showFrustum(isCheckde) {
|
if (video2D) {
|
video2D.showFrustum = isCheckde
|
}
|
}
|
|
// 改变视频透明度
|
export function onChangeOpacity(value) {
|
if (video2D) {
|
video2D.opacity = value
|
}
|
}
|
|
/**
|
* 视频角度
|
*
|
* @param {number} num 0-360°
|
* @returns {void}
|
*/
|
export function rotateDeg(num) {
|
if (video2D) {
|
video2D.setStyle({ stRotationDegree: num })
|
}
|
}
|
|
// 定位至视频位置
|
export function locate() {
|
if (video2D) {
|
video2D.setView()
|
}
|
}
|
// 打印参数
|
export function printParameters() {
|
if (video2D) {
|
const params = video2D.toJSON()
|
console.log("Video2D构造参数为", JSON.stringify(params))
|
}
|
}
|
// 视频位置
|
export function selCamera() {
|
if (video2D == null) {
|
return
|
}
|
|
map.graphicLayer.startDraw({
|
type: "point",
|
success: (graphic) => {
|
const point = graphic.point
|
graphic.remove() // 删除绘制的点
|
|
video2D.position = point
|
}
|
})
|
}
|
|
// 四周视角选点
|
export function onClickSelView() {
|
if (!video2D) {
|
return
|
}
|
|
map.graphicLayer.startDraw({
|
type: "point",
|
success: (graphic) => {
|
const point = graphic.point
|
graphic.remove() // 删除绘制的点
|
|
video2D.targetPosition = point
|
}
|
})
|
}
|
