GMVI-地理数据可视化引擎
GMVi基于GMAP地图引擎，为用户提供丰富多样的空间大数据展示方式，支持空间数据实时渲染、空间聚合、空间密度、时空趋势等多种可视化方式
API
GMvi中主要有5个重要对象
1. GL.GMVI.CanvasLayer(dataSet,options) //矢量图层
2. GL.GMVI.DataSet(array) //数据仓库
3. options=Object={} //配置对象
4. GL.GMVI.WebGlLayer(dataSet,options);//webgl图层，主要针对大数据量时使用，只支持基本的Simple绘制
5. GL.GMVI.WebGlHeatLayer(dataSet,options)//webgl热区图层，主要针对大数据量时使用，只支持基本的heatmap绘制
1. GL.GMVI.DasetSet是GMvi中统一规范的数据对象，用来保存json数据对象。
var data = [
{
city: '北京',
count: 30
},
{
city: '南京',
count: 30
}
];
var dataSet = new GL.GMVI.DataSet(data); //data is Array
var data = [
// 点数据
{
geometry: {
type: 'Point',
coordinates: [123, 23]
}
},
// 线数据
{
geometry: {
type: 'LineString',
coordinates: [
[123, 23],
[124, 24]
]
},
count: 30
},
// 面数据
{
geometry: {
type: 'Polygon',
coordinates:
[
[123, 23],
[123, 23],
[123, 23]
]
},
count: 30 * Math.random()
},
//圆
{
geometry: {
type: 'Circle',
coordinates: [lng,lat],
radius:parseInt(100*Math.random()+50)
},
}
];
///////////////////////////////////////////////////
//data 数组中data对象的完整值
{
geometry: {
type: 'Circle',
coordinates: [lng,lat],
radius:parseInt(100*Math.random()+50)
},
count: 1, //数据个数，数据个数决定权重,一般用于分类使用
time: Math.random() * 100，//时间值，用于动画使用
color:randomColor(), ///覆盖option中的值，颜色值
id:GL.H.uuid() ， //主键值
icon:img,//图片对象，当绘制icon图或者聚合图会使用到，即需要在地图上绘制图标
video:video,//视频资源
rotate:rotate,//旋转角度
labels:[fromName,toName]，//当且仅当绘制迁徙图时使用到,
name:name,//名字
text:text,//标注等价于name
size:10 //大小值
}
///////////////////////////////////////////////////
通过此方法可以获取当前数据集的数据
var data = dataSet.get();
通过此方法可以添加增量数据
dataSet.add(object/Array);//可以添加数据对象或者一个数据对象的数组
2. options配置对象参数解析。
size: 5, // 大小值，绘制点，矩形（当点用矩形绘制时）等都会用到
id: UUID, // 图层主键(若不设置为GL.H.uuid())
fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色，绘制点，多边形，圆等会用到
strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色，绘制线路时用到
lineWidth: 4, // 描边宽度
globalAlpha: 1, // 透明度
globalCompositeOperation: 'lighter', // 颜色叠加方式
shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色
shadowBlur: 35, // 投影模糊级数
maxSize: 20, //最大值，绘制气泡等图形时要限制最大值
max:100,//最大值，count的最大值
splitList: [
{
start: 0,
end: 2,
color: randomColor()
},{
start: 3,
end: 4,
color: randomColor()
},{
start: 5,
end: 6,
color: randomColor()
},{
start: 7,
end: 8,
color: randomColor()
},{
start: 9,
end:10,
color: randomColor()
},
{
start: 11,
end:12,
color: randomColor()
}
],//count区间和对应的颜色值
gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"},//比例值和对应的颜色值
maxClusterLv:3,//最大的聚合层级的值，当绘制聚合图层时需要使用
showText:true,//是否显示文字
font:'18px sans-serif',//标注字体样式
symbol:'rect',//点的标志，默认是绘制圆，指定后可以绘制矩形
animation: {
type: 'time', // 按时间展示动画
stepsRange: { // 动画时间范围,time字段中值
start: 0,
end: 100
},
trails: 10, // 时间动画的拖尾大小
duration: 5, // 单个动画的时间，单位秒
},
draw:'simple'||'bubble'||'intensity'||'category'||'choropleth'||'effect'||
'heatmap'||'grid'||'honeycomb'||'text'||'icon'||'cluster'||'tagcloud'||'migrate'||'bar'||
'waterbubble'||'radiation'||'radial'||'star'||'percent'||'video'||'arrow'||'scatter'||'migrateLines'
//绘制类型 ,只有CanvasLayer支持该配置，其他两个图层(WebGlLayer,WebGlHeatLayer)不支持
3. Layer的使用。
GL.GMVI.CanvasLayer(dataSet,options) //矢量图层
GL.GMVI.WebGlLayer(dataSet,options);//webgl图层，主要针对大数据量时使用
GL.GMVI.WebGlHeatLayer(dataSet,options)//webgl热区图层，主要针对大数据量时使用
GL.GMVI.CanvasLayer(dataSet,options) //矢量图层
GL.GMVI.WebGlLayer(dataSet,options);//webgl图层，主要针对大数据量时使用
GL.GMVI.WebGlHeatLayer(dataSet,options)//webgl热区图层，主要针对大数据量时使用
var layer=new GL.GMVI.CanvasLayer(dataSet,options);||WebGlLayer.........||WebGlHeatLayer...............
map.addLayer(layer);
////
map.removeLayer(layer);
///其他图层类比
Layer的方法。
//重置 配置
canvasLayer.setOptions(Options);||WebGlLayer||WebGlHeatLayer
//重置数据
canvasLayer.resetDatas(dataSet);||WebGlLayer||WebGlHeatLayer
//添加数据
canvasLayer.addDatas(dataSet);||WebGlLayer||WebGlHeatLayer
//清除图层
canvasLayer.clear();||WebGlLayer||WebGlHeatLayer
//移除数据
canvasLayer.removeDatas(datas)||WebGlLayer||WebGlHeatLayer
canvasLayer.removeData(data);||WebGlLayer||WebGlHeatLayer
//事件处理,同一个事件只许监听一次,只有CanvasLayer支持事件监听和移除，其他两个Layer不支持
canvasLayer.on('click'||'move'||........,function(item){
})
canvasLayer.off(''click'||'move'||........',function(e){})
//层级设置
canvasLayer.setZindex(zIndex);||WebGlLayer||WebGlHeatLayer
//显示与隐藏
canvasLayer.hide(),canvasLayer.show();||||WebGlLayer||WebGlHeatLayer
//透明度设置
canvasLayer.setOpacity(opacity);||WebGlLayer||WebGlHeatLayer