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

LoserChaser

已于 2024-07-27 09:58:40 修改

阅读量1.2k

点赞数 15

分类专栏： TypeScript相关 GIS相关地图规划导航文章标签：前端 typescript react

于 2024-07-24 22:20:27 首次发布

本文链接：https://blog.csdn.net/sinat_30491515/article/details/140672197

版权

GIS相关同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

地图规划导航

6 篇文章 0 订阅

订阅专栏

TypeScript相关

2 篇文章 0 订阅

订阅专栏

项目截图如下：

一、项目地址

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

二、踩坑环境

Node Version v20.12.1
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/**/*"
    ],
    
}