基本

1
2

# 创建基于ts的react项目
npx create-react-app xx --template typescript

详情见https://juejin.cn/post/7081281152069140494

必须依赖三个库

• react 核心代码

• react-dom 使react渲染在不同平台

• babel 转换jsx

react-dom

默认导出ReactDom对象

方法:

• render(content, target)
  • content 渲染的内容(jsx)
  • target 挂载的对象(dom对象)

组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 创建组件
class Cpn extends React.Component {
  constructor() {
    super()
    // 初始化data
    this.state = {
      xx: xxx
    }
  }
  // 组件方法作为原型方法创建
  xxMethod() {
      ...
  }
  render() {
    return JSX...
  }
}

• 当数据更新后，不推荐直接修改state数据源，必须手动调用this.setState({...})修改，react才会重新render渲染到界面
• jsx中事件绑定组件方法执行时，受到react调用了call处理，this指向为空。解决方法:
  • 绑定时用bind指定this - bind的优先级要高于call
  • 构造器中用bind重新赋值方法
  • 采用箭头函数定义方法
  • 绑定时用箭头函数包裹调用(推荐)
• 函数式组件没有状态和生命周期，但是可以用hooks解决
• 组件父类React.Component已经实现将props自动赋给this，只需要在构造器中调用super(props) 这个操作react内部已经帮我们做了可不写
• 设置静态属性displayName可定义组件在开发工具的名称，否则会默认用类名
• 官方强烈建议不要创建自己的组件基类，因此高阶组件都是通过函数，而不是创建class继承 - 组合非继承
• 懒加载组件: React.lazy(()=>import(path))

依赖

• 配置sass

  1 2	# 不需要其他配置 npm install -D sass sass-loader

静态资源

• 在标签上直接使用url图片路径，开发环境没问题，但是打包时报错

  详见vite官方文档 静态资源处理 | Vite 官方中文文档 (vitejs.dev)

  1 2 3 4 5 6 7 8 9 10

  // 用import导入，并作为路径在模板使用 import logoUrl from '@/assets/img/logo.svg'; export default defineComponent({ setup() { return { logoUrl, }; } });

import.meta

• 环境变量在import.meta.env，相当于process.env(node)
• 动态处理文件，使用import.meta.globEager，类似于require.context

vue2

源码内容

文件命名规范

• runtime 仅包涵运行时，不包涵译器
• common cjs规范(webpack1)
• esm ES规范(webpack2+)
• umd: 命名上没有特征(兼容cjs，amd异步，一般用在游览器)

源码文件(src下)

• platforms/web/entry-runtime-with-compiler:入口文件，主要覆盖$mount执行模板解析和编译

• platforms/web/runtime/index.js: 定义$mount(将首次渲染结果替换el)，patch方法(负责根据vnode生成真实node，页面初始化和diff式更新)

• core/index.js: 定义全局api，use方法(参数可能是对象或函数，对象则找install方法执行)

• core/instance/index.js: 定义vue构造函数: 初始化相关, 定义实例方法。

  • 通过initMixin为vue实例添加_init初始化方法

  • initState进行数据初始化，响应式

  • 先初始化inject再响应式再provide的原因:

    1. 注入的数据需要在响应式时进行判断
    2. inject注入的数据有可能再被provide

  • 初始化过程:
    1.new Vue()
    2.this._init(option)初始化各属性
    3.$mount调用mountComponent()
    4.mountComponent声明updateComponent方法，创建Watcher
    5._render获取虚拟dom
    6._update(调用_patch进行diff)转换为真实dom

• core/instance/init.js: 定义initMixin及其义_init方法(负责初始化和选项合并)

• core/instance/state.js:
  initData主要 获取data，设置代理，启动响应式observer

• core/observer/index.js:

  • 每个响应式数据都有一个ob属性(Observer实例)

  • 为什么要在Observer实例也要创建一个dep:

    为了对象或数组新增删除属性等内部变动时也能通知更新

  • data数据中这些实例的个数:observer(对象个数)，dep(key个数)，watcher(组件个数)

• core/observer/array.js:
  对数组变动七个方法覆盖并新增通知更新功能notify(来自数组对象上放置的ob的dep)

其他

• package.json=>dev对应的target指明对应配置文件，在entry找到入口文件位置

