# 底层技术

大屏需求多数可借助高度封装的组件库/工具库较快完成，部分需求需要使用偏底层的技术进行开发，Web 端常用的底层技术如下：

• CSS3： CSS 的最新标准，提供令人兴奋的 animation、transition、transform、gradients、filter 等属性。
• SVG： 可缩放矢量图形（Scalable Vector Graphics），是基于可扩展标记语言（标准通用标记语言的子集）的用于描述二维矢量图形的一种图形格式。
• Canvas 2D： Canvas 通过 JavaScript 来绘制 2D 图形，通过逐像素来进行渲染，可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
• Canvas 3D WebGL： WebGL（Web Graphic Library）是一个 JavaScript API，用于在任何兼容的 Web 浏览器中渲染 3D 图形。WebGL 程序由用 JavaScript 编写的控制代码和用 OpenGL 着色语言（GLSL）编写的着色器代码构成，这种语言类似于 C 或 C++，可在 GPU 上执行。

直接使用这些底层技术的 API 略显繁琐，社区有一些流行的基础绘图库，对这些底层技术进行轻量对封装。SVG 的有 SVG、Snap、Raphaël 等，Canvas 2D 的有 zrender、ocanvas、EaselJS、PixiJS 等。

# WebGIS

# 基础名词

• 地图
• 珊格瓦片/矢量瓦片
• 投影与坐标系
• GeoJSON

# 地图库

• OpenLayers
• Leaflet
• Sinomap
• mapbox
• ArcGIS For JavaScript
• QGIS

# 地图开放平台

• 高德地图
• 百度地图
• 腾讯地图
• 天地图
• 谷歌地图

# 空间数据库

• PostGIS
• PostgreSQL
• Oracle Spatial

# 地理可视化

• supercluster
• turf
• geojs
• cesiumjs
• geohey

# 工具库

表格分类注解：

图表库：主要指通过配置与数据绘制柱状图、饼图等图表的类库，使用相对简单

绘图库：主要指通过 JS 操作实例以达到制图目的的类库，开发者需要操作更多细节

地图库：主要指以地图为主体，进行空间展示、分析的类库，开发者需要有一定的地理知识储备

# 常见问题

# 定时器

在开始写一个定时器的时候，就要把定时器清除函数写出来，并在组件销毁或页面不可见时销毁，常见的定时器如下：

• setTimeout
• setInterval
• requestAnimationFrame

# 事件

避免对象被重复添加事件监听，尤其对 window、document、body 等添加的监听，当在组件销毁时进行移除。

# 性能

如果使用 vue，则数据应避免都放在data中，模版中不使用的可在 beforeCreate/created/Mounted 等时机进行声明或赋值，减少 vue 的 Observer 带来的性能损耗。

# 分辨率适配

使用媒体查询或 JS 计算设置 html font-size，代码中单位使用 rem。设计师通常以 16px 为基准出设计图，图的单位大概率为 px，如果每个值都自己计算转换为 rem 会比较麻烦（虽然除以都能除尽且不复杂），推荐使用 postcss-pxtorem，籍此便可在代码中都直接使用 px，编译过程中该插件会根据配置的基准值将px换算为 rem。

媒体查询：

js计算：

// 方法1：监听 resize 更改 font-size
const baseFontSize = 16;
const baseWidth = 1920;
function initRem() {
  const radio = document.documentElement.clientWidth / baseWidth;
  document.documentElement.style.fontSize = `${Math.round(baseFontSize * radio)}px`;
}
initRem()
window.addEventListener('resize', initRem);

// 方法2：直接使用 vw 设置 font-size
const baseFontSize = 16;
const baseWidth = 1920;
document.documentElement.style.fontSize = `${(baseFontSize / baseWidth) * 100}vw`;

为什么要用 width/1920 而非 height/1080 呢？因为在常规操作习惯下，高度发生变化时可以很方便的使用滚动条进行操作，但横向的滚动条则没那么好用，因此最好选择通过宽度进行计算。

# 数字单位

中文常用万进制，即万、亿、万亿···，符号常用千进制，即 K、M、G、T、P···，参考见国际单位制词头或Metric_prefix。

# 时间参数

大屏一般都会有1天，7天，14天，30天的全局时间搜索框，需要注意定接口的时候不要前端去算开始时间和结束时间，然后把这个时间传给后端，因为客户端的时间和服务器的时间基本上是不一样的，而且客户端的时间可以随意更改

# 控制台

开发完成的大屏控制台不应该有日志输出和错误信息

# resize事件

大屏通常不会拖动窗口，但会有全屏与非全屏的切换，因此也需要监听 window resize 事件进行处理，处理函数中需要注意操作对象是否存在或已实例化完成。

# 数据问题

注意进行防御式编程，对服务端接口的稳定性与可靠性持怀疑态度，深层取值用 lodash 的 get，同时注意设置默认值。

# 内存泄漏

在使用 three 时，如果有路由跳转或 v-if 切换组件的情况，需要在组件销毁时调用相应实例(scene、render、material、texture等)的 dispose 方法销毁实例，如果使用了 three 的 group，可通过 group.remove(item) 移除对 item 的引用。更多 dispose 信息见How to dispose of objects

# echarts 的 size 适配

echarts 的很多 size 设置，单位只支持 px，如果屏幕要适配大小屏幕的时候，就会出现尺寸要么太小要么太大，这时可以提供一个 getSize 函数，传入基于 1080p 下的 size 得到相应尺寸的 size，如有需要监听 resize，还需在 resize 的时候重新计算与设置 option：

function getSize (size = 0) {
  const width = document.documentElement.clientWidth
  return size * width / 1920
}