熱力地圖開發

地圖&大圖像前端展示

地圖投影/大圖片展示

地圖投影

由於我們在web端顯示的地圖基本是二維平面，而地球是一個橢圓求，所以我們需要經過一些投影方式將地圖圖片顯示出來。

• 橢球體的規則化
  
• Web墨卡託投影
  
  

地圖的組織方式（金字塔結構）

當圖像數據大道一定的級別之後，一次性加載整張所有縮放層級的地圖不管是從前後端設備性能還是網絡傳輸來看都是不可能的。而且用戶通常不需要查看整張地圖，而是關注一定分辨率下的某一部分。所以局部加載方案應運而生：只加載用戶當前關注的那部分地圖。

瓦片地圖金字塔模型是一種多分辨率層次模型，從瓦片金字塔的底層到頂層，分辨率越來越低，但表示的地理範圍不變。

圖片金字塔組織採樣方案

• deepzoom
• zoomify
• Google Maps
• …

可以利用libvips進行後端的圖像採樣和處理

前端地圖組件(leaflet/openlayers)

leaflet

leaflet提供一個非常輕量級的基礎地圖框架，只支持最基本的地圖操作和顯示api。如果需要有更豐富的功能可以利用豐富的開源插件或者自定義開發插件進行定製。如leaflet-deepzoom, leaflet-Zoomify支持不同制式的圖片，甚至還有ImageOverlay支持單張圖片的顯示，VideoOverlay支持視頻的顯示等。

openlayers

而openlayers是一個大而全的開源地圖框架，默認就提供非常豐富的操作、顯示等地圖api，性能較高。但是比較笨重。

後端圖片處理服務

• libvips
• openslide

前端數據可視化方案對比（SVG&Canvas&Webgl）

SVG(Scalable Vector Graphics)

• 指可伸縮矢量圖形 (Scalable Vector Graphics)
• 用來定義用於網絡的基於矢量的圖形
• 使用 XML 格式定義圖形
• 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
• 是萬維網聯盟的標準
• 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

<svg width="80" height="80"> 
  <circle cx="40" cy="40" r="30" stroke="#000" stroke-width="1" fill="#FFF" /> 
</svg>

應用

• highcharts
• d3

處理庫

• raphaeljs

canvas

提供的功能原始，適合像素處理，動態渲染和大數據量繪製

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

其他特性：

離屏渲染（現在內存中開闢一張畫布，繪製完成後再覆蓋到瀏覽器顯示，可以從一定程度上提升圖像渲染性能）

應用

• echarts

處理庫

• fabricjs

webgl

可以繪製3D圖，需要瀏覽器和顯卡支持。

總結

特點/適用場景
Canvas（位圖） 適用“小畫布大數據量”的場景，即高數據量高繪製頻率（幀率）的場景，如動畫、遊戲；

SVG（矢量圖） 適用“大畫布小數據量”的場景，即低數據量低繪製頻率的場景，給數據就可以繪製點、線、圖形的，基於 XML 的標記語言；

WebGL（位圖） 適用三維場景，基於 Canvas 的 3D 框架，對開發者要求更高一些， 如動畫遊戲等

熱力圖

以特殊高亮的形式顯示訪客熱衷的頁面區域和訪客所在的地理區域的圖示。

原理

根據透明度的大小和疊加來渲染的

透明度

• CSS 中的 opacity 屬性、rgba 顏色中的 alpha 變量、canvas 中的 globalAlpha 屬性等
• 它們的取值範圍一般是 0-1 之間，0 表示完全透明，1 表示不透明，值越小，越透明

繪製庫

• heatmapjs：基於canvas進行熱力圖的繪製
  

參考

• WEB地圖基本原理：地圖投影和座標轉換
• WEB地圖呈現原理
• leaflet與openlayers
• 【 可視化】熱力圖繪製原理
• 不斷疊加兩個 50% 透明的顏色疊加能否得到一個 100％ 不透明的顏色？
• Alpha compositing
• RGBA alpha 透明度混合算法