青理工大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 是存放在平台上面的场景id
      atom.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 这种语法报错提示，一般都是版本问题