前端栅格瓦片重投影

目前绝大多数的供公开使用的栅格瓦片都是基于墨卡托投影切片的,少数是基于经纬度投影的。这两种投影方式的解析比较简单,并且支持全球范围。但是,在某些情况下,尤其是在展示局部地区的场景中,会接触到一些不常见的投影,例如,在 maptiler 中,提供了捷克,荷兰,瑞士等国家的地方投影坐标系的栅格瓦片。

常常会有这样的需求:将不同投影坐标系的栅格瓦片叠加在一起显示。

继续阅读前端栅格瓦片重投影

多边形渐变色的实现

渐变效果能够实现多种颜色之间的自然过渡,一般情况下,渐变往往与某种场强度相关,或者说某一个在二维空间内连续变化的数值相关,比如某片地区的气温,海拔高度,一条路径的畅通程度。地图中常见的渐变效果是热力图,分层设色也算渐变吧,只要分的够多。

渐变色也能用于实现阴影的效果,也就是从灰色过渡为透明的形式,从而使得 2D 的地图更加立体。下图是 iOS 中地图应用的截图,右上角的控件实际上就有阴影,用于与地图做区分。仔细观察的话,地图中水系的边缘也是有向内的阴影的,用于与陆地做区分。

如何投影贴花(译:How to project decals)

本文翻译自《How to project decals》

开头省略200字寒暄,作者介绍了自己在编辑器中如何实现贴花功能的。本文将对“如何对一个复杂几何体进行贴花投影”的算法做一个概览。以这样的一个场景为例:

继续阅读如何投影贴花(译:How to project decals)

在国内使用 eSIM 卡过程记录

选择

之前换了手机,换成了美版的 iPhone XS。和国行版最大的区别是,美版的 iPhone XS 多了一个 eSIM 卡槽。所以,测试这个卡槽的可用性,就一直留在了我的 Todo 事项里了。

刚好,这几天下定决心,搞搞看。有一个 esimdb 的网站,上面收录了不少世界上各个地区的 esim 相关的信息。其中也包括中国的。

继续阅读在国内使用 eSIM 卡过程记录

Mapbox 矢量瓦片的生命周期介绍

本篇文章翻译自 maplibre/maplibre-gl-js 项目的《life-of-a-tile》。文中的超链接,对应到 Mapbox 的 v1.13.2 版本。

本篇文章将说明在 Mapbox 中,一个瓦片的加载流程,整个过程可以分为3个部分:

  • Event loop:由用户交互触发,并更新 map 内部的信息,例如 viewport,相机视角等。
  • Tile loading:异步请求当前地图所需要的瓦片,图片,字体等数据。
  • Render loop:将当前状态的地图渲染到屏幕上。

理想状况下,Event loop 和 Render loop 以60帧每秒的速度运转,类似 Tile loading 等重活,会放在 web worker 中异步执行。

继续阅读Mapbox 矢量瓦片的生命周期介绍

Poor pigs

本文从一条 LeetCode 算法题,研究了一下题目拓展后的情景,并结合言论审查赋予了拓展题一点点实际意义。

小插曲一:在写本文期间看到的笑话一则,真实性未验证:众网友为吐槽“浙江选考”,却发现微博屏蔽了部分“浙江选考”相关的搜索结果,问题既不是出在“浙江”上,也不是出在“选考”上,而是“江选”两个字。

小插曲二:在 LeetCode 的中文站上看题解时,发现好像有些词被屏蔽了,通过与题目描述对比,发现“毒药”是敏感词。

“毒药”也是敏感词?
继续阅读Poor pigs

用 GeoServer 发布适用于 Mapbox 的矢量切片

Mapbox 的矢量切片的服务发布方式不仅限于使用 GeoServer,Mapbox 自己本身也在提供这样的数据切片服务,本文仅为使用 GeoServer 提供同样的数据切片服务的操作说明,适用于规避 Mapbox 数据存储收费,内网部署等场景。

