格点填色

格点填色

首先我们来看看如何将拿到的格点数据按照格点值进行填色。同样的，需要解析数据以及创建样式。

创建数据解析器

这里的示例数据是QE自定义的四维二进制格式的数据，所以使用QEGridDataProvider负责解析。

const buffers = await getBinary("public/demos/data/2T_201909082000.zip");
const provider = new QEGridDataProvider(buffers[0]);

创建样式

这里我们使用分级规则填色，以及配置填色方式

const style: IPixelLayerStyleOptions = {        //绘制样式配置
  fillColor: "color-temp#res",                  //格点颜色：使用资源管理器中资源ID为color-temp的分段规则
  fillMode: GridDataGLFillMode.bitmap,          //显示方式：格点填色方式
}

创建图层

const layer = new LPixelLayer({
  name: "格点气温填色"
}).setDrawOptions(style).setDataSource(provider);
map.addLayer(layer);

使用colorScale

上面示例中，我们是使用分段规则作为fillColor的，框架还支持另一种色标形式colorScale，也就是一个颜色条。是bitmap形式的色例配置，优先级高于fillColor。

指定颜色条的最小值和最大值，然后将数据线性的对应到色条的颜色

const maxMin = provider.getGrid().maxMin;           //先获取数据的最大最小值
const colorScale = await getPredefinedBitmapScale(  //调用内置函数，获取内置的色标
  predefinedLegendNames.BkBlAqGrYeOrReViWh200,
  maxMin.min,
  maxMin.max,
  true
);
const style: IPixelLayerStyleOptions = {
  colorScale: colorScale,
  fillMode: GridDataGLFillMode.bitmap
};

也可以根据颜色分段规则创建colorScale

const colorScale = BitmapColorScaleGL.createFromStopRules(resourceService.getResource("color-temp").instance, 256, false, 0, -2, 50); //根据颜色分段规则创建colorScale
const style: IPixelLayerStyleOptions = {          //绘制样式配置
  fillMode: GridDataGLFillMode.shaded2,           //显示方式：样条插值色斑图
  colorScale: colorScale,                         //格点颜色使用colorScale的方式
}

格点填色示例

色斑图

如果我们希望绘制色斑图，可以将fillMode设置为色斑图，色斑图是在格点填色的基础上，对数据做了一个插值处理，其中shaded1表示双线性插值色斑，shaded2表示样条插值色斑。

const style: IPixelLayerStyleOptions = {  //绘制样式配置
    fillColor: "color-wind#res",          //格点颜色：使用资源管理器中资源ID为color-wind的分段规则
    fillMode: GridDataGLFillMode.shaded2, //显示方式：样条插值色斑方式
}

色斑图示例

叠加等值线

fillMode为色斑图的时候，可以叠加等值线显示。将样式中的showLine设置为true，fillModeForLine是控制等值线是用双线性插值还是用样条插值的，其中shaded1表示双线性插值，shaded2表示样条插值。将fillMode的插值方式设置成和fillModeForLine的插值方式一致时，就可以实现等值线和色斑图吻合。

const style: IPixelLayerStyleOptions = {
    fillColor: "color-temp#res",                  //格点颜色：使用资源管理器中资源ID为color-temp的分段规则
    fillMode: GridDataGLFillMode.shaded2,         //显示方式：样条插值色斑图方式
    lineColor: "rgba(0,0,0,0.6)",                 //等值线颜色
    fillModeForLine: GridDataGLFillMode.shaded2,  //等值线插值方式
    lineWidth: 1,                                 //等值线宽度
    showLine: true                                //是否显示等值线
}

渐变填色

如果我们希望颜色的变化有渐变的效果，那可以将fillMode设置为渐变填色，渐变填色是在色斑图的基础上再对颜色进行了插值处理，其中pixel1表示双线性插值渐变填色，pixel2表示样条插值渐变填色。

const style: IPixelLayerStyleOptions = {          //绘制样式配置
    fillColor: "color-precp#res",                 //格点颜色：使用资源管理器中资源ID为color-precp的分段规则
    fillMode: GridDataGLFillMode.pixel1,          //显示方式：双线性插值渐变填色
}

叠加格点填值

很多时候，格点填色图层LPixelLayer会叠加格点填值一起显示，使数据更直观，我们只需在上面的基础上再使用LGridLabelLayer创建一个格点填值的图层，进行叠加显示即可。

const labelLayer = new LGridLabelLayer({          //创建LGridLabelLayer格点填值图层
    name: "降水格点填值",                           //图层name
}).setDrawOptions({                                
    text: {                                       //格点文本样式
        data: "#decimal?len=1"                    //文本内容：格点值保留1位小数
    }
}).setDataSource(provider);                       //设置数据源
map.addLayer(labelLayer);                         //将格点填值图层添加到地图上

掩膜边界

LPixelLayer和LGridLabelLayer也同样支持使用mask构建参数来设置掩膜边界

getJSONZip("public/demos/data/china.poly.zip").then(json => { //获取mask数据
    layer.setLayerOptions({ mask: json }, true);              //格点填色图层设置mask
	labelLayer.setLayerOptions({ mask: json }, true);         //格点填值图层设置mask
});

如果资源管理器中已经存在该资源，也可以直接将mask配置成该资源ID

layer.setLayerOptions({ mask: "mask-china" }, true);
labelLayer.setLayerOptions({ mask: "mask-china-feature" }, true);

渐变填色示例