• 源码判断顺序优先级:render>template>el。template实际上还是经过ast抽象语法树解析成render，生成vnode再挂载到页面

• template选项设置后不$mount则模板数据不会解析

• 组件创建是自上而下，挂载是自下而上

• vue2中dep和watcher是多对多，dep管理一个key的一组watcher，一个wacher管理一个组件，组件内可以也有多个用到的key对应其dep

响应式原理

梗概

1. Object.defineProperty监听对象属性改变。
2. 发布者订阅者设计模式，当数据改变时通知界面对应更新。
   • Observer类执行数据响应化(要分辨对象和数组)，每监听一个数据创建对应的Dep实例(添加订阅者)
   • Dep依赖管理类管理某个key(响应式数据的key)对应的多个Watcher，批量更新
     依赖管理思路:
     1. defineReactive响应化时为每个key创建Dep实例
     2. 初始化视图时每读取一个key新增一个Watcher
     3. 由于触发响应数据getter，将每个Watcher添加到对应的Dep中，相同的key添加到同一个Dep
     4. 响应式数据更新触发setter，通过对应Dep通知其下的所有Watcher更新
        • Watcher类负责执行自身更新视图。update实例方法
        • Compiler类执行编译(模板，指令)，初始化视图，收集依赖(更新视图，Watcher创建)
          正则.匹配任意字符(除特殊字符)，*表示0或多个。regExp.$n拿到匹配(test)到的内容的第n个()中内容
        • defineProperty对应get触发时创建并添加订阅者，对应set时调用notify更新相关视图
          Dep静态属性target保存当前的watcher，再手动触发getter添加到Dep依赖后就置空

• vue1中是细粒度的数据变化侦测，会造成大量开销。vue2中每个组件只有一个watcher(中粒度)，通过diff+vnode行局部更新

• 为什么每个key都创建dep

  为了能服务于watch，computed等不需要执行render渲染视图，只需要执行回调的key，需要这种低粒度的watcher

  创建dep流程：·new Watcher() => render() => get() => dep

异步更新队列

vue高效的秘诀是一套批量，异步的更新策略

宏任务

独立的工作单元，游览器完成一个宏任务会重新渲染游览器再进行下一个宏任务(创建主文档对象，解析html，执行主线js(包括定时器，ajax)，各种事件)

微任务

当前宏任务执行后立即执行，有微任务游览器会清空微任务再重新渲染(promise回调，dom发生变化)
vue将所有watcher的update放到微任务队列，队列执行完毕后再一次性刷新页面。vue中的timerFunc就是根据环境兼容选择执行任务的方法，优先使用promise等微任务，都不支持时用定时器。最后执行一次run方法完成游览器的渲染

注意:定时器是与主线js同级的宏任务，因此定时器和promise都存在时，执行顺序为: 同步js=>promise的then回调=>定时器

虚拟dom和diff

虚拟dom优点

1. 轻量快速，通过vnode新旧对比进行最小的dom操作量
2. 跨平台，虚拟dom更新操作内部在不同平台(如web，app)进行不同操作达到效果
3. 兼容性，可以加入兼容性代码

patch实现

源码位置:core/vdom/patch.js

• 进行树级比较，进行增删改
  1. 没有new vnode 删(没有内容)
  2. 没有old vnode 增(初始化)
  3. 都存在就进行新旧vnode对比(diff) 再更新
     属性key就是能更方便比较不同vnode

页面更新流程

watcher.run() => componentUpdate() => render() => update=> patch()

patchVnode实现

从此处开始diff

对比新旧vnode,包括三种更新操作: 属性，文本，子节点
对比新旧vnode的子节点children有如下情况:

1. 均有子节点:
   进行diff操作，调用updateChildren
2. 只有新节点有子节点:
   清空老节点文本内容，新增子节点
3. 只有老节点有子节点:
   移除所有子节点
4. 都无子节点:
   只是文本内容替换

updateChildren实现

主要以较高效的方式对新旧vnode的children得出最小操作的重排补丁。传统方式是双循环，vue对web场景做了特殊优化:

