MapV
MapV 是一款地理信息可视化开源库,可以用来展示大量地理信息数据,点、线、面的数据,每种数据也有不同的展示类型,如直接打点、热力图、网格、聚合等方式展示数据。
MapV可展示大量的点数据,形式可以为热力图、网格、蜂窝状、点聚合、按颜色区间、按半径大小等。可展示大量的线数据,如普通画线、高亮叠加、热力线数据展示等方式,还有各种动画效果,适合用于呈现大量轨迹的场景。也可展示大量的自定义面数据,按颜色区间来展示,行政区域也是其中一种应用场景,可直接使用。
MapV官网地址http://mapv.baidu.com/。
SuperMap iClient for Leaflet 提供了对使用 MapV 可视化效果图层的支持,接口为:
L.supermap.mapVLayer(dataSet, options)
下面以 MapV 强边界图为例,将数据进行可视化的展示。
指定图层的配置项和数据:
var randomCount = 500;
var citys = [cities];
var cityCenter = mapv.utilCityCenter.getCenterByCityName
var node_data = {
x: cityCenter.lng - 5 + Math.random() * 10,
y: cityCenter.lat - 5 + Math.random() * 10,
};
//自定义数据
var edge_data = [
{"source": ~~(i * Math.random()), "target": '0'}
];
var results = mapv.utilForceEdgeBundling().nodes(node_data).edges(edge_data);
var data=[{datas}];
var timeData=[{timeData}];
//创建MapV图层
var dataSet1 = new mapv.DataSet(data);
//设置MapV图层的样式
var options1 = {
// 描边颜色
strokeStyle: 'rgba(55, 50, 250, 0.3)',
// 颜色叠加方式
globalCompositeOperation: 'lighter',
// 投影颜色
shadowColor: 'rgba(55, 50, 250, 0.5)',
// 投影模糊级数
shadowBlur: 10,
// 一些事件回调函数
methods: {
click: function (item) {
}
},
// 描边宽度
lineWidth: 1.0,
//最直接的方式绘制点线面
draw: 'simple'
};
L.supermap.mapVLayer(dataSet1, options1).addTo(map);
//创建MapV图层
var dataSet2 = new mapv.DataSet(timeData);
var options2 = {
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'
};
L.supermap.mapVLayer(dataSet2, options2).addTo(map);