Angular 14中如何使用mapbox-gl-directions插件？

1. 修正导入方式 #

替换你注释掉的require导入，改用ES模块导入语法：

import * as mapboxgl from 'mapbox-gl';
import MapboxDirections from '@mapbox/mapbox-gl-directions';

如果出现类型报错，安装对应的类型声明包：

npm install @types/mapbox-gl-directions --save-dev

2. 引入插件样式 #

mapbox-gl-directions依赖自身CSS文件才能正常渲染控件样式，可通过以下两种方式引入：

• 全局引入（angular.json）
  找到architect > build > options > styles数组，添加样式路径：

"styles": [
  "src/styles.css",
  "node_modules/@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css"
]

• 局部引入（组件/服务样式文件）
  在对应的.scss或.css文件中添加：

@import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css';

3. 调整地图初始化代码 #

建议在地图加载完成后再添加方向控件，避免因地图未初始化完成导致的异常，修改你的initializeMap方法：

public initializeMap(el: string){
    // 先设置Mapbox访问令牌，建议从环境变量读取
    mapboxgl.accessToken = '你的Mapbox Access Token';

    this.map = new mapboxgl.Map({
      center: this.center,
      container: el,
      style: 'mapbox://styles/mapbox/streets-v12', // 替换为你的样式URL
      zoom: 13
    });

    this.map.addControl(new mapboxgl.NavigationControl());

    // 监听地图加载完成事件后添加方向控件
    this.map.on('load', () => {
      this.map.addControl(
        new MapboxDirections({
          accessToken: mapboxgl.accessToken
        }),
        'top-left'
      );
    });
}

4. 验证版本兼容性 #

确保mapbox-gl与@mapbox/mapbox-gl-directions版本匹配（例如mapbox-gl v2.x对应mapbox-gl-directions v4.x），可查看package.json确认依赖版本：

"dependencies": {
  "mapbox-gl": "^2.15.0",
  "@mapbox/mapbox-gl-directions": "^4.1.0"
}

内容的提问来源于stack exchange，提问作者Billy