青理工大work总结知识点 3

一、layui.layer的使用

layer 弹层组件开发文档 - Layui

Layer独立使用：如果layer作为独立组件来使用的话，那么我们就需要找到layer独立版本官网去下载组件包，并且需要在页面中引入jQuery 1.8以上的任意版本和layer.js。准备好插件调用就行，调用的方式也比较简单。就通过script标签引入在body或head内就行。

Layer通过layui模块化使用：如果你使用的是layui，那么你只需要在官网下载框架就行，不需要引用jQuery和layer.js，但是需要引入layui,css和layui.js。这里调用的方式有点不同，你引入插件后需要在script标签内通过layui.use(‘layer’.’callback’) 来加载模块。

二、new Audio()加载新的音频

如果想要在一个按钮，图片等组件中通过点击事件来
播放audio的内容，那么可以在函数中这样写：

click(url){//传递的参数可以自己改变let audio = new Audio()audio.src = this.url//想要播放的音频地址audio.play();}

主要思想是：audio不仅是标签，也是window的属性，可以通过新建audio来让它在每次的点击时都播放一遍音频

三、倾斜摄影模型和bim模型

BIM公司来解释什么是倾斜摄影_三维地图技术社区的博客-CSDN博客

首先，倾斜摄影并不是摄影的一个门类，而是地图测绘，三维建模的一项技术，所以大家作为摄影爱好者没有接触过这个拍摄类型也实属正常。但是这项测绘技术，是基于航拍摄影的，所以被叫做了倾斜摄影。以往的航拍测绘都是使用一台相机，垂直角度拍摄来进行测绘的，而倾斜摄影使用了五台相机，分别拍摄一个垂直加四个倾斜方向的图像，最后通过计算机的三维建模，制作出一张立体的地图模型。

BIM与超级计算机,BIM到底是什么？解读真正的BIM_weixin_39833687的博客-CSDN博客

BIM是建筑信息模型，是Building Information Modeling的缩写，也是比较直接的中文翻译形式。

BIM具有可视化、协调性、模拟性、优化性、可出图性、一体化性等特点。

四、调用相机和麦克风（Navigator.mediaDevices）

mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。

navigator.mediaDevices.getUserMedia()

navigator.MediaDevices.getUserMedia()_coder gogo的博客-CSDN博客_navigator.mediadevices.getusermedia

五、三维开发的学习（cesium）

场景 - 铯文档 (cesium.com)

Cesium Sandcastle

Cesium中文api文档 | Index - Cesium Documentation

首先我们的使用是基于公司大牛封装的 aimfusion-atom 第三方包其中基于cesium封装了许多常用可靠的api

关于Atom

Atom是基于『 Cesium 』的三维场景开发工具，是对Cesium场景操作的更高抽象，并补充了『场景图』功能，以『无序多叉树』的数据结构对场景进行规划，使场景项之间的层次结构一目了然。她直接面向开发人员，并提供了常用功能的封装（并且这个过程将贯穿她的整个生命周期）。

整个流程是在Atom初始化时自动完成的，开发人员并不需要关注其具体实现，为了讲解清楚，以下对各个节点进行了说明：

sceneTreeInformation：存储场景信息的树状json对象，在『控制台』创建的场景中，每个场景的信息都被存储在一个sceneTreeInformation中，Atom通过sceneTreeInformation生成场景图。

SceneGraph：场景图对象，场景图是处理树状结构的一大利器，Cesium中并没有提供场景图相关的操作，这在处理场景项之间相对关系时就会不太友好，举个例子，当对一个有多层结构的楼进行展开的时候，每层楼的子节点应该是跟随楼层移动的，场景图本质上就是一个无序多叉树。

Viewer：当前视图下的viewer对象，你可以像不使用Atom时一样，直接通过此对象对场景进行操作。 Cesium：Viewer类。

TreeRootNodeCollection：场景图根节点的容器，无论场景图结构如何，它最终需要添加到场景中才可以正常显示，treeRootNodeCollection对象本质上是一个PrimitiveCollection的实例，Atom内部会自动将它添加到场景中： Cesium：PrimitiveCollection类
                        
// 创建根节点容器
let treeRootNodeCollection = new PrimitiveCollection()
// 将根节点容器添加到场景中
viewer.scene.primitives.add(treeRootNodeCollection)
然后treeRootNodeCollection会作为场景图的根节点，通过遍历场景树信息不断生成子节点，最终生成场景图。

SceneItem：场景项对象，在『控制台』中创建的场景中，添加的任何一个实体都是一个场景项，它可以是标签、倾斜摄影模型、设备模型、建筑等等。

Instance：场景项实例，对Cesium原生Primitive对象的封装，方便Atom对其进行管理，实例类型包括：建筑（ABuilding）、倾斜摄影模型（AOblique）、标签（ALabel）、设备（AGLTF）、包围盒（AClassification）。

Primitive：Cesium原生Primitive对象。

<template><div class="test-container"><div id="container"></div></div>
</template><script>
import { Atom } from "aimfusion-atom";
import {ScreenSpaceEventHandler,ScreenSpaceEventType,Cartographic,Math as CesiumMath,
} from "cesium";
export default {mounted() {this.init();this.registeClick();},methods: {init() {// 在我们new Atom的时候需要传递参数// 1 ： container 是上面div的id 也就是我们存放视图的容器// 2 ： 第二个参数是一个对象 config Atom必要的配置信息// config.accessToken：Cesium凭证// config.modelUrl：模型资源地址，『 控制台/字典 』code为model_url的字典项。// config.interfaceUrl：接口地址，『 控制台/字典 』code为interface_url的字典项。// config.appkey：用户身份凭证，『 控制台/个人中心 』的appkey。//       3 ： 第三个为我们是否要关闭视图中多余的控件  视图中部件的配置，当options.refreshing为true时，将隐藏除baseLayerpicker外的所有部件。let atom = new Atom("container",{accessToken:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkODA4NWEzYy0zNzQ3LTQ2MWUtYTc5Ny01Nzg5ZTI2ZWIzMzAiLCJpZCI6MTA1MjU5LCJpYXQiOjE2NjA4OTI1OTZ9.6Fj_7ZrunqmYY9UmUksQpitas-OZnprSDfewBcnLjLA",modelUrl: "http://192.168.14.24:9000/bimres",appKey: "0db6358c5e924c6a9d0cb917c613e080",interfaceUrl: "http://192.168.14.31:14004/aim-smart-bim/",},{refreshing: true,});// 这里因为我们的窗口在查看拖动视图的时候 我们的atom是一直在加载的 如果把它挂到我们的data上去 就会造成卡顿this.atom = atom;// 获取场景信息树 44 是存放在平台上面的场景idatom.getSceneTreeInformation(44).then((item) => {// 生成场景图并将场景项渲染到视图中 item是传递的参数 也就是上面获取到的场景信息树atom.generateSceneGraph(item);// 创建场景图实例，此函数在Atom内部自动调用，不需要手动创建。let scenegraph = atom.sceneGraph;// 根据场景项id定位到场景项所在位置scenegraph.targetById(51905);});},// 为我们的视图创建一个点击事件registeClick() {// 用于构建应用程序的基本小部件。它将所有标准铯小部件组合成一个可重用的包。该小部件始终可以使用mixins进行扩展，mixins增加了对各种应用程序有用的功能。// 容器let viewer = this.atom.viewer;// 处理用户输入事件。可以添加自定义函数，以便在用户输入时执行。// 传递的参数就是 容器里的canvas。/* 名字   类型  描述
container   元素|字符串  将包含小部件的 DOM 元素或 ID。
options Viewer.ConstructorOptions   自选描述初始化选项的对象 */let handler = new ScreenSpaceEventHandler(this.atom.viewer.canvas);// 获取画布。// ScreenSpaceEventHandler/* setInputAction（action， type， modifiler）Core/ScreenSpaceEventHandler.js 1025
设置要在输入事件上执行的函数。
名字  类型  描述
action  ScreenSpaceEventHandler.PositionedEventCallback |ScreenSpaceEventHandler.MotionEventCallback |ScreenSpaceEventHandler.WheelEventCallback |ScreenSpaceEventHandler.TwoPointEventCallback |ScreenSpaceEventHandler.TwoPointMotionEventCallback    输入事件发生时要执行的函数。
type    ScreenSpaceEventType    输入事件的 ScreenSpaceEventType。
modifier    键盘事件修改器 自选发生事件时持有的键盘事件修改器键。type */handler.setInputAction((ev) => {/* position: Cartesian2
x: 361.1241455078125
y: 220.18502807617188 */
// ev 中包含的是一个 position对象 对象中分别又两个属性 xy 分别放着点击时 水平位置 和垂直 位置 console.log(ev);
// 获取场景。
/* pickPosition（windowPosition， result） → Cartesian3场景/场景.js 4005
返回从深度缓冲区和窗口位置重建的笛卡尔位置。
从 2D 深度缓冲区重建的位置可能与在 3D 和哥伦布视图中重建的位置略有不同。这是由透视和正交投影的深度值分布差异引起的。将 Scene#pickTranslucentDepth 设置为包含半透明基元的深度;否则，这实质上是通过半透明基元来挑选的。true名字  类型  描述
windowPosition  笛卡尔2    用于执行拾取的窗口坐标。
result  笛卡尔3    自选要在其上还原结果的对象。
返回：
笛卡尔位置。
抛出：
开发人员错误：不支持从深度缓冲区中选取。检查 pickPositionSupported。 */let postion = viewer.scene.pickPosition(ev.position);console.log(postion, "123");let lon = Cartographic.fromCartesian(postion);console.log(lon, "321");let lat = CesiumMath.toDegrees(lon.latitude);let long = CesiumMath.toDegrees(lon.longitude);console.log("经度", lat, "纬度", long);}, ScreenSpaceEventType.LEFT_CLICK);},},
};
</script><style lang="scss" scoped>
#container {width: 100vw;height: 100vh;
}
</style>

六、vue-router 配置

vue-router——路由配置_qq_35574727的博客-CSDN博客_vue如何配路由

vue-router详解_barnett_y的博客-CSDN博客_vue的router

vue-router：404页面路由配置_qq_38954614的博客-CSDN博客

七、new Date（）日期格式的处理

JavaScript =＞new Date() 日期格式处理_AkaCoder的博客-CSDN博客

八、新项目配置lang=‘less’出错

在项目中想使用less,安装了less和less-loader后，重启项目，终端报错

Syntax Error: TypeError: this.getOptions is not a function

意思是有语法错误。。。

解决：
通过脚手架创建的项目，发现安装引入的，用于加载.less文件，将less转化为css的less-loader版本过高，8.1版本
“less-loader”: “^8.1.1”
卸载重装低版本（7.）解决了这个问题

// 卸载
npm uninstall --save less-loader
// 安装低版本
npm install -D less-loader@7.3.0

总结
这里， Syntax Error: TypeError: this.getOptions is not a function 这种语法报错提示，一般都是版本问题