0%

在最近的业务中,需要对 OpenLayers 地图上的 feature 要素点击后触发某些操作,任务完成过程中走过了一些坑,总结一下。

前置代码

放置一个实例更容易看明白过程,从官网的实例Hit Tolerance中截取了一段代码。
首先准备了一个 OSM 的地图底图,再写一个线段 feature 用于触发事件,最后在最上方放置一个 idstatus 的 span 用于展示点击结果。

阅读全文 »

有些时候 UI 给切的背景,并不能适配所有长宽比的元素,这个时候就需要一个非常强大的 CSS 属性:border-image,下面先翻译border-image相关的W3C 规范草案,再举例说明如何应用到元素背景中。

草案翻译

开发者可以指定用来替代 border-style 的图像。在这种情况下,border 取自 border-image-source 指定的图像的边缘和角落,这些图像的碎片可以通过各种方式进行切片、缩放和拉伸,以适应边框图像区域的大小。 边框图像属性不影响布局: 盒的布局、内容和环绕内容仅基于 border-widthborder-style 属性的影响。

阅读全文 »

在构建可视化大屏的过程中,首先要先布局组件位置和大小。上两篇文章《关于各种像素概念和前端长度单位的理解》《CSS数学表达式calc()的规范草案翻译》学习了 CSS 相对单位 vwvhremclac(),本文以上两篇内容为基础,加上 mentor 仕春哥的启发,分析前端构建可视化大屏的一种布局方式。

大屏系统的内在原理

硬件

大屏系统实际上是由任意 n × m 块窄边显示器组成,具体如下图示例所示:

阅读全文 »

在 CSS 中,1px到底是多长,为什么是这个长度。百度谷歌搜索很久说法很不一致,最后才发现最标准的还是去看万维网联盟(World Wide Web Consortium,W3C)的CSS 标准和草案,总结以下一些概念。

像素

像素是在印刷业和屏幕设备最基础的概念,一切的显示都从像素开始,循序渐进的理解 CSS 像素到底是什么。

阅读全文 »

最近使用了 sunburst 旭日图,但 ECharts 的配置项实在是太多,边学习便记录。以官网 gallery 中的推荐 demo——2018 豆瓣中国大陆影视剧评分排行——为例,分析 sunburst 旭日图类型的实现,修改了原 demo 的一些错误和冗余,并给图表添加自定义的动态轮播效果,效果如下所示:

阅读全文 »

分析 Image Filters(滤镜效果) 这个 demo,官网介绍是:

Layer rendering can be manipulated in prerender and postrender event listeners. These listeners get an event with a reference to the Canvas rendering context. In this example, the postrender listener applies a filter to the image data.
prerenderpostrender可以控制图层渲染。这两个监听器能够获得带有Canvas上下文引用的事件。在这个例子中,posetrender 事件监听器对图像数据应用了一个卷积核(滤波器)

阅读全文 »