飞渡api网页初始化html和vue2
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>html</title>
<!--js文件夹里放js，js文件夹和网页在同一个根目录下-->
<script src="js/ac.min.js"></script>
</head>
<body>
<div class="player" id="player" style="width: 1600px;height: 800px;"></div>
<script>
function _onReady() {
}
function _onEvent() {
}
function _onLog() {
}
//构造DigitalTwinPlayer对象所需的参数选项，更多参数详情请参考API开发手册里DigitalTwinPlayer对象
let options = {
//必选参数，网页显示视频流的domId
domId: 'player',
ui: {
//可选参数，是否显示页面加载详细信息，默认值false
startupInfo: true,
//左上角闪烁的状态指示灯，可以从不同的颜色看出当前的状态，具体含义请参考 CloudStatus.默认值：true
statusIndicator: true,
//左下角是否显示信息按钮，点击时，会在小窗口显示当前连接的实时运行状态；鼠标停留时，会显示当前所连接实例的详细信息。默认值：false
statusButton: true,
//是否在左下角显示“全屏”按钮,默认值：false
fullscreenButton: true,
//是否在左下角显示“回到初始位置”按钮,默认值：false
homeButton: true,
//是否显示Cloud工具栏
mainUI: false,
//是否显示指北针
campass: false,
//是否在下放显示任务队列，0用不显示，1执行比较耗时的操作时显示，2一直显示
taskListBar: 1,
},
//必选参数，二次开发时必须指定，否则无法进行二次开发
apiOptions: {
//必选参数，与云渲染主机通信成功后的回调函数
//注意：只有在onReady之后才可以调用DigitalTwinAPI接口
//但是，实际上直接不要这个，或定义空方法，也不影响
onReady: _onReady,
onEvent: _onEvent,
onLog: _onLog,
},
/*
keyEventTarget参数类型：string，取值：'document', 'video', 'none'，默认值 'video'
简单来说，document是一直处于漫游状态，video是需要点击视频为焦点，none是禁止漫游
*/
keyEventTarget: 'video',
}
let host = '127.0.0.1:8080';
//构造player对象
let demoPlayer = new DigitalTwinPlayer(host, options);
//构造DigitalTwinAPI对象并初始化
let airCityApi = demoPlayer.getAPI();
</script>
</body>
</html>vue2
根目录vue2(文件夹)
public(文件夹)
index.html
ac.min.js
jquery-3.5.0.min.js
src(文件夹)
css(文件夹)
sandTable.scss
views(文件夹)
vue2.vue
App.vue
main.js
index.html
<!DOCTYPE html>
<html lang="" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="/ac.min.js"></script>
<script src="/jquery-3.5.0.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang="scss">
#app {
width: 1920px;
height: 1080px;
transform-origin: 0 0;
overflow: hidden;
position: relative;
}
</style>vue2.vue
<template>
<div>
<div id="player" class="player"></div>
</div>
</template>
<style lang="scss">
@import "../css/sandTable";
</style>
<script>
/* eslint-disable */
export default {
methods: {
initPlayer() {
let host = this.$iphost;
let _onReady = {};
let _onEvent = (event) => {
console.log(event);
let eventType = event.eventtype; //事件类型 参考交互事件类型枚举对象
let id = event.Id; //图层id
let objectId = event.ObjectID;
let groupId = event.GroupID;
let oId = event.OID;
let modelName = event.ModelName;
let propertyName = event.PropertyName;
let name = event.Name;
let type = event.Type;
let userData = event.UserData;
let objectLocation = event.MouseClickPoint; //当前点击位置
let coordinates = event.coordinates //绘制//平面
let coordinate = event.Coordinate//坐标
let perimeter = event.Perimeter//周长//平面
let area = event.Area//地面
let startCoordinate = event.StartCoordinate//垂直起点//直线
let endCoordinate = event.EndCoordinate//垂直终点//直线
let verticalCoordinate = event.VerticalCoordinate//垂直直角点
let horizontalLength = event.HorizontalLength
let verticalHeight = event.VerticalHeight
let length = event.Length//直线长度
switch (eventType) {
case "LeftMouseButtonClick": // 鼠标左键点击时触发方法
break;
//鼠标悬停时触发此事件
//注意需提前开启鼠标拾取：fdapi.settings.setMousePickMask(7);
case "MouseHovered":
// console.log('触发事件类型：鼠标悬停，eventType：' + eventType);
break;
//鼠标移动时触发此事件
//注意需提前开启鼠标拾取：fdapi.settings.setMousePickMask(7);
case "MouseMoved":
// console.log('触发事件类型：鼠标移动，eventType：' + eventType);
break;
//相机开始移动时触发此监听事件
//注意需先开启事件：fdapi.settings.setEnableCameraMovingEvent(true);
case "CameraStartMove":
// console.log('触发事件类型：相机开始飞行，eventType：' + eventType);
break;
//相机正在移动时触发此监听事件
//注意需先开启事件：fdapi.settings.setEnableCameraMovingEvent(true);
case "CameraMoving":
// console.log('触发事件类型：相机正在飞行，eventType：' + eventType);
break;
//相机停止移动时触发此监听事件
//注意需先开启事件：fdapi.settings.setEnableCameraMovingEvent(true);
case "CameraStopMove":
// console.log('触发事件类型：相机停止飞行，eventType：' + eventType);
break;
//对象执行focus()或相机执行set()/lookAt()/lookAtBBox()方法时触发
case "CameraChanged":
// console.log('触发事件类型：相机位置发生变化，eventType：' + eventType);
break;
//进入测量模式后，测量完成时触发此事件并返回测量结果
case "Measurement":
// console.log('触发事件类型：测量完成，eventType：' + eventType);
break;
//播放导览结束触发此事件
//fdapi.camera.playAnimation(id)和导览对象播放导览结束__g.cameraTour.play(id)均触发此事件
case "CameraTourFinished":
// console.log('触发事件类型：播放导览结束，eventType：' + eventType);
break;
default:
break;
}
};
let options = {
//必选参数，网页显示视频流的dom节点id
domId: "player",
//必选参数，二次开发时必须指定，否则无法进行二次开发
apiOptions: {
//必选回调函数，视频流加载完成回调函数
onReady: _onReady,
//可选回调函数，视频流事件交互回调函数
onEvent: _onEvent,
},
ui: {
startupInfo: false, //默认值为true，初始化过程中是否显示左上角详细信息（如果不需要，直接去掉此属性即可）
statusIndicator: false, //默认值为true，左上角闪烁的状态指示灯，可以从不同的颜色看出当前的状态
statusButton: false, //默认值为false，是否在左下角显示信息按钮（如果不需要，直接去掉此属性即可）
fullscreenButton: false, //默认值为false，是否在右下角显示全屏按钮（如果不需要，直接去掉此属性即可）
homeButton: false, //默认值为false，是否在左下角显示“回到初始位置”按钮（如果不需要，直接去掉此属性即可）
taskListBar: 1, //默认值为1，是否在下方显示“任务队列（API调用队列）”信息（0: 永不显示；1: 执行比较耗时的操作时显示；2: 一直显示）
debugEventsPanel: false, //是否显示事件详细信息（仅用于调试）
mainUI: false, //是否显示Cloud的UI工具栏，如果设置为true就显示，如果设置为false就隐藏，如果没有设置，就保持原状。
campass: false, //是否显示指北针，如果设置为true就显示，如果设置为false就隐藏，如果没有设置，就保持原状。
},
keyEventTarget: "video",
};
__g = new DigitalTwinPlayer(host, options).getAPI();
},
},
mounted() {
this.initPlayer()
},
beforeDestroy() {
__g.destroy();
},
destroyed() {
__g.destroy();
},
};
</script>
sandTable.scss
.player{
width:1920px;
height:1080px;
}main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import locale from "element-ui/lib/locale/lang/zh-CN"; // lang i18n
Vue.config.productionTip = false;
// 设置全局变量
Vue.prototype.$iphost = window.location.hostname + ":8080";//视频流
Vue.use(ElementUI, {
size: "mini",
locale,
});
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
说在后面
其实还有router的设置，就是简单百度一下就可以了。事件的触发和调用写在methods里就行了。
GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：3 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
9
0- 0
已为社区贡献3条内容
所有评论(0)