基于Vue3和百度地图GL绘制可交互线图层的技术实践

应用场景介绍

在智慧城市建设中,城市交通态势感知至关重要。本文介绍了一种基于Vue3和百度地图GL的解决方案,用于绘制可交互线图层,帮助用户直观地了解城市道路交通状况。

代码基本功能介绍

该代码实现了以下功能:

  • 加载百度地图GL,并初始化地图
  • 创建一个可交互线图层,并设置样式和事件响应
  • 通过API获取线图层数据,并添加到地图中
  • 提供按钮控制,实现添加和清除线图层的操作

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

1. 加载脚本和样式

async mounted() {
  await Promise.all([
    this.loadScripts([
      // 百度地图GL脚本和样式
      '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',
    ]),
  ])
}

该代码段负责加载百度地图GL所需的脚本和样式。

2. 初始化地图

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

创建百度地图GL实例,并设置地图选项,如隐藏兴趣点和兴趣点文本。

3. 创建线图层

var lineLayer = null
function addLineLayer() {
  fetch(
    'https://mapopen-pub-jsapigl.bj.bcebos.com/svgmodel/lineLayerData.json',
  )
    .then((res) => {
      return res.json()
    })
    .then((testLineData) => {
      if (!lineLayer) {
        lineLayer = new BMapGL.LineLayer({
          enablePicked: true,
          autoSelect: true,
          pickWidth: 30,
          pickHeight: 30,
          opacity: 1,
          selectedColor: 'blue', // 选中项颜色
          style: {
            sequence: false, // 是否采用间隔填充纹理,默认false
            marginLength: 8, // 间隔距离,默认16,单位像素
            borderColor: '#999',
            borderMask: true, // 是否受内部填充区域掩膜,默认true,如果存在borderWeight小于0,则自动切换false
            borderWeight: ['match', ['get', 'name'], 'demo1', 2, 0], // 描边宽度,可以设置负值
            strokeWeight: 8, // 描边线宽度,默认0
            strokeLineJoin: 'miter', //描边线连接处类型, 可选'miter', 'round', 'bevel'
            strokeLineCap: 'square', // 描边线端头类型,可选'round', 'butt', 'square',默认round
            // 填充纹理图片地址,默认是空。图片需要是竖向表达,在填充时会自动横向处理。
            strokeTextureUrl: [
              'match',
              ['get', 'name'],
              'demo1',
              upTwo,
              'demo2',
              icon1,
              'demo3',
              icon2,
              icon3,
            ],
            strokeTextureWidth: ['match', ['get', 'name'], 'demo1', 32, 16],
            strokeTextureHeight: [
              'match',
              ['get', 'name'],
              'demo1',
              64,
              64,
            ],
          },
        })
      }
      lineLayer.addEventListener('click', function (e) {
        if (e.value.dataIndex !== -1 && e.value.dataItem) {
          this.updateState(e.value.dataIndex, { picked: true })
        }
      })
      lineLayer.setData(testLineData)
      map.addNormalLayer(lineLayer)
    })
}

该代码段定义了一个函数addLineLayer,用于创建线图层。它从一个JSON文件中加载线图层数据,并设置图层样式,如描边颜色、填充纹理和事件响应。

4. 添加和移除线图层

// 添加图层
function addLineLayer() {
  // ...
}

// 移除图层
function removeLineLayer() {
  map.removeNormalLayer(lineLayer)
}

这些函数分别用于添加和移除线图层。

总结与展望

通过本段代码的开发,我们掌握了如何使用Vue3和百度地图GL绘制可交互线图层,并了解了相关API的使用。

未来,该卡片功能可以进一步拓展和优化:

  • 支持自定义线图层样式,满足不同场景需求
  • 集成其他百度地图GL控件,如标记、多边形和圆形
  • 实现数据动态更新,实时展示交通状况变化
登录
ECHO推荐
ScriptEcho.ai

用户批注

贴图线

我要吐槽
新手指引
在线客服