多多洛爱学习

测试是保证代码质量的重要环节，web项目的单元测试虽然不能完全完成功能测试，但是却能保证底层单一模块的工作质量，并且在代码重构的时候保证对外接口不会发生变化。 Mocha 是一个灵活的测试框架，但它只是一个结构，你需要引入其他插件来实现一些测试功能，比如断言库、覆盖统计等。 M…

首先需要了解下WebGL2相对于第一代有什么变化，能给项目带来什么收益。 WebGL2是基于OpenGL ES 3.0实现的Web API，核心是WebGL2RenderingContext接口，是对WebGL1上下文对象的一次扩展，在100%向后兼容的基础上还提供了非常多的新…

位置数据是连接线上线下的重要信息资源，在前端借助于图形化的手段将数据有效呈现是进行数据分析的重要手段。基于此，我们开发了基于地图的数据可视化组件，以附加库的形式加入到JSAPI中，目前主要包括热力图、散点图、区域图、迁徙图。 热力图是以颜色来表现数据强弱大小及分布趋势的可视化类…

我们都知道for...in会遍历原型链上的属性，所以一般会结合hasOwnProperty来判断属性是否在对象自身上，而不是在原型链上。 于是我动起了小心思，使用字面量创建的对象或者数组，不是类的实例，原型链上干干净净的，那遍历的时候也没必要判断了吧。于是就在遍历字面量对象时放…

本文探索在Web前端实现AR导航效果的前沿技术和难点。 1. AR简介 2. 技术难点 不同设备不同操作系统以及不同浏览器带来的兼容性问题主要体现在对获取视频流和获取设备陀螺仪信息的支持上。 navigator.getUserMedia()已不推荐使用，目前新标准采用navig…

在小程序中使用canvas组件绘制地铁图，地铁图包括地铁线路、站点图标、线及站点名称文字，绘制元素为线、圆、图片、文字。 支持拖动平移和双指缩放。 小程序中的canvas性能有限，特别在交互的过程中不断触发重绘会引发严重卡顿。 在不考虑优化的情况下，先说说如何实现绘制和交互。 …

地图的渲染原理请自行了解：Web地图呈现原理，其中重点了解地图数据以瓦片为单位进行加载和绘制这一点即可。在3D地图中，由于有俯仰角和水平旋转角的存在，墨卡托投影上的可视范围与可视窗口大小并不相同，会呈现一个梯形： 当俯仰角增大时，梯形上半部分会快速扩大，导致加载的瓦片过多而影响…

瓦片根据加载的先后顺序依次排列绘制到大纹理上，占位宽度一致，竖向排列。比如若瓦片大小为256px，那么瓦片1的位置为{x:0, y:0}, 瓦片2的位置为{x:0, y:256}。 然后出现了一系列问题：1. 瓦片错乱：瓦片1的位置显示了瓦片4的内容；2. 瓦片内容倒置。 根据…

在地图上添加覆盖物有两种方式，一是在canvas画布上渲染，比如JSAPI GL绘制MultiMarker/MultiPolygon等矢量图形覆盖物就是通过编写对应图形的数据解析及渲染程序，直接绘制在底图上层。这样的渲染方式下视角变换时图形也可以实现3D形变。另一种方式是通过C…