基于MapV实现DEM图层展示

应用场景

数字高程模型（DEM）图层是一种以三维方式展示地形地貌的特殊图层，广泛应用于地理信息系统、城市规划、灾害监测等领域。

代码基本功能

本代码基于MapV库实现了DEM图层展示功能，能够将DEM数据加载到地图中，并以热力图形式展示地表温度。

功能实现步骤及关键代码分析

1. 加载必要的库和资源

await Promise.all([
  this.loadScripts([
    // 加载BMapGL、MapV等库
  ]),
  this.loadStyles([
    // 加载BMapGL、DrawingManager等样式
  ]),
])

2. 初始化地图

var map = initMap({
  center: [116, 40],
  zoom: 10,
})

3. 创建MapV视图

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

4. 创建像素图层

var pixelLayer = new mapvgl.PixelLayer({
  // 设置DEM图像源
  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,
  // 设置DEM高度计算公式
  fomularJS: function (rgb) {
    return 32 - ((rgb.r + rgb.g * 256 + rgb.b * 65536) / 1000) * 6
  },
  // 设置DEM高度计算公式（C语言版本）
  fomularC: `
            float generateValue(vec4 rgb){
               return rgb.r * 255. + rgb.g * 255. * 256. + rgb.b * 255. * 65536.;
            }
        `,
  // 设置参考颜色
  refColors: {
    colors: ['#c20a35', '#cb5025', '#d65db1', '#4150d5', '#268b9c'],
    positions: [0, 0.2, 0.6, 0.8, 1.0],
  },
  // 设置深度测试和深度遮挡
  depthTest: true,
  depthMask: true,
  // 设置是否启用拾取
  enablePicked: true,
  // 设置点击事件处理函数
  onClick: (e) => {
    console.log('当前鼠标点温度：' + e.dataIndexe.toFixed(2) + '度')
  },
  // 设置鼠标移动事件处理函数
  onMousemove: (e) => {
    var div = document.querySelector('#tooltip')
    if (e.dataIndex) {
      div.style.display = 'block'
      div.innerText = '当前鼠标点温度：' + e.dataIndex.toFixed(2) + '度'
    } else {
      div.style.display = 'none'
    }
  },
})

5. 添加图层到视图

view.addLayer(pixelLayer)

总结与展望

通过本代码的实现，我们了解了如何使用MapV库加载和展示DEM数据。未来，该功能可以进一步拓展和优化：

• 优化数据加载速度，使用分块加载或多线程加载的方式提高效率。
• 支持加载不同的DEM数据源，如GeoTIFF、HGT等。
• 提供更多的地形渲染模式，如等值线、山体阴影等。
• 集成其他地理信息数据，如土地利用、道路网络等，丰富地图内容。