热力地图开发

地图&大图像前端展示

地图投影/大图片展示

地图投影

由于我们在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 透明度混合算法