Cesium專欄-氣象要素(溫度、降水)色斑圖製做

Cesium

---

Cesium 是一款面向三維地球和地圖的，世界級的JavaScript開源產品。它提供了基於JavaScript語言的開發包，方便用戶快速搭建一款零插件的虛擬地球Web應用，並在性能，精度，渲染質量以及多平臺，易用性上都有高質量的保證。

關於色斑圖

色斑圖以及後續文章等值線圖，都是一種氣象要素（溫度、降水）以及控制質量等的表現形式。本篇文章，咱們藉助開源插值工具kriging.js來說解如何製做色斑圖。

在以前的文章 Cesium專欄-克里金插值，中講解了如何用kriging.js來作插值，插值是一個全局範圍內的插值，可是色斑圖相似於GIS中的專題圖，因此，咱們必須在kriging.js的基礎上，進行源碼修改，自定義色帶，已經自定義繪製網格色值。

效果圖（逐小時降水|溫度）注:測試數據

具體作法

---

一、定義色帶（數據來源，中國天氣網）

• // 氣溫
• { min: -50, max: -45, color: "#2e0057" },
• { min: -45, max: -40, color: "#4a008b" },
• { min: -40, max: -35, color: "#0d0b66" },
• { min: -35, max: -30, color: "#0c2695" },
• { min: -30, max: -25, color: "#0c43c4" },
• { min: -25, max: -20, color: "#1a6bd7" },
• { min: -20, max: -15, color: "#3492f4" },
• { min: -15, max: -10, color: "#67b7f7" },
• { min: -10, max: -5, color: "#96cef4" },
• { min: -5, max: -0, color: "#c1e6f9" },
• { min: 0, max: 5, color: "#fefec6" },
• { min: 5, max: 10, color: "#f8f1a1" },
• { min: 10, max: 15, color: "#ffe479" },
• { min: 15, max: 20, color: "#ffcc4f" },
• { min: 20, max: 25, color: "#f19906" },
• { min: 25, max: 30, color: "#f07609" },
• { min: 30, max: 35, color: "#eb481f" },
• { min: 35, max: 40, color: "#ab0110" },
• { min: 40, max: 45, color: "#650015" },
• { min: 45, max: 50, color: "#44000b" }
•  
• //逐小時降水
• { min: 0, max: 2, color: "#7fffff" },
• { min: 2, max: 4, color: "#23b7ff" },
• { min: 4, max: 6, color: "#0177b4" },
• { min: 6, max: 8, color: "#0052ca" },
• { min: 8, max: 10, color: "#0310d8" },
• { min: 10, max: 20, color: "#9601f9" },
• { min: 20, max: 50, color: "#6f00b8" },
• { min: 50, max: 100, color: "#4c0082" }

二、修改源碼，自定義獲取顏色值

• kriging.getColor = function (colors, z) {
• var l = colors.length;
• for (var i = 0; i < l; i++) {
• if (z >= colors[i].min && z < colors[i].max) return colors[i].color;
• }
• };

三、更改賦值

• ctx.fillStyle = this.getColor(colors, z);

代碼以及數據因客觀緣由不能提供。如需合做請聯繫做者QQ:2034146498

更多文章見cesium小專欄：GIS之家cesium小專欄