高性能渲染图层--GraphicLayer
作者：doremi
今天给大家介绍下，SuperMap iServer 8C（2017）发布之后，咱们的iClient for JavaScript客户端新增加的高性能渲染图层—GraphicLayer，这个图层主要是针对前端大数据量的点渲染。
效果
绘制5万个随机的圆和五角星对象，耗时966ms，拖动的时候没有明显的卡顿现象，非常流畅。代码如下
//定义图层
graphicLayer = new SuperMap.Layer.Graphics("Graphic Layer",null,{hitDetection: true});
//定义symbol相关属性，填充色，边框颜色，半径
var fillColors = ['rgba(255,153,0,0.4)', 'rgba(70,80,224,0.4)', 'rgba(60,150,79,0.4)', 'rgba(176,61,35,0.4)'];
var strokeColors = ['rgba(255,204,0,0.2)', 'rgba(12,21,138,0.2)', 'rgba(20,99,32,0.2)', 'rgba(145,43,20,0.2)'];
var radius = [3,6,9,12,15,18];
var sybolCount = fillColors.length * radius.length * 2;
var symbols = [];
for(var i = 0; i 支持有事件的绘制
GraphicLayer也是支持选取对象事件的，对应的要素选取控件为SuperMap.Control.SelectGraphic。与vectorLayer的选取控件selectFeature一样也是支持鼠标单击和悬浮事件。
代码如下
//定义控件，绑定图层事件
selectGraphic = new SuperMap.Control.SelectGraphic(graphicLayer, {
onSelect: onGraphicSelect,
onUnselect: onGraphicUnSelect
});
//把控件添加到map中
map.addControl(selectGraphic);
//激活控件
selectGraphic.activate();
function onGraphicSelect(feature){
//to to
}
function onGraphicUnSelect(feature){
//to do
}
与VectorLayer的对比
VectorLayer的实现主要支持不同的渲染方式
SVG渲染，以标签的形式将对象会知道SVG上，对象越多，标签就会越多，页面元素的增加会导致页面卡顿
Canvas/canvas2，都是基于HTML5的canvas实现的，若使用这两种方式渲染矢量数据的话需要选用支持Html5 Canvas的浏览器。其中，Canvas2 是对 Canvas 在性能上的优化，Canvas2 只绘制发生变化的瓦片，减少了重绘次数， 提高了绘制速度，而且对于数量在10000以上的矢量要素，采用分块显示，增强了用户体验效果。
而最重要的一点是，vectorLayer上的对象渲染调用的canvas接口进行绘制时，需要每一个对象都要单独绘制，在大数据量的情况下，这种方式是非常消耗性能的。
GraphicLayer的实现，只支持canvas
底层的对象类型和vectorLayer的对象类型是一致的，数据量在上了2万之后性能优势明显高于VectorLayer。主要的优化在于使用的是canvas的image方法，创建一个image之后，canvas在绘制的时候就会直接调用此image，而不是每一个对象都要单独去绘制，这样就节省了大量的性能。所以在使用这个图层的时候，image要先定义好，而不是在style中定义。
//定义样式
var symbol = new SuperMap.Style.Circle({
radius: 3,
fill: new SuperMap.Style.Fill({
color: "red"
})
});
//样式调用
pointVector.style={
image: symbol
};
应用场景
可以使用在数据量在20W以下时，需要掌控数据在整体的一个分布情况并且有选取交互的动作时，或者是数据更新频率较快，无法使用缓存的情况下使用。
注意：目前graphicLayer只支持三种样式：SuperMap.Style.Circle圆形，SuperMap.Style.Clover三叶草，SuperMap.Style.RegularShap正多边形，暂时不支持自定义的图片样式。