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: .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: .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);