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

文章目录

  • 一、项目地址
  • 二、踩坑环境
  • 三、问题记录
    • 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

项目截图如下:
在这里插入图片描述
在这里插入图片描述

一、项目地址

本文记录的问题是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/**/*"],}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/49671.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习记录:ESP32控制舵机 FREERTOS BLE

控制舵机 PWM信号 PWM信号是一种周期性变化的方波信号,它有两个关键参数: 周期(Period):一个完整的PWM信号的时间长度,通常用秒(s)或毫秒(ms)表示。占空比…

【音视频SDL2入门】创建第一个窗口

文章目录 前言创建窗口的流程需要使用的函数1. 初始化 SDL 库2. 创建 SDL 窗口3. 获取与窗口关联的表面SDL_FillRect 函数介绍4. 更新窗口表面5. 延迟一定时间6. 销毁窗口并退出 SDL 库示例代码总结 前言 SDL2(Simple DirectMedia Layer)是一个跨平台的…

Flask jsonify 格式化 DateTime

前言 搜索发现 提供的 代码都不能实现 以下 是我的环境 Python 3.10.14 Flask 3.0.3 Werkzeug 3.0.3 解析 Flask 的 Json 方法是由 flask.json.provider.DefaultJSONProvider 代理实现 调用 flask.json.provider._default 做具体的格式化 思路: 掩盖原方法 指向 …

C++ STL remove, remove_if 用法

一&#xff1a;功能 移除序列中&#xff08;满足给定条件&#xff09;的元素&#xff0c;该操作并不是真的将元素删除&#xff0c;而是序列的size不变&#xff0c;只是更新了迭代器&#xff0c;该函数会返回最后一个未删除元素的位置。 二&#xff1a;用法 #include <vect…

FFmpeg解复用器如何从封装格式中解析出不同的音视频数据

目录 1、ffmpeg介绍 2、FFMPEG的目录结构 3、FFmpeg的格式封装与分离 3.1、数据结构 3.2、封装和分离(muxer和demuxer) 3.2.1、Demuxer流程 3.2.2、Muxer流程 4、总结 4.1、播放器 4.2、转码器 C++软件异常排查从入门到精通系列教程(专栏文章列表,欢迎订阅,持续…

微服务上(黑马)

文章目录 微服务011 认识微服务1.1 单体架构1.2 微服务1.3 SpringCloud 2 微服务拆分2.1 熟悉黑马商城2.2 服务拆分原则2.2.1.什么时候拆2.2.2.怎么拆 2.3 拆分服务2.3.1 拆分商品管理功能模块2.3.2 拆分购物车功能模块 2.4 远程调用2.4.1 RestTemplate2.4.2.远程调用 2.5 总结…

顺序表算法题

在学习了顺序表专题后&#xff0c;了解的顺序表的结构以及相关概念后就可以来试着完成一些顺序表的算法题了&#xff0c;在本篇中将对三道顺序表相关的算法题进行讲解&#xff0c;希望能对你有所帮助&#xff0c;一起加油吧&#xff01;&#xff01;&#xff01; 1.移除元素 2…

nginx转发netty长链接(nginx负载tcp长链接配置)

首先要清楚一点&#xff0c;netty是长链接是tcp连接不同于http中负载在http中配置server监听。长连接需要开启nginx的stream模块(和http是并列关系) 安装nginx时注意开启stream&#xff0c;编译时加上参数 --with-stream &#xff08;其他参数根据自己所需来加&#xff09; …

如何做code review(嵌入式行业)

1. 什么是Code Review 2. Code Review利弊 2.1. 利 降低错误风险提升编码能力方便负责人把控项目 2.2. 弊 影响工作效率执行不到位&#xff0c;反而导致意义缺失 3. 代码规范 code review的标准体现 4. Code Review流程 5. 问题与规避方案

把本地项目推送到远程仓库

笔记背景&#xff1a;刚刚在本地创建了一个新项目 project&#xff0c;需要推送到git 在git上创建一个名为 project 的远程仓库&#xff0c;创建完成后现在远程仓库是空的本地打开 project 项目&#xff0c;初始化git仓库 git init把当前工作目录中所有变动&#xff08;包括新…

脊髓损伤的小伙伴锻炼贴士

Hey小伙伴们~&#x1f44b; 今天要跟大家聊一个超燃又超温馨的话题&#xff01;&#x1f31f; 对于我们脊髓损伤的小伙伴们来说&#xff0c;保持身体活力&#xff0c;不仅是健康的小秘诀&#xff0c;更是拥抱美好生活的超能量哦&#xff01;&#x1f4aa; #脊髓损伤# 首先&…

Cache 替换策略--PLRU算法详解

一、引言 LRU&#xff08;Least Recently Used&#xff09;是 cache 的经典替换策略之一&#xff0c;但当 Cache 的路数比较大时&#xff08;多路组相连结构&#xff09;&#xff0c;实现 LRU 的硬件开销就会变得很大。现代处理器一般会考虑使用 PLRU&#xff08;pseudo-LRU&a…

一文带你搞懂C++运算符重载

7. C运算符重载 C运算符重载 什么是运算符重载 运算符重载赋予运算能够操作自定义类型。 运算符重载前提条件&#xff1a; 必定存在一个自定义类型 运算符重载实质: 就是函数调用 友元重载 类重载 在同一自定义类型中&#xff0c;一个运算符只能被重载一次 C重载只能重载…

人工智能与机器学习原理精解【5】

文章目录 最优化基础理论特征值&#xff08;Eigenvalue&#xff09;特征向量&#xff08;Eigenvector&#xff09;特征值和特征向量的重要性计算方法特征值一、特征值分解的定义二、特征值分解的算法三、特征值分解的例子 正定矩阵Hessian矩阵的特征值Hessian矩阵的含义Hessian…

记Redis 被攻击,数据被定时清除的问题

问题描述 搞自己项目的时候&#xff0c;在云服务器上部署了redis&#xff0c;没有设密码&#xff0c;结果用了几天发现数据老是丢失&#xff0c;排查了过期时间以及内存大小都没有问题&#xff0c;然后注意到了几个陌生的backup1、buckup2、backup3、backup4数据&#xff1a; …

vue element-ui日期控件传参

前端&#xff1a;Vue element-ui <el-form-item label"过期时间" :rules"[ { required: true, message: 请选择过期时间, trigger: blur }]"><el-date-picker v-model"form.expireTime" type"date" format"yyyy-MM-dd&…

FastGPT部署和接入使用重排模型bce-reranker-base

bce-reranker简介 bce-reranker 是一种专门用于信息检索和自然语言处理领域中的重排序(reranking)模型。这种模型由北京智源人工智能研究院(BAAI)开发,是 BGE(BAAI General Embedding)系列的一部分。BGE 系列模型专注于提供通用的嵌入表示,而 bce-reranker 则更进一步…

【C++】透析类和对象(下)

有不懂的可以翻阅我之前文章&#xff01; 个人主页&#xff1a;CSDN_小八哥向前冲 所属专栏&#xff1a;CSDN_C入门 目录 拷贝构造函数 运算符重载 赋值运算符重载 取地址运算符重载 const成员函数 取地址重载 再探构造函数 初始化列表 类型转换 static成员 友元 内…

MySQL查询执行(二):order by工作原理

假设你要查询城市是“杭州”的所有人名字&#xff0c; 并且按照姓名排序返回前1000个人的姓名、 年龄。 假设这个表的部分定义是这样的&#xff1a; -- 创建表t CREATE TABLE t (id int(11) NOT NULL,city varchar(16) NOT NULL,name varchar(16) NOT NULL,age int(11) NOT N…