基于百度地图WebGL的点图层操作

应用场景

该代码主要用于在百度地图WebGL中添加和移除点图层，实现对地图上特定点的可视化和交互。点图层广泛应用于地理信息系统（GIS）中，用于展示分布式数据，如店铺、景点或其他兴趣点。

基本功能

• **添加点图层：**从数据源加载点数据，并将其渲染到地图上。
• **移除点图层：**从地图中删除点图层。
• **点图层交互：**支持鼠标点击事件，获取选中点的相关信息。

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

1. 加载地图和依赖库

async mounted() {
  await Promise.all([
    this.loadScripts([
      // 加载地图和依赖库的脚本
    ]),
    this.loadStyles([
      // 加载地图样式的样式表
    ]),
  ])
}

该代码首先加载了百度地图WebGL的脚本和样式表，为后续地图操作做好准备。

2. 创建点图层

var pointLayer = new BMapGL.PointIconLayer({
  zIndex: 6,
  isTop: true,
  enablePicked: true,
  pickWidth: 30,
  pickHeight: 30,
  opacity: 1,
  isFlat: true,
  isFixed: true,
  style: {
    opacity: 1,
    // 自定义点图标样式
  },
})

这段代码创建了一个点图层，设置了其图层属性和样式。

3. 加载点数据并添加到图层

fetch(
  '//mapopen-pub-jsapigl.bj.bcebos.com/demo/demodata/pointLayerData.json',
)
  .then((res) => {
    return res.json()
  })
  .then((testPointData) => {
    pointLayer.setData(testPointData)
  })

该代码从指定数据源加载点数据，并将其添加到创建的点图层中。

4. 添加点图层到地图

map.addNormalLayer(pointLayer)

将创建的点图层添加到地图中，使其在地图上可见。

5. 移除点图层

function removePointLayer() {
  map.removeNormalLayer(pointLayer)
}

该函数用于从地图中移除点图层。

6. 点图层交互

pointLayer.addEventListener('click', function (e) {
  if (e.value.dataIndex !== -1 && e.value.dataItem) {
    console.log(e.value.dataItem)
  } else {
    console.log('未选中')
  }
})

该代码为点图层添加了点击事件监听器，当用户点击点图层上的点时，可以获取选中点的相关信息。

总结与展望

这段代码实现了在百度地图WebGL中添加和移除点图层的功能，提供了对地图上特定点的可视化和交互。

开发经验与收获：

• 掌握了百度地图WebGL API的使用方法。
• 理解了点图层的数据加载和渲染流程。
• 熟悉了地图事件监听器的使用方法。

未来拓展与优化：

• **自定义点图标样式：**通过修改 style 属性，可以实现更加丰富的点图标样式。
• **点图层聚合：**对于大量点数据，可以考虑使用点图层聚合功能，优化地图性能。
• **点图层动画：**添加动画效果，增强点图层的视觉效果。