为满足图像、图像瓦片类数据的前端个性化展示需求，JSAPI增加图像覆盖物的像素个性化以及基于三方标准图层的像素个性化支持；MapVGL增加PixelLayer图层可实现数据的高度显示，数据源除支持图像数据，还支持ArrayBuffer形式传入float类型的单波段数据。
像素个性化支持用户可根据来源图像的rgba波段运算，输出目标像素计算值；用户可以设置目标像素计算值相对应的颜色带（渐变带/块带）；用户可以设置目标像素计算值显示区间，用于数据过滤；支持基于图像的掩膜设置；支持用户基于鼠标交互事件，输出来源图像像素以及目标像素计算值。

1.BMapGL.GroundOverlay地面叠加层的图像覆盖物【type: 'image'】
在构造函数参数GroundOverlayOptions中新增以下参数

GroundOverlay新增方法

GroundOverlay事件新增返回内容

onmousemove可以通过getImagePixel/getValue方法获取数据
2.基于BMapGL.XYZLayer三方标准图层的新对象BMapGL.PixelLayer
构造函数：

基于BMapGL.XYZLayer构造函数的options变量增加以下：

新增方法

事件

onmousemove可以通过getImagePixel/getValue方法获取数据
3.MapVGL像素图层
mapvgl.PixelLayer
实现数据的高度显示，数据源除支持图像数据，还支持ArrayBuffer形式传入float类型的单波段数据。可根据来源图像的rgba波段运算，输出目标像素计算值；可设置目标像素计算值相对应的颜色带（渐变带/块带）；可以设置目标像素计算值显示区间，用于数据过滤；支持基于几何图形的掩膜设置；支持用户基于鼠标交互事件，输出来源图像像素以及目标像素计算值。
构造方法

options参数除继承基础图层参数外，增加以下：

方法

var map = new BMapGL.Map('container');
map.enableScrollWheelZoom(true);
map.centerAndZoom(new BMapGL.Point(116.47153407391221, 40.260579778320434), 10);

// 定义方法：处理参数，实例GroundOverlay
function drawImage(x1, y1, x2, y2, url, opt) {
    var pStart = new BMapGL.Point(x1, y2);
    var pEnd = new BMapGL.Point(x2, y1);
    var bounds = new BMapGL.Bounds(
        new BMapGL.Point(pStart.lng, pStart.lat),
        new BMapGL.Point(pEnd.lng, pEnd.lat),
    );
    opt = opt || {};
    var opts = {
        type: 'image',
        url: url,
        opacity: 0.8,
    };
    opts = Object.assign(opts, opt);
    var imgOverlay = new BMapGL.GroundOverlay(bounds, opts);
    return imgOverlay;
}
// 定义事件
function addEvent(overlay) {
    overlay.addEventListener('onclick', function (e) {
        if (e.value) {
            console.log('当前鼠标点高程：' + e.value + '米');
        }
    });
    overlay.addEventListener('onmousemove', function (e) {
        var color = this.getImagePixel(e.point);
        var value = this.getValue(color);
        if (value) {
            console.log('当前鼠标点高程：' + value + '米');
        }
    });
}

// 输入像素个性化相关的参数
var overlayImage = drawImage(
    115.42998374165875,
    39.445598832357135,
    117.51344540762456,
    41.06713175601481,
    'https://mapopen-pub-jsapigl.bj.bcebos.com/dem/dem-bj.png',
    {
        isPixelMap: true,
        pixelMap: {
            fomularC: `float generateValue(vec4 rgb){
                      return rgb.r * 255. + rgb.g * 255. * 256. + rgb.b * 255. * 65536.;;
                  }`,
            fomularJS: function (rgb) {
                return rgb.r + rgb.g * 256 + rgb.b * 65536;
            },
            domain: [0, 2162],
            maskPng: 'https://mapopen-pub-jsapigl.bj.bcebos.com/dem/beijingMask.png',
            maskData: 1, // 昌平区
            colors: ['#268b9c', '#4150d5', '#d65db1', '#cb5025', '#c20a35'],
            positions: [0, 0.2, 0.6, 0.8, 1.0],
        },
    },
);

// 覆盖物添加到地图
map.addOverlay(overlayImage);
// 注册事件
addEvent(overlayImage);

var map = new BMapGL.Map('container');
map.enableScrollWheelZoom(true);
map.centerAndZoom(new BMapGL.Point(116.47153407391221, 40.260579778320434), 10);

