0%

最近稍微研究了下 canvas 滤镜在 OpenLayers 中的应用,发现自己照猫画虎可以做出滤镜效果,但是最关键的 kernel 这个卷积核却一点都不了解,参考wiki深入学习一下写一篇笔记。

简介

卷积核kernel),也叫卷积矩阵convolution matrix)或者掩膜mask),本质上是一个非常小的矩阵,最常用的是 3×3 矩阵。主要是利用核与图像之间进行卷积运算来实现图像处理,能做出模糊、锐化、凹凸、边缘检测等效果。

阅读全文 »

之前翻译了 GeoJSON 的规范全文——《GeoJson 规范(RFC 7946)全文翻译》,在本篇中应用 GeoJSON 的各个特征对象和几何对象到 OpenLayers 中,熟悉 GeoJSON 格式在 OpenLayers 中的应用,也能熟悉 OpenGIS 的各个术语在 OpenLayers 的映射。

阅读全文 »

最近使用 GeoJson 的时候总是感觉一知半解,腾出时间来翻译一遍 GeoJson 的规范,让自己理解的更透彻些。
2015 年,国际互联网工程任务组IETF)与最初的规范作者共同组建了一个 GeoJson 工作组(GeoJSON WG) 来标准化 GeoJSONRFC 7946 于 2016 年 8 月发布,取代了 2008 年的 GeoJSON规范成为 GeoJSON 格式的新标准规范。

摘要

GeoJson 是一种基于 JSON 的地理空间数据交换格式。 它定义了几种类型的 JSON 对象,以及将它们组合起来表示有关地理特征、属性和空间范围的数据的方式。 GeoJson 使用了经纬度参考系统、 WGS84 坐标系统和十进制单位。

本备忘录的状况

这是一个 Internet 标准跟踪文档。

本文档是国际互联网工程任务组(IETF)的产品。 它代表 IETF 社区的一致意见。 它已经接受了公众的审查,并且已经被美国互联网工程指导委员会批准出版。 有关互联网标准的更多资料,请参阅 RFC 7841 第 2 节

https://tools.ietf.org/html/rfc7841#section-2

有关本文件的现状、任何勘误表,以及如何提供反馈的信息可以在http://www.rfc-editor.org/info/rfc7946获得。

阅读全文 »

在之前的实例中设置图层的 source 属性时,可以发现经常用ol.source.OSM()ol.source.BingMaps()来创建图层的源。之所以加载源这么简单,是因为 OpenLayers 库中对 OSM(OpenStreetMap 地图)和 BingMap(必应地图)这类的国际比较常用的地图加载做了封装。但是 OpenLayers 不可能对所有的地图厂商都进行封装,这时候就需要自己手动拼接字符串来加载瓦片地图。绝大多数的瓦片地图都是用的大致相同的规律来加载的,这就使手动拼接字符串简单了许多。

阅读全文 »

分析 Earthquakes Heatmap 这个 demo,官网介绍是:

This example parses a KML file and renders the features as a ol/layer/Heatmap layer.

这个示例解析了 KML 格式文件并作为一个热力图来渲染要素。

阅读全文 »

分析 Earthquake Clusters 这个 demo,官网介绍是:

This example parses a KML file and renders the features as clusters on a vector layer. The styling in this example is quite involved. Single earthquake locations (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.

To achieve this, we make heavy use of style functions.

本示例将解析 KML 文件并在矢量图层上将要素渲染成聚合点。在这个示例中的样式非常复杂。单个的地震点(被渲染成了星状)的大小与震级相关。聚合点的透明度与聚合点内要素的数量相关,并且聚合点的大小也代表着聚合点内要素的四至。当在聚合点上点击或者悬浮时,组成聚合点的各个要素就会被展示。

由于上述原因,我们大量使用了样式函数。

阅读全文 »

分析 Magnify 这个 demo,官网介绍是:

This example makes use of the postrender event listener to oversample imagery in a circle around the pointer location. Listeners for this event have access to the Canvas context and can manipulate image data.
Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to the magnified circle size.

本示例使用的是 postrender 事件监听器,在图层中对鼠标位置处的圆圈进行过采样实现的,这个事件的监听器可以访问 Canvas 上下文并且可以处理图像数据。

在地图上移动鼠标来查看效果。使用 ↑ 上键 和 ↓ 下键来调整放大镜圆圈的大小。

阅读全文 »

分析 Marker Animation 这个 demo,官网介绍是:

This example shows how to use postrender events and a vector context to animate a marker feature along a line. In this example an encoded polyline is being used.
此示例展示了如何使用 postrender 事件和矢量上下文使一个标记要素沿着线移动。在这个实例中使用了一个经过编码的折线。

阅读全文 »

分析 Layer Spy 这个 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 prerender listener sets a clipping mask around the most recent mouse position, giving you a spyglass effect for viewing one layer over another.
Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.

图层渲染是被prerenderpostrender事件监听器控制的。这些监听器获得一个带有 Canvas 渲染上下文引用的事件。在这个例子中,prerender事件监听器在最近的鼠标位置处设置一个剪贴蒙版,这个剪贴蒙版能让你用看望远镜的感觉来观察普通地图图层上面的航拍图层。

在地图上移动鼠标来查看效果。使用 ↑ 上键 和 ↓ 下键来调整望远镜的大小。

阅读全文 »

分析 Flight Animation 这个 demo,官网介绍是:

This example shows how to use postrender and vectorContext to animate flights. A great circle arc between two airports is calculated using arc.js and then the flight paths are animated with postrender. The flight data is provided by OpenFlights (a simplified data set from the Mapbox.js documentation is used).
此示例展示了如何使用 postrender 和 vectorContext 模拟航线动画。使用 arc.js 来计算了两个机场之间的弧线并使用 postrender 模拟航线路径动画。航线的数据来自于 OpenFlights(Mapbox.js 文档里面也使用了这个简单的数据)。

阅读全文 »