1.5.3.2.18.6 Mapv
优质
小牛编辑
125浏览
2023-12-01
Mapv 是一款地理信息可视化开源库,可以用来展示大量地理信息数据,点、线、面的数据,每种数据也有不同的展示类型,如直接打点、热力图、网格、聚合等方式展示数据。
MapV 可展示大量的点数据,形式可以为热力图、网格、蜂窝状、点聚合、按颜色区间、按半径大小等。可展示大量的线数据,如普通画线、高亮叠加、热力线数据展示等方式,还有各种动画效果,适合用于呈现大量轨迹的场景。也可展示大量的自定义面数据,按颜色区间来展示,行政区域也是其中一种应用场景,可直接使用。
MapV 官网地址为:
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)
}));