GraphHopper-map-navi_路径规划、导航（web前端页面版）

项目截图如下：

一、项目地址

本文记录的问题是graphhopper路径规划web版源码graphhopper-maps中的导航分支
试验性的graphhopper导航分支 github地址
此项目是一个Web应用，使用的React框架，主要使用Typescript语言，项目使用了ESLint，建议在install前，修改package文件去掉此项依赖。
graphhopper用到了MapLibre地图，是个国外的地图，第一次见到，其API文档是MapLibre GL JS
注意：目前这个项目的导航还有一定的问题，路径规划后，导航的起点总会变成当前位置，重新路径规划，不能拿来直接用。

二、踩坑环境

1. Node Version v20.12.1
2. NPM Version 10.5.0

三、问题记录

主要的问题无外乎就是npm install产生的依赖问题；Typescript语法问题；环境配置问题主要涉及tsconfig.json；地图问题等。因为加载的osm在线地图，有时候国内访问的时候，会导致地图加载不出来。

3.1、graphhopper中地图问题

3.1.1. getOpacity不存在的问题

• 问题：TS2551: Property ‘getOpacity’ does not exist on type ‘MapLibreLayer’. Did you mean ‘setOpacity’?
• 解决：自定义getOpacity函数

    getOpacity(): number {// 获取图层的不透明度，假设 OpenLayers 中获取不透明度的方法是 getOpacity()const opacity: number = super.getOpacity();// 将不透明度转换为字符串类型返回return opacity;}

3.1.2. dispatchEvent不存在的问题

• 问题：TS2339: Property ‘dispatchEvent’ does not exist on type ‘MapLibreLayer’.
• 解决：在render函数中传入了一个event对象，代码如下

//在render函数中传入了一个event对象render(frameState: FrameState,e:any): HTMLElement {...// const layer = this.getLayer()e.target.dispatchEvent(new RenderEvent(POSTRENDER, undefined, frameState, undefined))...}

3.1.3. vectorLayer.set(‘background-maplibre-layer’, true)不存在set方法

• 解决：自定义set方法
  在源代工程自定的MapLibreLayer类中添加相关方法

export default class MapLibreLayer extends Layer {maplibreMap: maplibregl.Map//自定义set方法/*************************************************/private properties: { [key: string]: any } = {};set(key: string, value: any) {this.properties[key] = value;}/************************************************/constructor(style: string) {super({})const container = document.createElement('div')container.style.position = 'absolute'container.style.width = '100%'container.style.height = '100%'      this.maplibreMap = new maplibregl.Map(Object.assign({},{ style: style },{container: container,attributionControl: false,interactive: false,trackResize: false,}))this.applyOpacity_()}private applyOpacity_() {...}render(frameState: FrameState,e:any): HTMLElement {...}
}

3.1.4. maplibre-gl.js.map不存在的问题

• 问题：错误通常表示你的项目尝试加载一个 JavaScript 文件的 Source Map（源映射文件），但是找不到该文件。

Failed to parse source map from 'D:\Code\grphhopper\graphhopper-maps-navi\node_modules\maplibre-gl\dist\maplibre-gl.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Code\grphhopper\graphhopper-maps-navi\node_modules\maplibre-gl\dist\maplibre-gl.js.map'

• 解决：确保你的项目的 maplibre-gl.js.map 文件确实存在于指定的路径 node_modules\maplibre-gl\dist\；有时候可能是因为缓存的问题导致 Source Map 文件找不到，尝试清除浏览器缓存或者重新构建项目可以解决问题。
• 我还进行了一项错做，打开node_modules\maplibre-gl\dist\maplibre-gl.js文件，将最后一行注释打开，不过貌似没啥用，也不是很懂，把当时的操作记录一下。

3.1.5. Uncaught ReferenceError: GIT_SHA is not defined

• 解决：直接注释掉语句就行，没有影响。

3.2、npm/node/webpack问题

3.2.1. npm install产生的问题

• 问题：在拿到项目源码后，建议删除package-lock.json后，再进行安装操作，因为项目比较旧，很多依赖库都过失显示Deprecated，例如：
  • npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it.
  • npm : npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
  • WARN  3 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6, rimraf@3.0.2
• 解决：删除了lock文件和node-modules重新进行了安装。

3.2.2. graphhopper-maps-navi项目使用了openlayer地图引擎，找不到ol的问题

• 问题：

"Could not find a declaration file for module 'ol'. 'd:/Code/grphhopper/graphhopper-maps-navi/node_modules/ol/index.js' implicitly has an 'any' type.\n  Try `npm i --save-dev @types/ol` if it exists or add a new declaration (.d.ts) file containing `declare module 'ol';`",
//或者
[tsl] ERROR TS2688: Cannot find type definition file for 'ol'.  The file is in the program because: Entry point of type library 'ol' specified in compilerOptions  

• 解决：不需要设置"typeRoots":["node_modules/@types"]``;需要设置"types": [
  “ol”, “jest”],`
  参考文章1：编译typescript出现 Cannot find type definition file for ‘babel__core‘，区别就是我把typRoots配置注释掉了。
  参考文章2：tsconfig.json 报错 Cannot find type definition file for ‘lodash‘. 解决方案

3.2.3. npm安装文件夹权限问题

• 问题：npm ERR code ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MAC
• 解决：参考文章

3.2.4. Cannot find name ‘expect’，‘it’

• 解决：

{"compilerOptions": {// ..."types": ["jest"],// ...}
}

还要报错的源代码加入import { describe, expect,it, test } from '@jest/globals'
参考了Cannot find name ‘expect’ #1068

3.2.5. Cannot use override keyword to override methods of Object without explicitly extending Object #45704

• 解决：可能是ESlint的原因，由于没有重名的函数，所以直接将override删除就行了 。如果指导java和c++的继承，类的重载对override关键字应该不陌生。

3.2.6. npm安装sharp出现的问题

• 问题：

npm ERR!commandfailedC: \wINowslsystem32\cmd.exe /d /s /c (node install/libvips & node install/d1l-copy && prebuild-install)ll (node install/can-compile && node-gyp rebuild && node install/dll-copy)
npm ERR!l sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-win32-x64.tar.br
npm ERR!sharp: Please see https://sharp.pixelplumbing.com/installfor required dependencies
npm ERR!sharp:Installation error: unable to verify the first certificate

• 解决办法 ：使用镜像地址 或者 科学上网

npm config set sharp_binary_host "https://npmmirror.com/mirrors/sharp"
npm config set sharp_libvips_binary_host "https://npmmirror.com/mirrors/sharp-libvips"

在终端命令行可能会报错 error sharp_binary_host is not a valid npm option可以尝试使用

Windows系统
set SHARP_BINARY_HOST=https://npmmirror.com/mirrors/sharp
set SHARP_LIBVIPS_BINARY_HOST=https://your-custom-host.com
Unix系统
export SHARP_BINARY_HOST=https://npmmirror.com/mirrors/sharp
export SHARP_LIBVIPS_BINARY_HOST=https://your-custom-host.com

3.3、Typescript相关问题

3.3.1. 语法问题：

• TS2322: Type ‘number’ is not assignable to type ‘null’.
• Argument of type ‘any’ is not assignable to parameter of type ‘never’.在 TypeScript 中，你试图将一个 number 类型的值赋给一个类型为 null 的变量或属性。
  • 正确变量声明：let nullableValue: number | null;
• “Variable ‘thenInstructionSign’ is used before being assigned.”,存在一个变量 thenInstructionSign 被使用了，但是在使用之前没有被赋值。
• Argument of type ‘T’ is not assignable to parameter of type ‘never’
• TS2345: Argument of type ‘number[]’ is not assignable to parameter of type ‘never’. 错误 TS2345 通常表示类型不匹配的问题，具体来说是尝试将一个类型为 number[] 的值赋给一个类型为 never 的参数
• TS2345: Argument of type ‘Element’ is not assignable to parameter of type ‘never’.

3.3.2. @types/ol 与ol的关系

解释：@types/ol 是 TypeScript 社区维护的一个类型声明库，用于为使用 TypeScript 编写的项目提供 OpenLayers（通常简写为 ol）库的类型定义。在 TypeScript 中，如果一个 JavaScript 库没有提供类型声明文件（.d.ts），那么 TypeScript 就无法理解该库的类型信息，这会导致类型检查的错误或警告，也会影响开发工具如 VS Code 的代码提示和补全功能。
因此，为了解决这个问题，社区会创建 @types 类型声明库，包含了对应 JavaScript 库的类型信息。
对于 OpenLayers 来说，你可以通过安装 @types/ol 来获取与 ol 库配套的 TypeScript 类型定义。
一旦安装了 @types/ol，TypeScript 就能够理解 ol 库的类型，从而提供更好的类型检查和开发工具的支持。

3.3.3. 找不到jest的类型定义文件

• 问题：

Cannot find type definition file for 'jest'.\n  The file is in the program because:\n    Entry point of type library 'jest' specified in compilerOptions

• 解决：
  ①安装 @types/jest 包作为开发依赖项npm install --save-dev @types/jest
  ②tsconfig.json 中的配置
  "compilerOptions": { "types": ["jest"] }

3.3.4. TypeScript 的配置文件 tsconfig.json

{"compilerOptions": {//指定 TypeScript 编译后输出的目录。所有编译后的 JavaScript 文件将会被放置在 dist 目录下。"outDir": "./dist/",//是否生成对应的 .map 文件，用于在调试时将编译后的 JavaScript 代码映射回原始 TypeScript 代码，方便调试。"sourceMap": true,//如果设置为 true，则 TypeScript 会在可能的情况下强制要求显式声明变量的类型，避免使用隐式的 any 类型。"noImplicitAny": false,//允许编译器编译 JavaScript 文件。这对于使用 TypeScript 逐步迁移现有 JavaScript 项目很有用。"allowJs": true,//指定 JSX 的解析方式，这里是 React 的 JSX 语法。"jsx": "react-jsx",//允许从没有默认导出的模块中默认导入。这是为了与 CommonJS 和 AMD 模块兼容。"allowSyntheticDefaultImports": true,//设置解析非相对模块名称时的基本目录。在这里，. 表示使用当前的工作目录作为基本路径。"baseUrl": ".",//将辅助工具函数导入到每个模块中，以帮助实现某些特定功能（如 __extends、__assign 等）。"importHelpers": true,//指定要生成的模块规范。这里设置为 ES2015，即使用 ES6 标准的模块化语法。"module": "ES2015",//指定模块解析策略。node 表示使用 Node.js 的模块解析策略。"moduleResolution": "node",//如果函数没有显式的返回类型，则报告错误。有助于确保函数中所有代码路径都有返回值。"noImplicitReturns": true,//启用所有严格类型检查选项。相当于设置了 "strict": true，包括 noImplicitAny, noImplicitReturns, strictNullChecks, strictFunctionTypes 等。"strict": true,//指定编译后的 JavaScript 目标版本。在这里是 ES2019。"target": "ES2019",//指定类型声明文件的搜索路径。这里设置为在 node_modules/@types 目录中寻找类型声明文件。"typeRoots":["../node_modules/@types"],//指定要包含的类型声明文件。这里列出了 ol，表示 TypeScript 应该包括 @types/ol 中定义的类型。"types":["ol"],//设置路径映射，允许使用 @/ 前缀来引用 src/ 目录下的文件。"paths": {"@/*": ["src/*"],},//指定编译时所包含的库文件。这里包括 ES2019 标准库、DOM 标准库以及支持可迭代对象的 DOM 标准库。"lib": ["ES2019","dom","dom.iterable"],//启用 esModuleInterop，使得默认导入和命名空间导入与 CommonJS 导入兼容。"esModuleInterop": true,//允许 TypeScript 解析 JSON 模块。"resolveJsonModule": true,//如果设置为 true，则跳过编译时对声明文件（.d.ts）的检查。"skipLibCheck": true,},//指定要包含在编译中的文件或目录。这里包括 ./src/**/* 和 ./test/**/*，表示编译器会编译 src 和 test 目录下的所有 TypeScript 文件。"include": ["./src/**/*","./test/**/*"],}