GraphHopper路径规划相关问题记录(web-navi)

文章目录

  • 一、项目地址
  • 二、踩坑环境
  • 三、问题记录
    • 3.1、graphhopper中地图问题
      • 3.1.1. getOpacity不存在的问题
      • 3.1.2. dispatchEvent不存在的问题
      • 3.1.3. vectorLayer.set('background-maplibre-layer', true)不存在set方法
      • 3.1.4. maplibre-gl.js.map不存在的问题
      • 3.1.5. Uncaught ReferenceError: GIT_SHA is not defined
    • 3.2、npm/node/webpack问题
      • 3.2.1. npm install产生的问题
      • 3.2.2. graphhopper-maps-navi项目使用了openlayer地图引擎,找不到**ol**的问题
      • 3.2.3. npm安装文件夹权限问题
      • 3.2.4. Cannot find name 'expect','it'
      • 3.2.5. Cannot use override keyword to override methods of Object without explicitly extending Object #45704
      • 3.2.6. npm安装sharp出现的问题
    • 3.3、Typescript相关问题
      • 3.3.1. 语法问题:
      • 3.3.2. @types/ol 与ol的关系
      • 3.3.3. 找不到jest的类型定义文件
      • 3.3.4. TypeScript 的配置文件 tsconfig.json

项目截图如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SCx04FyK-1721837005527)(https://i-blog.csdnimg.cn/direct/b35b5385ab4e4250a84357af5556bfca.png#pic_center)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UjWINUa4-1721837005531)(https://i-blog.csdnimg.cn/direct/1921ce219c2a4a83aa3dc22c63a013cc.png#pic_center)

一、项目地址

本文记录的问题是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

3.1、graphhopper中地图问题

3.1.1. getOpacity不存在的问题

  • 问题:TS2551: Property 'getOpacity' does not exist on type 'MapLibreLayer'. Did you mean 'setOpacity'?
  • 解决:自定义getOpacity函数
typescript 复制代码
    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对象,代码如下
typescript 复制代码
//在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类中添加相关方法
typescript 复制代码
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(源映射文件),但是找不到该文件。
typescript 复制代码
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的问题

  • 问题:
cpp 复制代码
"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  

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

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

3.2.4. Cannot find name 'expect','it'

  • 解决:
bash 复制代码
{
  "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出现的问题

  • 问题:
cpp 复制代码
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
  • 解决办法 :使用镜像地址 或者 科学上网
cpp 复制代码
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可以尝试使用

cpp 复制代码
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的类型定义文件

  • 问题:
typescript 复制代码
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

typescript 复制代码
{
    "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/**/*"
    ],
    
}
相关推荐
百万蹄蹄向前冲1 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5812 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路2 小时前
GeoTools 读取影像元数据
前端
ssshooter3 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry3 小时前
Jetpack Compose 中的状态
前端
dae bal4 小时前
关于RSA和AES加密
前端·vue.js
柳杉4 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog4 小时前
低端设备加载webp ANR
前端·算法
LKAI.5 小时前
传统方式部署(RuoYi-Cloud)微服务
java·linux·前端·后端·微服务·node.js·ruoyi
刺客-Andy5 小时前
React 第七十节 Router中matchRoutes的使用详解及注意事项
前端·javascript·react.js