• 新旧vnode头尾两侧有变量标记，遍历过程中都向中心靠拢，当oldStartIdx>oldEndIdx或newStartIdx>newStartIdx结束循环。
• 遍历规则:oldStartVnode和newEndVnode,newStartVnode和oldEndVnode两两交叉比较,有四种情况(reorder重排)
  • oldStartVnode和newStartVnode，或者oldEndVnode和newEndVnode满足sameVnode(key，tag，属性等依次比较)，直接patchVnode完成当前循环
  • oldStartVnode和newEndVnode满足sameVnode,说明oldStartVnode跑到oldEndVnode后面了，所以patchVnode时还需要将真实dom移动到oldEndVnode后面
  • 同理上一条对应，newStartVnode和oldEndVnode满足sameVnode，patchVnode时还需要将真实dom移动到oldStartVnode前面

以上都不符合，则只有双循环(在oldVnode中找与newStartVnode满足sameVnode的vnodeToMove进行patchVnode,并将其真实dom放到oldStartVnode前。若找不到一致key或都不满足sameVnode，会用createElem创建新dom)
如果有一方剩下节点，新的多新增，旧的多则删除

简述diff

• diff是什么: 对比vnode，得出最小dom操作内容的算法。
• 优点: 性能，跨平台，兼容
• 在哪:patch方法中，存在新旧vnode时
• 执行:
  遵循同级比较，深度优先
  1. 先假设首尾相同进行重排(reorder)比较，4种情况都不符合则开始递归双循环:
  2. 从新数组中取出一个，在节点老数组中找到sameVnode的并根据两者相对位置移动并对两者打补丁
  3. 由父节点开始对比子节点，从第一个子节点比较到最后一层的第一个子节点(向下递归)，再从第一层第二个开始。

vue还做了优化，使首尾的四个指针向中间靠拢，减少循环次数
vue在将template解析为ast对象时，标记了静态节点(起码两层嵌套是静态才算)，在diff时patch可以直接跳过,每次渲染也不用为其创建新节点

vue3

虚拟dom和diff

相比vue2中全量的双端比较做法，vue3进行了优化：

• 创建vnode tree时，根据dom中内容是否回变化，添加静态标记PatchFlags 。在新旧vnode对比时，只会对比带有静态标记的节点

v-for加key

key可以使diff算法更加准确、高效

在新旧vnode比对时，根据是否有key(通过静态标记PatchFlags 判断，vue3特有) 分别执行不同方法:

源码位置: packages => runtime-core => src =>renderer.ts

• patchUnkeyedChildren - 不使用key时

  • 直接从头部按顺序比对新旧vnode，进行patch。然后根据旧vnode多少进行移除(unmountChildren)和新增(mountChildren)
  • 相同则尽可能复用，不同则新增
  • 改动项只后的内容也会受变动

• patchKeyedChildren - 使用key 基于key变化排列元素，移除没有的元素

  • 先从头部遍历，isSameVnodeType则进行patch
  • 如果遇到不同则从尾部开始遍历, isSameVnodeType则patch，不同就停止循环
  • 还剩余新vnode则执行挂载(patch(null, ...))
  • 还剩余旧vnode则执行删除(unmount)
  • 最后剩余中间有无序的vnode，会进行交叉比对、移动；相同则patch尽可能复用，然后删除多余节点，挂载新节点

isSameVnodeType方法通过key和type对比vnode是否相同

patch方法第一个参数为null执行挂载新元素，不为空则执行更新

docker归纳

Docker让容器里面的进程直接运行在宿主机上（Docker 会做文件、网络等的隔离），这样一来 Docker 会 “体积更轻、跑的更快、同宿主机下可创建的个数更多”

安装

下载地址 安装成功后命令行执行docker会出现说明

• 在windows下安装Docker Desktop失败

  

  网上找到解决方法，推测还需要安装container服务 :

  • 创建批处理文件containers.bat，内容如下

    1 2 3 4 5 6

    pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*containers*.mum >containers.txt for /f %%i in ('findstr /i . containers.txt 2^>nul') do dism /online /norestart /add-package:"%SystemRoot%\servicing\Packages\%%i" del containers.txt Dism /online /enable-feature /featurename:Containers -All /LimitAccess /ALL pause

  • 以管理员身份运行，完成后并重启再次安装成功

