René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"客户故事 | 墨迹天气是如何使用 Mapbox GL，实现高分辨率雷达图像的？","articleBody":"# Customer Story \\| Moji Weather’s seamless animations with Mapbox GL\r\n\r\n## 客户故事 \\| 四步走，墨迹天气雷达数据可视化指南\r\n\r\n谈起墨迹天气，想必人人都不陌生，除了展现空气质量指数（AQI）等天气相关信息，人们最爱它的短时临近预报。该预报精准度可以达到分钟级别，给我们的出行带来了极大的便利。\r\n\r\n短时临近预报以雷达图像的形式展现，殊不知，雷达数据是最难在原生 App 中快速呈现的数据之一。墨迹天气却克服了这个挑战，使用 Mapbox GL 实现了在 Mapbox 中国街景地图（Mapbox Streets Chinese）的快速、流畅、高分辨率的可视化效果，并上线 Android 和 iOS App 中。\r\n\r\n![1_rhLXqBIpyGmdR1hx8HFgWg](https://user-images.githubusercontent.com/18397640/62687719-f2063880-b9f9-11e9-9c55-f038f24e14ee.gif)\r\n\r\n下面我们邀请到 Mapbox 中国解决方案工程师 Macro Shen，带大家详细剖析一下技术细节吧！\r\n\r\n### 传统栅格图像可视化方案\r\n\r\n来自雷达源的数据格式通常是栅格图像（Raster Image），在对这类数据进行可视化的时候，常见的方法是在地图上添加多个图像作为栅格源，或者生成图像图块并设置每帧显示不同的图像实现具有延时效果的数据。\r\n\r\n许多天气 App 都使用类似的办法来显示雷达数据，包括墨迹天气的历史版本。但是这样的方案有下面两个主要缺点：\r\n\r\n1. 在缩放放大的时候，分辨率会显得很低\r\n2. 动画效果不够流畅\r\n\r\n那么 Mapbox 为墨迹天气提供了怎样的解决方案呢？\r\n\r\n### 矢量瓦片可视化方案\r\n\r\nMapbox 提供了矢量瓦片的解决方案，使数据密集型地图能够快速渲染。因为 Mapbox 的开源特性，这个过程具备了高度的设计灵活性。\r\n\r\n那么矢量瓦片为什么会有优势呢？\r\n\r\n根据 [Mapbox 文档](https://docs.mapbox.com/vector-tiles/reference/?utm_medium=blog\u0026utm_source=mapbox-blog\u0026utm_campaign=blog|mapbox-blog|maps|how-moji-weather-enables-seamless-weather-animations-with-mapbox-gl-117bc5ee9a5a-19-07\u0026utm_term=maps\u0026utm_content=how-moji-weather-enables-seamless-weather-animations-with-mapbox-gl-117bc5ee9a5a)所述，这些矢量瓦片数据与用于 Web 端展示的图像是等效的，但是在缓存，缩放和快速呈现地图图像方面具有优势。矢量瓦片以紧凑的结构化格式、包含了几何与元数据，比如道路名称、地名、门牌号等，只有在客户端（比如 Web 浏览器或者移动 App）请求的时候，才会呈现矢量切片。渲染过程发生在客户端（[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/), [Mapbox iOS SDK](https://docs.mapbox.com/ios/maps/overview/) , [Mapbox Android SDK](https://docs.mapbox.com/android/maps/overview/)）或者动态服务器（[map API](https://docs.mapbox.com/api/maps/)）上。\r\n\r\n相对于完整渲染的栅格图像，矢量瓦片有下面的两大优势：\r\n\r\n1. 样式（Styling）：矢量的特性，可以在被请求的时候再进行样式化。\r\n2. 大小（Size）：矢量瓦片非常小，能够实现高分辨率地图、快速地图加载、高效缓存。\r\n\r\n既然如此，我们可以通过矢量瓦片可视化雷达数据。\r\n\r\n首先，我们需要将栅格图像转换为矢量格式（GeoJSON），然后生成矢量瓦片。\r\n\r\n#### 第一步：矢量化雷达数据\r\n\r\n有很多的开源工具能够矢量化栅格图像。比如 [d3-contour](https://www.npmjs.com/package/d3-contour) 可以从 Node.js 环境中的图像生成轮廓多边形，或者在 Python 环境中使用 numpy / rasterio 从图像生成像素多边形。\r\n\r\n这是一个使用 [d3-contour](https://www.npmjs.com/package/d3-contour) 的示例代码：\r\n\r\n```text\r\nconst contours = require('d3-contour').contours;\r\nlet w = 1100;\r\nlet h = 900;\r\nlet polygons = contours()\r\n    .size([w, h])\r\n    .thresholds(smoothValues)\r\n    (pixel_data);\r\n\r\nlet resultgeojson = {\r\n    type: 'FeatureCollection',\r\n    features: []\r\n};\r\npolygons.forEach((polygon) =\u003e {\r\n    //...\r\n    resultgeojson.features.push({\r\n        type: 'Feature',\r\n        properties: {\r\n            value: polygon.value,\r\n            idx: 0\r\n        },\r\n        geometry: {\r\n            type: 'Polygon',\r\n            coordinates: polygon.coordinates\r\n        }\r\n    });\r\n});\r\n```\r\n\r\n除了矢量化之外，我们还需要在生成 GeoJSON 数据之前将坐标系从像素转换为地理坐标系。\r\n\r\n```text\r\nconst proj4 = require('proj4');\r\nlet pixel_position = [10, 20];\r\nlet geo_position = proj4('EPSG:3857', 'EPSG:4326',[\r\n    minLng + (maxLng - minLng) * (p[0] / w),\r\n    maxLat - (maxLat - minLat) * (p[1] / h)\r\n]);\r\n```\r\n\r\n#### 第二步：对雷达数据进行插值，以平滑过渡\r\n\r\n传统的雷达图像帧与帧之间的跳动非常明显，为了更加平滑的动画效果，我们需要提高数据帧的频率，因此，我们尝试创建中间雷达图像（intermediate radar images）以提高帧率，获得更流畅的动画效果。然后，我们运行处理脚本并生成更多向量，动画就可以以更多的步骤运行，看起来更流畅。 \r\n\r\n最简单的方法是在相邻帧之间插入数据，如下代码。\r\n\r\n```text\r\nlet current_data = [...];//An h * w array from current step of radar image\r\nlet next_data = [...];//An h * w array from next step of radar image\r\n\r\nlet new_data = [];\r\nfor (let i = 0; i \u003c h; i++) {\r\n    for (let j = 0; j \u003c w; j++) {\r\n        new_data[i * w + j] = parseInt((current_data[i * w + j] + next_data[i * w + j]) / 2);\r\n    }\r\n}\r\nlet polygons = contours()\r\n    .size([w, h])\r\n    .thresholds(smoothValues)\r\n    (new_data);\r\n```\r\n\r\n请注意，我们在原始帧之间创建了不止一个过渡帧，以实现更流畅的动画，但代价就是数据大小会增加，这是需要权衡的。\r\n\r\n#### 第三步：从 GeoJSON 创建矢量瓦片\r\n\r\n我们这里使用 [tippecanoe](https://github.com/mapbox/tippecanoe) 创建矢量瓦片，这个工具非常强大，能从大量的 GeoJSON、Geobuf 或 CSV 特征集合中创建矢量瓦片。\r\n\r\n在 Mac OSX 系统上安装  tippecanoe 最简单的办法就是在 Terminal（终端）中输入下面的代码。\r\n\r\n```text\r\n$ brew install tippecanoe\r\n```\r\n\r\n安装好 tippecanoe 之后，我们用下面的代码来生成 [mbtiles](https://wiki.openstreetmap.org/wiki/MBTiles)（一种 OSM 中的数据格式，可以在一个单独的文件中存放地图切片）。\r\n\r\n```text\r\n$ tippecanoe -o output.mbtiles -zg --drop-densest-as-needed radar.geojso\r\n```\r\n\r\n请注意，-e 可用于将 tile 写入指定的目录而不是 mbtiles 文件，想要将矢量瓦片发布到 Web 服务的开发者可以使用这个功能。\r\n\r\n#### 第四步：使用 Mapbox 将雷达矢量瓦片可视化\r\n\r\n用于 Web 端的 Mapbox GL JS 和用于移动端的 Mapbox Maps SDK for iOS 和 Android 可以加载雷达矢量瓦片，并将其可视化。\r\n\r\n下面是一个使用 Mapbox GL JS 可视化的源码，也可以参考一个[使用 Maps SDK for Android 的案例](https://docs.mapbox.com/android/maps/examples/data-time-lapse/)。\r\n\r\n```text\r\nmap.addSource('radar-data', {\r\n    type: 'vector',\r\n    url: 'mapbox://examples.dwtmhwpu'\r\n});\r\nmap.addLayer({\r\n    \"id\": \"radarpolygon\",\r\n    \"type\": \"fill\",\r\n    \"source\": \"raddar-data\",\r\n    \"source-layer\": \"0\",\r\n    \"filter\": [\"==\", \"idx\", 0],\r\n    'layout': {\r\n        \"visibility\": \"visible\"\r\n    },\r\n    'paint': {\r\n        'fill-opacity': 0.7,\r\n        'fill-color': [\r\n            \"step\",\r\n            [\"get\", \"value\"],\r\n            \"hsl(0, 0%, 100%)\", 8,\r\n            \"hsl(202, 88%, 51%)\", 18,\r\n            \"hsl(194, 88%, 51%)\", 36,\r\n            \"hsl(185, 88%, 51%)\", 54,\r\n            \"hsl(177, 96%, 53%)\", 72,\r\n            \"hsl(157, 96%, 53%)\", 90,\r\n            \"hsl(101, 94%, 65%)\", 108,\r\n            \"hsl(60, 100%, 49%)\", 126,\r\n            \"hsl(43, 100%, 49%)\", 144,\r\n            \"hsl(26, 100%, 49%)\", 162,\r\n            \"hsl(10, 100%, 49%)\", 180,\r\n            \"hsl(0, 64%, 43%)\", 198,\r\n            \"hsl(326, 47%, 29%)\", 216,\r\n            \"hsl(274, 47%, 29%)\", 234,\r\n            \"hsl(246, 56%, 35%)\"\r\n        ]\r\n    }\r\n}, 'place-village');\r\n```\r\n\r\n最后，我们使用 Mapbox GL 的 setFilter 功能实现雷达数据的平滑动画效果。\r\n\r\n```text\r\nlet theinterval = setInterval(function() {\r\n    map.setFilter('radarpolygon', ['==', 'idx', currentidx]);\r\n}, 500);\r\n```\r\n\r\n下面就是输出结果，具有更好的用户体验，相对于传统可视化，实现了更加平滑、分辨率更高的渲染效果。（下：栅格图像可视化，上：矢量瓦片可视化）\r\n\r\n![20190808163509](https://user-images.githubusercontent.com/18397640/62688163-e9fac880-b9fa-11e9-9880-73dda904fedb.gif)\r\n![20190808163514](https://user-images.githubusercontent.com/18397640/62688167-ea935f00-b9fa-11e9-9420-aa5fcd3164c3.gif)\r\n\r\n\r\n这就是矢量瓦片的魅力，不仅仅是雷达图，也会有很多类似的图像展示可以采用这样的方法，找一个时间试试看？如果你有更多商务方面的问题，欢迎通过 Mapbox 微信公众号（Mapbox\\_China）联系我们，关注回复【技术】即可。\r\n\r\n原文：[https://blog.mapbox.com/visualizing-radar-data-with-vector-tiles-117bc5ee9a5a](https://blog.mapbox.com/visualizing-radar-data-with-vector-tiles-117bc5ee9a5a)\r\n","author":{"url":"https://github.com/Jing-flyloveyin","@type":"Person","name":"Jing-flyloveyin"},"datePublished":"2019-08-08T08:40:15.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/2/Chinese-Tutorial/issues/2"}