前端

坐标系定义 坐标系 描述 定义机构 备注 GCJ-02 火星坐标系/国测局坐标系 中华人民共和国国家测绘局（现自然资源部测绘地理信息局） 中国大陆所有互联网地图（如高德、腾讯、百度）都必须使用 GCJ-02 进行加密处理。 BD09 百度坐标系 百度公司 基于 GCJ-02 加密 WGS84 World Geodetic System 1984 美国国防部 国际通用的地球坐标系统，全球定位系统（GPS）采用该坐标系 CGCS2000 中国大地 2000 坐标系 中华人民共和国国家测绘局（现自然资源部测绘地理信息局） 是中国的法定大地坐标系，直接对应于国际高精度坐标系 ITRF，是一种真实物理地理坐标系 graph LR WGS84((WGS84)) CGCS2000((CGCS2000)) GCJ02((GCJ-02)) BD09((BD-09)) WGS84 -- 几乎等同 --> CGCS2000 WGS84 -- 加密转换 --> GCJ02 CGCS2000 -- 加密转换 --> GCJ02 GCJ02 -- 百度加密 --> BD09 底图平台坐标系 平台 坐标系 投影坐标系 百度地图开放平台 BD09 Web Mercator（EPSG:3857） 高德开发平台 GCJ02 Web Mercator（EPSG:3857） 腾讯位置服务 GCJ02 Web Mercator（EPSG:3857） 国家地理信息公共服务平台（天地图） WGS84 / CGCS2000 Web Mercator（EPSG:3857） mapbox WGS84 Web Mercator（EPSG:3857） 工作流程 1....

Layer 图层分类 Mapbox GL 提供了多种图层类型用于地图渲染： 图层类型 用途说明 background 用于地图背景 fill 适合用于渲染区域 line 适合用于渲染线条 symbol 用于显示符号和文本 raster 适用于显示栅格影像 raster-particle 适用于显示栅格粒子效果 circle 适合用于显示点数据 fill-extrusion 用于 3D 建筑物渲染 hillshade 用于 3D 地形渲染 heatmap 用于显示点的密度分布 sky 增强 3D 场景的天空效果 model 增强 3D 场景的沉浸感 Expression 表达式 1. 数据操作符 Data Expressions 用于获取要素数据相关的信息： get - 获取属性值 has - 检查属性是否存在 id - 获取要素 ID geometry-type - 获取几何类型 properties - 获取属性对象 feature-state - 获取要素状态 2. 相机操作符 Camera Expressions zoom - 获取当前缩放级别 3....

翻译计划： 2024.1 此文翻译自： https://blog.xnim.me/event-loop-and-render-queue#heading-task-queue 已经获取作者授权 此文主旨在于关注事件队列， 执行顺序 以及开发者如何优化代码。 完整思路如下： 事件队列 古老的操作系统不支持多线程， 那时候的事件循环就类似这样一个简单的循环: while (true) { if (execQueue.isNotEmpty()) { execQueue.pop().exec(); } } 在老的操作系统上， 这段代码会疯狂跑满全部cpu。 （真的吗？ – 年轻的译者注） 现代操作系统调度器非常复杂， 包括优先级，执行队列， 和其他的技术。 我们可以把事件循环理解为一个圆圈，系统就一圈一圈地检查， 有没有待执行的任务 （pending task）。 下面这些行为， 都会在事件循环里生成任务： script 标签 延迟任务： setTimeout, setInterval, requestIdleCallback 浏览器的事件处理API: click， mousedown, input, blur 等等。 有一些事件是用户初始化的，比如点击事件， tab切换这种 有的事件是来自于代码， 比如 ajax 的响应啥的 promise 状态变化； （关于promise， 可以看这个文章, emmm这篇文章是我准备留给2月份翻译的） DOMMutationObserver, IntersectionObserver 这种 Observer 家族的 RequestAnimationFrame Almost everything we described above is planned through WebAPI (or browserAPI)....

为什么需要 Observable RxJS 说是弥补关于数据处理场景的一块空白 → 推送多个数据。 这里把我们对数据的处理方式做了两个维度的分类： Type SINGLE MULTIPLE Pull Function Iterator Push Promise Observable Pull 和 Push Pull 就是我要的时候，就能要到。生产者无感。 每个 JS 函数都是在 Pull ES2015 的生成器（function*）弥补了"拉取多个值"的空白 Push 就是我决定啥时候给，消费者无感。 典型例子就是 Promise，等 then 的时候自然会 push 给你 从生产者和消费者的角度理解： 生产者 消费者 Pull 被动：等着要数据的时候再产生数据 主动：会决定啥时候去要数据 Push 主动：按照自己的节奏产生数据，然后推出去 被动：就等着数据（等回调） 代码示例 1. 拉取单个数据 function getNum() { return Math.floor(Math.random() * 10) } function singlePull() { const num = getNum() console.log(num, 'singlePull') } 2. 推送单个数据 function getNumPromise() { return new Promise((resolve, reject) => { setTimeout(() => { resolve(getNum()) }, 1000) }) } function singlePush() { const promise = getNumPromise() promise....

如何理解 Chrome 性能分析 tab 里的 FP, FCP, DCL, L, LCP FP（First Paint） 意义：指浏览器渲染第一次绘制像素的时间点。 测量方式：从导航开始到浏览器首次绘制任何像素的时间间隔。 FCP（First Contentful Paint） 意义：指浏览器渲染首个页面内容的时间点（例如文本、图像等）。 测量方式：从导航开始到浏览器首次绘制"有意义"的内容的时间间隔。 DCL（DOMContentLoaded） 意义：指页面的 DOM 已完全加载并解析完成的时间点。 测量方式：当页面的 DOM 树构建完成并且所有的资源（如样式表、图像）已经加载完成时，触发 DOMContentLoaded 事件。 L（Load） 意义：指页面的所有资源（包括图片、样式表、脚本等）都已加载完成的时间点。 测量方式：当页面的所有资源都加载完毕时，触发 load 事件。 LCP（Largest Contentful Paint） 意义：指页面上最大且最有意义的内容元素加载完成的时间点。 测量方式：浏览器在页面渲染过程中识别并记录最大的内容元素（例如图片或文本块），并且记录它们加载完成的时间点。