• 执行指令报错:

  1	error during connect: In the default daemon configuration on Windows, the docker client must be run with elevated privileges to connect.

  发现公司电脑中没有Hyper-v

  • 创建文件 Hyper-V.cmd，内容如下

    1 2 3 4 5

    pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper-v.txt for /f %%i in ('findstr /i . hyper-v.txt 2^>nul') do dism /online /norestart /add-package:"%SystemRoot%\servicing\Packages\%%i" del hyper-v.txt Dism /online /enable-feature /featurename:Microsoft-Hyper-V-All /LimitAccess /ALL

  • 以管理员身份运行，完成后并重启

  • 再次进入 开始 —> 控制面板 —> 程序 —> 程序和功能 —> 启用或关闭windows功能

  • 一般现在已经有了，但我公司电脑还是没找到，可能系统不是正版。。。 行！那我去官网更新系统 下载 Windows 10 (microsoft.com) 。经过一个小时的折磨，更新后终于有了hyper-v，启动docker也不再报错。

核心

• Image： 镜像

  和 windows 的那种 iso 镜像相比，Docker 中的镜像是分层的，可复用的，而非简单的一堆文件迭在一起（类似于一个压缩包的源码和一个 git 仓库的区别）。

• Container ：容器

  • 容器的存在离不开镜像的支持，他是镜像运行时的一个载体

  • 依托 Docker 的虚拟化技术，给容器创建了独立的端口、进程、文件等“空间”，Container 就是一个与宿机隔离 “容器”。容器可宿主机之间可以进行 port、volumes、network 等的通信。

• Repository ：仓库

  • 与git仓库相似，拥有仓库名、tag。在本地构建完镜像之后，即可通过仓库进行镜像的分发 。
  • 常用的 Docker hub 有 https://hub.docker.com/ 、 https://cr.console.aliyun.com/ 等

起因

公司内部的node工具、插件、组件，可以使项目开发效率得到大大的提升。将其发布到npm可以集中进行下载管理。

但是发布到npm的模块是开源的，我们只能共享大家都能用的开源模块 。 而对于公司的业务代码我们当然是不能开源的。这时候就需要搭建一个类似于 https://www.npmjs.com/平台私有的npm仓库，用于企业里面常用的业务模块，如业务组件的存放和快速安装。

优势

• 便于管理企业内的业务组件或者模块
• 私密性
• 确保npm服务快速、稳定
• 控制npm模块质量和安全（防止恶意代码植入）

verdaccio

业界主流的私有npm仓库搭建的方案有如下几种：

1. 付费购买
2. 使用 git+ssh 这种方式直接引用到 GitHub 项目地址
3. 使用 sinopia
4. 使用 verdaccio

方案1: 需要公司提供经费，而且npm在国内访问慢，体验也不一定好

方案2: 不能更新即 npm update 不能使用semver（语义化版本规范）

方案3: sinopia 虽然开源，但已经好久没有人维护，坑比较多

方案4: verdaccio 是 sinopia 开源框架的一个fork，开源免费且尚在维护

安装

只需要npm环境，全局安装：

1

npm install -g verdaccio

运行

安装完成后在命令行输入:

1

verdaccio

此时服务已经在红框地址启动(默认4873端口)，可以打开这个地址进入首页

全局配置

• mode 打包模式
  • "development" 打包结果不会被压缩
  • "production" 打包结果被压缩
• devtool
  • "source-map" 生成sourcemap文件，报错会映射到源码位置，便于调试
  • "eval" 默认值 打包将每个模块执行eval，打包速度快，但调试不方便

loader

webpack默认只能处理js模块，可以使用loader对其他类型模块进行处理

样式

• 打包处理css文件需要:

1. 安装 style-loader和css-loader
2. 在webpack.config.js中新增配置节点module，module有rule属性(数组)存放所有第三方文件匹配处理规则

1
2
3
4
5
6

module:{
  rules:[  
    {test: /\.css$/, use: ['style-loader', 'css-loader']} 
  //test内是匹配的文件的正则，use规定加载器
  //use中的loader从右往左执行，右边执行完成后将结果交给左边的loader，最后将结果给webpack
]}

• 加载less文件用less-loader ， 记得安装less
• 加载**scss(sass)**用sass-loader(依赖node-sass) 安装node-sass一般用cnpm, 否则可能失败。vue脚手架创建的项目可能出现this.getResolve not found，使用8以下的sass-loader版本

