基于百度地图 WebGL 的线图层绘制

应用场景

该代码片段适用于在百度地图 WebGL 环境中绘制线图层，广泛应用于地理信息系统、城市规划、交通管理等领域。

基本功能

此代码实现的主要功能包括：

动态加载百度地图 WebGL 库
创建线图层并加载数据
添加线图层到地图中
移除线图层
实现线图层的单击事件，并输出单击要素的属性信息

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

1. 加载地图库

首先，需要加载百度地图 WebGL 库和必要的 CSS 文件。使用 loadScripts 和 loadStyles 方法分别异步加载脚本和样式。

async mounted() {
  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',
      'https://mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js',
      'https://mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js',
      'https://mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js',
      'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js',
    ]),
    this.loadStyles([
      'http://api.map.baidu.com/res/webgl/10/bmap.css',
      'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css',
    ]),
  ])
}

2. 创建地图

加载地图库后，使用 BMapGL.Map 创建地图实例。

var map = new BMapGL.Map('allmap', {
  displayOptions: {
    poi: false,
    poiText: false,
  },
})

3. 创建线图层

接下来，创建一个 BMapGL.LineLayer 实例，并设置其样式和数据。

var lineLayer = new BMapGL.LineLayer({
  enablePicked: true,
  autoSelect: true,
  pickWidth: 30,
  pickHeight: 30,
  selectedColor: 'yellow',
  style: {
    borderColor: 'rgba(27, 142, 236, .6)',
    borderWeight: 2,
    strokeWeight: 3,
    strokeStyle: 'dashed',
    strokeColor: [
      'case',
      ['boolean', ['feature-state', 'picked'], false],
      '#6704ff',
      [
        'match',
        ['get', 'name'],
        'demo1',
        '#ce4848',
        'demo2',
        '#6704ff',
        'demo3',
        'blue',
        '#6704ff',
      ],
    ],
  },
})

4. 添加图层到地图

使用 map.addNormalLayer 方法将线图层添加到地图中。

map.addNormalLayer(lineLayer)

5. 移除图层

使用 map.removeNormalLayer 方法从地图中移除线图层。

map.removeNormalLayer(lineLayer)

6. 单击事件处理

为线图层添加单击事件监听器，并输出单击要素的属性信息。

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

总结与展望

通过这段代码，我们成功地实现了百度地图 WebGL 中的线图层绘制。在开发过程中，我们深入了解了 WebGL 地图库的用法，掌握了线图层的创建、样式设置和数据加载等技术。

未来，该卡片功能可以进一步拓展和优化，例如：

优化数据加载和渲染性能
添加更多线图层交互功能，如编辑、查询等
集成其他地图数据源，实现多源数据叠加展示

ECHO recommendation

ScriptEcho.ai