// 实例PixelLayer
var pixelLayer = new BMapGL.PixelLayer({
    pixelMap: {
        opacity: 1,
        fomularC: `
                      float generateValue(vec4 rgb){
                              return rgb.r * 255. + rgb.g * 255. * 256. + rgb.b * 255. * 65536.;
                          }
                      `,
        fomularJS: function (rgb) {
            return rgb.r + rgb.g * 256 + rgb.b * 65536;
        },
        domain: [0, 2162],
        maskPng: 'https://mapopen-pub-jsapigl.bj.bcebos.com/dem/beijingMask.png',
        maskCoord: [
            new BMapGL.Point(115.42998374165875, 39.445598832357135),
            new BMapGL.Point(117.51344540762456, 41.06713175601481),
        ],
    },
    // 下面为XYZLayer相关参数
    tms: true,
    useThumbData: false,
    minZoom: 7,
    maxZoom: 12,
    tileUrlTemplate: 'https://mapopen-pub-jsapigl.bj.bcebos.com/dem-bj-1/[z]/[x]/[y].png',
    extent: [12848170.946, 4784619.585, 13080078.854, 5021093.159], // "EPSG":3857 左下角坐标，右上角坐标
});
// 定义事件
function addEvent(overlay) {
    overlay.addEventListener('onclick', function (e) {
        if (e.value) {
            console.log('当前鼠标点高程：' + e.value + '米');
        }
    });
    overlay.addEventListener('onmousemove', function (e) {
        var color = this.getImagePixel(e.point);
        var value = this.getValue(color);
        if (value) {
            console.log('当前鼠标点高程：' + value + '米');
        }
    });
}
// 覆盖物添加到地图
map.addOverlay(pixelLayer);
// 注册事件
addEvent(pixelLayer);

// 需要引入MapVGL相关依赖
var map = initMap({
    center: [116, 40],
    zoom: 10,
});

var view = new mapvgl.View({
    map: map,
});

var pixelLayer = new mapvgl.PixelLayer({
    source: {
        image: 'https://mapopen-pub-jsapigl.bj.bcebos.com/dem/dem-bj.png',
    },
    domain: [0, 2162],
    noData: -32768, // 不显示数据
    baseLine: 0,
    elevationScale: 10,
    opacity: 0.75,
    isTerrain: true,
    gridRowMax: 100,
    gridColMax: 100,
    fomularC: `
                    float generateValue(vec4 rgb){
                            return rgb.r * 255. + rgb.g * 255. * 256. + rgb.b * 255. * 65536.;
                        }
                    `,
    fomularJS: function (rgb) {
        return rgb.r + rgb.g * 256 + rgb.b * 65536;
    },
    // refImage: {
    //     url: 'https://mapopen-pub-jsapigl.bj.bcebos.com/dem/rgb-bj.png',
    //     noTextureData: [0, 0, 0],
    // },
    refColors: {
        colors: ['#F9F871', '#FFC75F', '#FF9671', '#FF6F91', '#D65DB1', '#845EC2'],
        positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
    },
    depthTest: true,
    depthMask: true,
    enablePicked: true,
    onClick: (e) => {
        console.log('当前鼠标点高程：' + e.dataIndex + '米');
    },
    onMousemove: (e) => {
        console.log('当前鼠标点高程：' + e.dataIndex + '米');
    },
});
// 百度经纬度坐标
var tileBounds = [115.42998373729408, 39.44559883470555, 117.5134454103027, 41.06713175801901];

// 设置图像范围
pixelLayer.setData([
    {
        geometry: {
            type: 'Polygon',
            coordinates: [
                [
                    [tileBounds[0], tileBounds[1], 0],
                    [tileBounds[0], tileBounds[3], 0],
                    [tileBounds[2], tileBounds[3], 0],
                    [tileBounds[2], tileBounds[1], 0],
                ],
            ],
        },
    },
]);
view.addLayer(pixelLayer);

ArrayBuffer数据源
如果是tif文件数据源，可以使用GeoTIFF JavaScript库[1]进行解析。如果是服务器端传到前端的ArrayBuffer直接解析输入即可。

const response = await fetch('http://mapopen-pub-jsapigl.bj.bcebos.com/dem/beijing_dem.tif');
const arrayBuffer = await response.arrayBuffer();
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
const image = await tiff.getImage();
const data = await image.readRasters();
var pixelLayer = new mapvgl.PixelLayer({
    source: {
        image: data[0],
        width: data.width,
        height: data.height,
    },
    fomularC: `
                    float generateValue(vec4 rgb){
                            return rgb.r;
                        }
                    `,
    fomularJS: function (rgb) {
        return rgb.r;
    },
    // 其他配置可参考图像数据源配置
});