兼容：postcss-loader搭配postcss-preset-env插件可兼容大多数现代游览器样式

url地址

webpack默认不能处理url地址，需要使用url-loader(依赖于file-loader)

file-loader读取静态文件模块，url-loader与file-loader相似，但可将较小文件url转换为base64的uri

1
2
3
4
5
6

module:{
  rules:[  //test中为匹配图片文件正则
    {test: /\.(jpg|jpeg|png|bmp|gif)$/, use: 'url-loader'} //use的值可用url中?方式传参
		  //test中为匹配字体文件的正则(bootstrap.css中就有)
    {test: /\.(eot|ttf|svg|woff|woff2)$/, use: 'url-loader'}  
]}

• use属性的值可用url中?方式传参(&分隔) ：
  • limit — 当文件大小不超过limit设置的字节数时才使用base64格式(默认全部使用base64)
  • name — 设置处理后路径中的目标文件名, 它的值可以写：
    • [hash:n] — n位数的随机hash值
    • [name] — 原目标文件名
    • [ext] — 原目标文件后缀

1
2

'url-loader?limit=字节数&name=[hash:8]-[name].[ext]'
//多个图片重名会被最后一个覆盖，这样设置name避免重名

内联方式指定模块loader: import "<loaderName">!<modulePath>

资源模块类型

在webpack5中，可以使用不同的type属性来代替一些资源loader，可以是如下值:

• asset/resource 发送单独文件并导出url (之前用file-loader)
• asset/inline 导出data uri (之前用url-loader转base64)
• asset/source 导出资源源代码 (之前用raw-loader)
• asset 自动选择发送文件或转为data uri，通过parser.dataUrlConfition配置转换条件 (之前用url-loader并配置limit为转换条件)

使用该方法可通过type统同级的generdator配置输出的规则

介绍

Pannellum是基于WEB的轻量级VR全景图阅读器

特性

有如下良好的特性支持不同的需要：

1. 支持自动载入和手动载入全景图
2. 支持全景图的自动旋转和手动旋转方式
3. 支持预览图设定
4. 支持标注作者和标题
5. 支持罗盘指示
6. 支持Cube map（定义多张图片，组成全景图）
7. 支持初始视角的定义
8. 支持部分全景展示
9. 支持自定义的全景移动控制
10. 支持自定义热点
11. 支持多分辨率
12. 支持tour模式（从一全景图切换到另一全景图）
13. 支持全景视频

兼容性

Pannellum兼容性良好，基本能支持主流的浏览器，基本能够完全支持的浏览器如下：

• Firefox 10+
• Chrome 15+
• Safari 8+
• Internet Explorer 11+
• Edge

使用代码

初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

//多场景，需要scenes及firstScene指定默认场景
const viewer = pannellum.viewer(容器元素或id, {
    firstScene: 'firstScene', 
    showControls: false, 
    autoLoad: true,
    //autoRotate: -1,
    //autoRotateInactivityDelay: 2000, 
    //orientationOnByDefault: true, 
    //mouseZoom: false 
    //minPitch: -100, 
    //maxPitch: 100, 
    //hfov: 100, 
    //minHfov: 60, 
    //maxHfov: 60, 
    scenes: {
      firstScene: {
        title: "第一个场景",
        type: "cubemap",
        cubeMap: [
          "./example_front.jpg",
          "./example_right.jpg",
          "./example_behind.jpg",
          "./example_left.jpg",
          "./example_up.jpg",
          "./example_down.jpg"
        ],
        hotSpots: [
          {
            //热点，以全景为坐标系的固定点，可以设置链接跳转和点击事件，也可以跳转到不同的场景，该属性的值为对象
            pitch: -12,
            yaw: 170,
            type: "scene",
            sceneId: "secondScene", //sceneId 需要切换的场景id
            text: "点击前往第二个场景."
          }
        ]
      },
      secondScene: {
        title: "第二个场景",
        panorama: 'example2.jpg',
        hotSpots: [
          {
            pitch: 0,
            yaw: 100,
            type: "scene",
            text: "前往第一个场景",
            sceneId: "firstScene",
            clickHandlerFunc(e) {
              //监听点击
            },
            createTooltipFunc(e) {
              //调整热点dom
              e.style.width = "100px";
              e.style.height = "100px";
              e.style.background = "red";
            }
            //cssClass: "pnlm-hotspot pnlm-model pnlm-scene1 pnlm-type1" //添加热点css类
          }
        ]
      }
    }
  });

