Mapv

Mapv 是一款地理信息可视化开源库，可以用来展示大量地理信息数据，点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。

MapV 可展示大量的点数据，形式可以为热力图、网格、蜂窝状、点聚合、按颜色区间、按半径大小等。可展示大量的线数据，如普通画线、高亮叠加、热力线数据展示等方式，还有各种动画效果，适合用于呈现大量轨迹的场景。也可展示大量的自定义面数据，按颜色区间来展示，行政区域也是其中一种应用场景，可直接使用。

MapV 官网地址为:

http://mapv.baidu.com/

SuperMap iClient for OpenLayers 提供了 ol.source.Mapv 以对可视化效果图层进行支持

new ol.source.Mapv(options)

下面以 MapV 强边界图为例，将数据进行可视化的展示：

配置样式参数对象

//dataSet是保存json数据对象的对象
var dataSet = new mapv.DataSet(data);
//配置线图层属性
var mapvLineOptions = {
//描边颜色
strokeStyle: 'rgba(55, 50, 250, 0.3)',
//颜色叠加方式
globalCompositeOperation: 'lighter',
//投影颜色
shadowColor: 'rgba(55, 50, 250, 0.5)',
//投影模糊级数
shadowBlur: 10,
//描边宽度
lineWidth: 1.0,
//最直接的方式绘制点线面
draw: 'simple'
};
var lineOptions = {
map: map, dataSet: dataSet, mapvOptions: mapvLineOptions
};
map.addLayer(new ol.layer.Image({
source: new ol.source.Mapv(lineOptions)
}));

var dataSet = new mapv.DataSet(timeData);
//配置动画图层属性
var mapvTimeOptions = {
fillStyle: 'rgba(255, 250, 250, 0.9)',
globalCompositeOperation: 'lighter',
size: 1.5,
animation: {
//按时间展示动画
type: 'time',
//动画时间范围
stepsRange: {
    start: 0,
    end: 100
},
//时间动画的拖尾大小
trails: 1,
//单个动画的时间
duration: 5
},
draw: 'simple'
};
var timeOptions = {
map: map,
dataSet: dataSet,
mapvOptions: mapvTimeOptions,
attributions: new ol.Attribution({
html: ''
})
};
//将Mapv图层添加到地图上
map.addLayer(new ol.layer.Image({
source: new ol.source.Mapv(timeOptions)
}));

查看完整示例代码