不过 Mapbox 貌似不再对数据存储收费了?而且如果一个人或者一家公司能够在内网中部署地图服务,数据矢量切片应该也不在话下?所以本文的方案到底会在什么样的场景下有用?

继续阅读用 GeoServer 发布适用于 Mapbox 的矢量切片

WebGL Insights — Getting Serious with JavaScript(下)

4.3 性能

写关于 JavaScript 性能的文章是件棘手的事,因为它是一个不断变化的目标。浏览器实现会定期改进,目前运行缓慢的代码可能很快就会被优化。然而,即使在自更新浏览器不断演进的情况下,仍然存在一套通用的最佳实践和禁忌,它们通常适用,并且不太可能发生改变。

继续阅读WebGL Insights — Getting Serious with JavaScript(下)

WebGL Insights — Getting Serious with JavaScript(上)

WebGL相关的书籍并不多,《WebGL Insights》算是一本,其中各个章节都是由行业内资深的开发者们编写的。书中第四章的作者,Matthew Amato 和 Kevin Ring,正好是 Cesium 的联合创始人及资深开发工程师,所以就想着将本章翻译一下,加深一下理解。

4.1 介绍

正如我们将在第七章“Teaching an Introductory Computer Graphics Course with WebGL”中看到的,JavaScript 和 WebGL 的特性使其成为计算机图形学的一个极好的学习平台。其他人也认为,工具链的普遍可访问性和质量使它在图形研究中也具有很大的优势。在本章中,我们将讨论我们认为 JavaScript 和 WebGL 最重要的用途:编写和维护实际的基于浏览器的应用程序和库。

继续阅读WebGL Insights — Getting Serious with JavaScript(上)

探讨空间搜索算法——瞬间搜索数百万个点

在大规模处理和显示空间数据时,没有什么概念比空间索引(Spatial Index)更有用和重要。空间索引是一类算法,它们通过特定的方式组织几何数据,使搜索更加高效。例如,执行以下查询:

  • 返回该区域内的所有建筑
  • 找到距离该点最近的 1000 个加油站

即使面对数百万个对象,空间索引仍然可以在毫秒级的时间内返回结果。空间索引是PostGIS等数据库的基础,而 PostGIS 本身也是大部分GIS平台的核心组件。例如,处理遥测数据:将数百万个 GPS 速度样本与道路网络匹配,从而为导航服务生成实时交通数据。在客户端,常见的应用场景包括实时在地图上放置标签,以及在鼠标悬停时查找地图对象

Mapbox的开发者已经构建了一系列高效的 JavaScript 空间搜索库,包括 rbush、rbush-knn、kdbush、geokdbush。本文接下来将尝试解析这些库的底层工作原理。

继续阅读探讨空间搜索算法——瞬间搜索数百万个点

计算器启示录

简介

之所以起了这个标题,是因为看了《Windows编程启示录》。为什么会看这本书呢?因为这本书和这篇文章《How does the calculator percent key work?》是同一个人。为什么会看这篇文章呢?因为前几天,网上曝光出了手机自带的计算器中的一个“bug”,无论是安卓,还是iOS,在自带的计算器软件中输入“10%+10%”,得出的结果是0.11,而非0.2。08年的这篇文章解释了这个问题。

继续阅读计算器启示录

文革风格的地图设计尝试

最近刚好读到《中评周刊》115期的《陈徒手: 1965-1975:北京地名修改内情》文章,里面提到了北京在六七十年代,曾要求过改革不适合时代潮流的已有地名。原文的说法如下:

对北京的街巷名称提出了许多革命倡议和意见,要求把一些带有封建主义、资本主义色彩的街巷名称,改为具有革命意义的名称,使首都的街巷名称充分反映出社会主义时代的精神面貌。

陈徒手: 1965-1975:北京地名修改内情