1
2
3
4
5
6
7

//单个场景,主要设置panorama
const viewer = pannellum.viewer(容器元素或id, {
  type: "equirectangular", //图片类型
  panorama: 'example.jpg', //全景图
  autoLoad: true, //自动加载，否则需要点击
  showControls: false //是否显示控制按钮
});

config

pannellum.viewer初始化参数。类型为Object，其属性配置项如下：

• id: string 热点id，供 removeHotSpot 删除热点使用

• type:string 指定全景图类型，默认 equirectangular

  • equirectangular 等矩形
  • cubemap 立方体 - 六个方向
  • multires 多分辨率 - 根据缩放的程度（改变Hfov）来显示不同清晰度的照片

• title:string 左下角标题

• firstScene:string 指定首次展示的场景sceneId

• compass:boolean 显示指南针

• draggable:boolean 是否可拖动

• showControls:boolean 显示控制按钮

• autoLoad: boolean 自动加载，否则需要点击

• autoRotate: number 自动旋转，正数向右，负数向左，绝对值越大速度越快

• autoRotateInactivityDelay: number 停止操作多久(ms)继续旋转

• orientationOnByDefault: boolean 开启重力感应查看模式

• mouseZoom: boolean 鼠标滚轮缩放

• minPitch: number 俯仰角度最小值

• maxPitch: number 俯仰角度最大值

• hfov: number 视野(远近缩放)

• minHfov: number 视野最小值

• maxHfov: number 视野最大值

• hotSpots: object 设置热点，配置属性如下:

  • pitch: number 俯仰角度 - 绕x轴旋转
  • yaw: number 偏移角度 - 绕y轴旋转
  • type: string 热点类型:
    • "scene" 场景链接
    • "info" 信息热点
  • text: string hover时显示的文本
  • sceneId: string 目标场景id，热点type为"scene"时指定跳转的场景
  • targetPitch:number 热点type为"scene"时指定跳转场景的初始俯仰角
  • targetYaw:number 热点type为"scene"时指定跳转场景的初始偏移角
  • targetHfov :number 热点type为"scene"时指定跳转场景的初始视野
  • scale:boolean 是否缩放热点以匹配视野变化(近大远小)，默认false
  • URL:string 设置后点击该热点会跳转到对应外部链接
  • image:string 设置后热点tooltip会弹出对应图片，图片太大会超出屏幕
  • video:string 设置后热点tooltip会弹出对应视频，视频太大会超出屏幕
  • cssClass :number指定热点元素的css类，而不是默认的类
  • clickHandlerArgs:any clickHandlerFunc热点点击参数
  • clickHandlerFunc(event, clickHandlerArgs):function 监听热点点击
  • createTooltipArgs:any createTooltipFunc自定义热点工具参数
  • createTooltipFunc(iconDom, createTooltipArgs):function 用于自定义热点工具提示dom, 配置后默认tooltip消失 (直接对参数 - 热点图标dom操作)

• hotSpotDebug:boolean 开启场景热点调试模式，中间会出现准心，单击时会打印俯仰和偏移等点信息

• scenes:object 场景组，其属性名代表着场景的id（sceneId），属性值为viewer的配置参数(config)，其参数会覆盖默认（上述中的default对象）设置的参数

在function类型的配置项中, this可获取场景及热点、位置等信息clickHandlerFunc回调中的this对添加热点时自定义的属性也会保留

特定选项

type为不同值时特有选项: equirectangular, cubemap, 或 multires

equirectangular

• panorama:string 全景图路径
• haov:number 全景水平视角，默认360。如果图像在水平方向未覆盖360度可设置此项
• vaov:number 全景垂直视角，默认180。如果图像在垂直方向上未完全覆盖180度可设置此项
• vOffset:number 图形中心相对于地平线的垂直偏移，默认0。vaov小于180且图像源未对称剪裁时使用
• ignoreGPanoXMP:boolean 为true忽略任何嵌入的Photo Sphere XMP 数据，否则会覆盖现有设置

cubemap

• cubeMap:array 设置六个立方体面图像URL，顺序为前、右、后、左、上、下

