基于WebGL的地图填充图层交互开发

应用场景

在地图展示场景中，填充图层可以用来展示区域范围或空间分布等信息，广泛应用于城市规划、土地利用、人口分布等领域。

基本功能

本代码实现了基于WebGL的地图填充图层交互功能，用户可以动态添加和移除填充图层，并在地图上进行交互操作，如悬浮选中和点击获取数据信息。

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

1. 导入地图库

首先，需要导入百度地图WebGL库和相关插件库。

await Promise.all([
  this.loadScripts([
    'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
    'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
    // ...其他插件库
  ]),
  this.loadStyles([
    'http://api.map.baidu.com/res/webgl/10/bmap.css',
    // ...其他插件库样式
  ]),
])

2. 创建地图实例

创建BMapGL地图实例，并设置地图中心点、缩放级别和地图样式。

const map = new BMapGL.Map('allmap')
var point = new BMapGL.Point(116.414, 39.915)
map.centerAndZoom(point, 10)
map.enableScrollWheelZoom(true)
map.setMapStyleV2({ styleJson: darkStyle })

3. 定义填充图层

定义填充图层，设置CRS、交互属性和样式。

var fillLayer = new BMapGL.FillLayer({
  crs: 'GCJ02',
  enablePicked: true,
  autoSelect: true,
  pickWidth: 30,
  pickHeight: 30,
  selectedColor: 'green', // 悬浮选中项颜色
  border: true,
  style: {
    fillColor: [
      'case',
      ['boolean', ['feature-state', 'picked'], false],
      'red',
      [
        'match',
        ['get', 'name'],
        '海淀区',
        '#ce4848',
        '朝阳区',
        'blue',
        '通州区',
        'blue',
        '丰台区',
        '#6704ff',
        '房山区',
        '#6704ff',
        'orange',
      ],
    ],
    fillOpacity: 0.3,
    strokeWeight: 1,
    strokeColor: 'blue',
  },
})

4. 填充图层交互事件

为填充图层添加点击事件，获取点击区域信息。

fillLayer.addEventListener('click', function (e) {
  if (e.value.dataIndex !== -1 && e.value.dataItem) {
    console.log('click', e.value.dataItem)
  }
})

5. 添加和移除填充图层

通过按钮控制添加和移除填充图层。

function addFillLayer() {
  // ...加载数据
  if (!fillLayer) {
    // ...初始化填充图层
  }
  map.addNormalLayer(fillLayer)
  fillLayer.setData(testFillData)
}

function removeFillLayer() {
  map.removeNormalLayer(fillLayer)
}

总结与展望

开发经验与收获

• 掌握了WebGL地图开发技术，能够熟练使用BMapGL库实现地图交互功能。
• 深入理解了填充图层的原理和交互事件处理。
• 提升了前端开发中数据可视化能力。

未来拓展与优化

• 优化填充图层样式，支持更多个性化配置。
• 探索填充图层与其他地图元素的联动交互。
• 扩展填充图层功能，支持多选、查询等操作。