基于百度地图GL开发的多线层示例

应用场景

该代码主要用于在地图上绘制多线层，并支持线段的交互和样式控制，适用于展示交通网络、物流配送等场景。

代码基本功能

• 加载百度地图GL，并初始化地图实例
• 通过Fetch请求加载多线层数据
• 创建多线层对象，并设置样式和交互事件
• 添加多线层到地图中
• 提供添加和移除多线层的按钮控制

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

1. 加载地图和数据

const BMapGL = window.BMapGL
var map = new BMapGL.Map('allmap', {
  displayOptions: {
    poiText: false,
    building: false,
  },
})
fetch(
  'https://mapopen-pub-jsapigl.bj.bcebos.com/svgmodel/mutiLineLayerData.json',
).then((res) => res.json()).then((testLineData) => {
  // 创建多线层对象
  var lineLayer = new BMapGL.LineLayer({
    zIndex: 6,
    enablePicked: true,
    pickWidth: 30,
    pickHeight: 30,
    opacity: 1,
    selectedColor: 'blue', // 选中项颜色
    style: {
      strokeColorControl: (index, link) => {
        return ['#a9f49e', '#3faf7c', 'pink', '#3faf7c'][link % 4]
      },
      sequence: true,
      marginLength: 32,
      borderColor: 'green',
      borderMask: false,
      borderWeight: 2,
      strokeWeight: 6,
      strokeLineJoin: 'miter',
      strokeLineCap: 'round',
      strokeTextureUrl:
        'https://mapopen-pub-jsapigl.bj.bcebos.com/demo/img/img2.png',
      strokeTextureWidth: 32,
      strokeTextureHeight: 64,
    },
  })
  lineLayer.addEventListener('click', function (e) {
    if (e.value.dataIndex !== -1 && e.value.dataItem) {
      console.log(e.value.dataItem)
    } else {
      console.log('未选中')
    }
  })
  map.addNormalLayer(lineLayer)
  lineLayer.setData(testLineData)
})

2. 添加和移除多线层

function addLineLayer() {
  // 添加多线层到地图中
  map.addNormalLayer(lineLayer)
}

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

3. 交互事件

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

总结与展望

开发经验与收获

• 掌握了百度地图GL的多线层绘制和交互控制
• 了解了如何通过Fetch加载外部数据
• 熟悉了异步加载脚本和样式的方法

未来展望

• 优化多线层的样式控制，支持更多自定义选项
• 集成其他地图功能，如路径规划、标记等
• 探索多线层在不同应用场景中的扩展，如交通分析、物流优化等