针对拆分全景图片的投影方式，即将整个投影空间看作一个立方体，具有前后左右上下6个面，分别将各个拆分全景图片渲染在对应的各个面上，在感官上也能够达到柱面投影的效果

multires

• multiRes:object

  • basePath 设置一个公用路径，后面的path只需要写相对于basePath的相对路径即可，这里需要注意的是path的值，path的值是一个格式化的字符串，其中 %l 代表缩放等级，**%s** 代表立方体的面 ，**%x** 和 %y 代表了该瓦片在这一个面中的位置。 其文件结构如图：

    )

    当缩放等级为1时，就会在“1”文件夹中将各个面对应的图片投影到对应的立方体面上（对应%s），然后根据每一个瓦片的坐标来确定瓦片在每一个面中的位置，这里由于坐标是（0,0），且每一面只有一个瓦片，所以是铺满整面，多个瓦片的效果可以看上面的实例。

  • fallbackPath 当某些浏览器不支持multires功能的时候能够回退到fallbackPath指定的文件夹下加载默认的全景图

  • extension指定瓦片的图片格式，不需要加前面的 “.” 符号

  • ileResolution指定瓦片的像素，单位为px。

  • maxLevel指定最多支持几个缩放等级。

  • cubeResolution指定立方体面的总像素，单位为px。

如此就能够根据不同的缩放等级来显示不同的清晰度的图像，这样的好处是如果要加载一张4k的全景图，不需要一次性就将整个全景图都加载进来，可以先加载一个缩放等级低的全景，然后当使用者进行缩放查看细节的时候再加载清晰度更高的图像，这样就可以明显提高加载速度，避免因为图片过大使得加载时间过长和不必要的流量浪费。不足之处就是需要为一张全景图额外准备不同清晰度的图片，增加了图片处理的工作量，也增加了图片存储的空间占用。

动态内容

当前仅支持 equirectangular

• dynamic:boolean 将全景图视为动态源，默认false。比如全景源为视频的情况需要设置true
• dynamicUpdate:boolean 使查看器对动态内容自动更新。如果更新是通过setUpdate方法控制则设为false

事件

事件通过viewer.on(eventName, callback)监听，eventName:string如下:

• load 全景图加载完成
• scenechange 新场景初始化完成
• fullscreenchange 全屏状态切换
• zoomchange 场景 hfov 视野变化
• scenechangefadedone 若指定了场景淡入淡出间隔，则在淡入淡出完成后触发
• animatefinished 任何动画/移动完成时触发，也就是渲染器停止渲染新帧。将最终pitch、yaw、hfov值传递给回调
• error 发生错误
• errorcleared 清除错误
• mousedown 鼠标按下
• mouseup 鼠标抬起
• touchstart 触摸开始(移动端)
• touchend 触摸结束(移动端)

全局api

通过viewer调用，这里只介绍常用api

方法

• addHotSpot(hs, sceneId)添加热点

  • parameters：hs - 热点参数, sceneId - 添加目标场景id(默认是当前场景id)
  • return: viewer

• mouseEventToCoords(MouseEvent) 根据鼠标事件参数获取在全景图中的位置

  • parameters：鼠标事件参数MouseEvent

• return: 数组 - [pitch, yaw]

• resize 容器大小改变后需要调用此方法重新布局全景

• destroy 销毁

• getContainer 获取容器dom

• getConfig 获取配置对象

• getPitch 获取全景图中心点俯仰角

• setPitch(pitch, animated, callback, callbackArgs) 设置全景图中心点俯仰角

  • parameters：
    • pitch:number 俯仰角
    • animated:(boolean|number) 移动动画时间(ms)，默认1000，设为false则没有动画
    • callback(callbackArgs):function 移动动画完成
    • callbackArgs:any 传给callback的参数
  • return: viewer

• getPitchBounds 获取俯仰角范围，返回 - [minpitch, maxpitch]

• setPitchBounds 获取俯仰角范围，参数 - [minpitch, maxpitch]

• getYaw 获取全景图中心点偏移角

• setYaw(yaw, animated, callback, callbackArgs) 设置全景图中心点偏移角

  • parameters：
    • yaw:number 偏移角
    • animated:(boolean|number) 移动动画时间(ms)，默认1000，设为false则没有动画
    • callback(callbackArgs):function 移动动画完成
    • callbackArgs:any 传给callback的参数
  • return: viewer

