专业网站建设公司兴田德润在哪里,电子商务网站解决方案,最好用的企业网站cms,网站导航做多大文章目录 一、项目地址二、踩坑环境三、问题记录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 Ref… 文章目录 一、项目地址二、踩坑环境三、问题记录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 expectit3.2.5. Cannot use override keyword to override methods of Object without explicitly extending Object #457043.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 注意目前这个项目的导航还有一定的问题路径规划后导航的起点总会变成当前位置重新路径规划不能拿来直接用。
二、踩坑环境
Node Version v20.12.1NPM 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 absolutecontainer.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 inflight1.0.6: This module is not supported, and leaks memory. Do not use it.npm : npm warn deprecated glob7.2.3: Glob versions prior to v9 are no longer supportedWARN 3 deprecated subdependencies found: glob7.2.3, inflight1.0.6, rimraf3.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配置注释掉了。 参考文章2tsconfig.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_HOSThttps://npmmirror.com/mirrors/sharp
set SHARP_LIBVIPS_BINARY_HOSThttps://your-custom-host.com
Unix系统
export SHARP_BINARY_HOSThttps://npmmirror.com/mirrors/sharp
export SHARP_LIBVIPS_BINARY_HOSThttps://your-custom-host.com3.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/olTypeScript 就能够理解 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/**/*],}