考虑到时间等因素,我就不去收集当时所有的地名更改相关的资料了,仅以文章中列出的改名信息,尝试设计一个,从数据到样式,符合当时环境的地图。如果读者有其他文革期间地名修改的相关资料,可以回复我。

继续阅读文革风格的地图设计尝试

算法笔记——树

简介

感觉树相关的算法问题离不开树的构建和搜索,不同类型的树有不同的搜索姿势,遍历也算是一种搜索吧,从头到尾,无目的的那种。

构建是为了组织好数据,方便搜索。涉及到的问题一般是添,删,改,查。

搜索则像是在解决实际的问题,既有通用的搜索方式,特殊形态的树也存在着特有的搜索方式。

继续阅读算法笔记——树

算法笔记——动态规划

本篇文章是对动态规划类的问题进行一个汇总。随着我对这类的问题的不断地接触,这篇笔记也会不断的丰富。

在网上看到了一篇对动态规划问题梳理的很详细的文章,所以本文基本按照那篇文章的结构来进行,之后会结合 LeetCode 中的实际题目看看处理问题的思路。那篇文章的链接见文末。

继续阅读算法笔记——动态规划

基于 OSM 路网数据生成立体立交道路的尝试

简介

之所以要做这么一件事情是因为在玩《Cities: Skylines》时,游戏内的立交建造比较繁琐,又很重要。于是就萌生了做一个从目前已有的二维地图道路数据自动生成立体的立交道路的工具的想法。

以延安东路立交桥为例,第一张是平面展示效果,第二张是立体展示效果:

如果能用第二张图中的道路数据,导入到游戏中,想必很实用。所以,接下来的内容就是介绍我的想法,关于如何从图一中的数据计算得到图二中的数据。

继续阅读基于 OSM 路网数据生成立体立交道路的尝试

分词算法的原理及简单实现(一)

简介

分词工具也算是接触过一点了,目前工作上主要用到的一个是MMSEG,另一个是jieba分词。对于分词,可不能就简单的调调接口,所以现在就来看一看分词算法的相关原理,并尝试实现一个简单的分词工具。

继续阅读分词算法的原理及简单实现(一)

SEO,搜索引擎与搜索质量标注

简介

维护这个博客让我接触到了 SEO 相关的知识点。同时也通过搜索标注工程接触到了搜索结果标注相关的内容。作为垂直领域搜索算法的开发人员,我自然也接触到了很多搜索相关的内容。

无意中发现上述三方面的工作内容竟然是一个整体,所以想要通过这篇文章来简单梳理一下我的理解。

继续阅读SEO,搜索引擎与搜索质量标注

学习笔记——SEO

简介

之所以要了解SEO这方面的内容,一方面是因为自从建立了这个博客页面,与网站相关的方方面面都需要自己来操办,SEO便是其中的一部分。另一方面,了解SEO有助于我去了解搜索引擎的工作机制,以及数据是如何配合搜索引擎,来提高自己被召回的机会的。

本站作为一个个人博客,一般并不需要通过书中提到的种种手段来提升排名,感觉一些手段对于一个个人博客而言有些用力过猛了。所以,下文中提到的种种手段,仅作记录,学习用途,我懒得在自己的博客网站上实践。

以下的笔记内容均以网页作为搜索目标来描述,暂不考虑垂直领域的数据。并将注重网页生产方是如何通过丰富自身内容,以及配合搜索引擎来实现SEO的,弱化搜索引擎的工作原理,以及实际业务相关内容。

继续阅读学习笔记——SEO

实现克里金(kriging)插值(一)计算原理

这篇文章是大三的一个课程大作业,最初发布在 CSDN 上。因为当时花了很多精力在这上面,所以决定搬过来。

克里金插值较为复杂,但效果也是比较好的。为了能够通过代码实现克里金插值的过程,首先需要了解其详细的计算过程。

继续阅读实现克里金(kriging)插值(一)计算原理