• getYawBounds 获取偏移角范围，返回 - [minyaw, maxyaw]

• setYawBounds 获取偏移角范围，参数 - [minyaw, maxyaw]

• getHfov 获取全景图水平视野

• setHfov(hfov, animated, callback, callbackArgs) 设置全景图水平视野

  • parameters：
    • hfov:number 水平视野
    • animated:(boolean|number) 移动动画时间(ms)，默认1000，设为false则没有动画
    • callback(callbackArgs):function 移动动画完成
    • callbackArgs:any 传给callback的参数
  • return: viewer

• getHfovBounds 获取水平视野范围，返回 - [minhfov, maxhfov]

• setHfovBounds 获取水平视野范围，参数 - [minhfov, maxhfov]

• lookAt(pitch, yaw, hfov, animated, callback, callbackArgs)

  将视图中心聚焦到指定位置

  • parameters：

    • pitch:number 目标pitch

    • yaw:number 目标yaw

    • hfov:number 目标hfov

    • animated:(boolean|number) 移动动画时间(ms)，默认1000，设为false则没有动画

    • callback(callbackArgs):function 移动动画完成

    • callbackArgs:any 传给callback的参数

  • return: viewer

• startAutoRotate(speed, pitch) 开始自动旋转

  • parameters：
    • speed:number 旋转速度/方向
    • pitch:number 旋转俯仰角
  • return: viewer

• stopAutoRotate 停止自动旋转

• stopMovement 停止所有移动

• loadScene(sceneId, pitch, yaw, hfov) 加载指定场景

• getScene 获取当前场景sceneId

• addScene(sceneId, config) 添加场景

• removeScene(sceneId) 移除场景

• toggleFullscreen 切换全屏

• isLoaded 全景图是否加载完成

• on(eventName, callback) 监听事件，详情见上文事件

• on(eventName, callback) 移除事件

自定义热点图标

自定义热点图标可用以下两种方式：

• createTooltipFunc 直接对参数(图标dom)进行dom操作，是在默认图标的基础上调整
• cssClass 通过添加自定义css类来完全自定义图标样式，高度定制化样式则推荐这种方式

动态添加热点

1
2
3
4
5
6
7
8
9
10
11
12
13
14

viewer.on("mouseup", e => {
  const [pitch, yaw] = viewer.mouseEventToCoords(e);
  viewer.addHotSpot({
    type: "scene",
    pitch,
    yaw,
    text: "提示内容",
    sceneId: "secondScene",
    cssClass: "mark", //自定义样式class
    clickHandlerFunc(e) {
      viewer.removeHotSpot(this.id);//删除点击的热点
    }
  });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//上面直接监听mouseup在拖动位置时会意外触发,可封装点击事件解决:
export function onPnlmClick(viewer, callback) {
  let timer = null;
  viewer.on("mousedown", e => {
    timer = setTimeout(() => {
      clearTimeout(timer);
      timer = null;
    }, 120);
    e.preventDefault();
  });
  viewer.on("mouseup", e => {
    if (timer) callback(e);
  });
}

随笔

使用node.js的process内置模块和fs文件模块创建了建议的命令行工具，能快速创建私人定制的h5项目(使用rem适配 + zepto.js + swiper.js + h5兼容代码)

js

技巧

• 对象合并技巧

  若字段相等则会都被后一个的值覆盖

  • Object.assign(obj1, obj2)参数为简单类型则深拷贝，引用类型则浅拷贝。
  • {...obj1, ...obj2}

• 数组转对象:

  • {...arr}

  • for(var key in arr){obj[key] = arr[key]}

• 深拷贝

  • 判断类型+创建空数据递归赋值(还是最靠谱)
  • JSON.parse(JSON.strighfy(obj)) ,若元素有函数等非JSON格式对象，如正则、Error、NaN，则会丢失或出错，Data类型会成为字符串

• 浅拷贝,除直接赋值外。元素为简单类型则深拷贝，引用类型则浅拷贝,本质上还是浅拷贝
  • 对象可用{...obj}，
  • 数组可用[...arr]、new Array(...arr)、Array.from(arr)，slice、concat