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/**/*"
    ],
    
}
相关推荐
loey_ln9 分钟前
webpack配置和打包性能优化
前端·webpack·性能优化
建群新人小猿10 分钟前
会员等级经验问题
android·开发语言·前端·javascript·php
爱上语文11 分钟前
HTML和CSS 表单、表格练习
前端·css·html
djk888822 分钟前
Layui Table 行号
前端·javascript·layui
NightCyberpunk1 小时前
HTML、CSS
前端·css·html
xcLeigh1 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
zhenryx1 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
ZwaterZ1 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
zhangjr05753 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts