如何使用 [email protected] 实现 mapbox-gl-geocoder 插件

Question

mapbox-gl-geocoder 不再维护了吗？我在这里看到的活动很少：https://github.com/mapbox/mapbox-gl-geocoder。有没有我还没找到的更新的替代品？

我正在将我的项目迁移到mapbox-gl 3.5.1，但遇到了阻碍。

"dependencies": {
    "@mapbox/mapbox-gl-geocoder": "^5.0.2",
    "mapbox-gl": "^3.5.1",
    ...
}, 
"devDependencies": {
    "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",  // I've tried building my project with this typing included as well as excluded
    ...
}

当包含 @types/mapbox__mapbox-gl-geocoder 时，我收到很多错误。这里有 2 个例子：

示例1： 错误：node_modules/mapbox-gl/dist/mapbox-gl.d.ts:8293:2 - 错误 TS2416：类型“ImageSource”中的属性“tileID”无法分配给基本类型“ISource”中的同一属性。 类型 'CanonicalTileID |空 |未定义' 不可分配给类型'CanonicalTileID |不明确的'。 类型“null”不可分配给类型“CanonicalTileID |”未定义'。

8293tileID：CanonicalTileID |空 |未定义；

示例2： 错误：node_modules/@types/mapbox__mapbox-gl-geocoder/index.d.ts:270:40 - 错误 TS2694：命名空间 '"C:/Users/.../app/node_modules/mapbox-gl/dist/mapbox- gl"' 没有导出成员 'FlyToOptions'。

270 setFlyTo（flyTo：布尔值|mapboxgl.FlyToOptions |mapboxgl.FitBoundsOptions）：这个;

当排除 @types/mapbox__mapbox-gl-geocoder 时，我收到许多不同的错误。以下是示例：

示例1： 找不到模块“@mapbox/mapbox-gl-geocoder”的声明文件。 'c:/Users/.../app/node_modules/@mapbox/mapbox-gl-geocoder/lib/index.js' 隐式具有 'any' 类型。 尝试

npm i --save-dev @types/mapbox__mapbox-gl-geocoder

（如果存在）或添加包含

declare module '@mapbox/mapbox-gl-geocoder';

ts(7016)

的新声明 (.d.ts) 文件

示例2： 错误：src/app/services/map/layers/conditions.service.ts:238:133 - 错误 TS2503：找不到命名空间“GeoJSON”。

238 private _getClosestFeature(point: LngLat, features: (GeoJSON.Feature & { 几何: { 坐标: [ number, number ][] } })[]): GeoJSON.Feature & { 几何: { 坐标: [ number, number ][] } } {

Answer 1

我正在使用 Angular vs17，我遇到了同样的错误，我用接下来的步骤解决了：

1. 验证已安装@mapbox/mapbox-gl-geocoder
2. 为 Mapbox 模块创建类型

• 在您的项目中创建类型声明文件： 在 src 目录或 a 目录中创建一个名为

  mapbox-gl-geocoder.d.ts

  的文件 特定文件夹，例如 src/types。

• Agrega el siguiente código al archivo

  mapbox-gl-geocoder.d.ts

  :

   declare module '@mapbox/mapbox-gl-geocoder' {
   import { IControl, LngLatLike, Map } from 'mapbox-gl';
  
   interface GeocoderOptions {
      accessToken: string;
      mapboxgl?: any;
      placeholder?: string;
      zoom?: number;
      bbox?: [number, number, number, number];
      types?: string;
      minLength?: number;
      limit?: number;
      [key: string]: any;
  }
  
  export default class MapboxGeocoder implements IControl {
  constructor(options: GeocoderOptions);
  
  addTo(map: Map): this;
  onAdd(map: Map): HTMLElement;
  onRemove(map: Map): void;
  setPlaceholder(placeholder: string): void;
  setFlyTo(enable: boolean): void;
  setZoom(zoom: number): void;
  setProximity(proximity: LngLatLike): void;
  setRenderFunction(fn: (feature: any) => string): void;
  getProximity(): LngLatLike | undefined;
  getZoom(): number | undefined;
  query(params: any): void;
  
  // Agregar el método `on` y otros métodos para los eventos
  on(type: string, listener: (event: any) => void): this;
  off(type: string, listener: (event: any) => void): this;
  getResult(): any;
  clear(): this;
  }
  }
  

3. 检查 TypeScript 配置 确保您的 tsconfig.json 文件配置正确以包含 自定义类型声明文件：

   { “编译器选项”：{ "typeRoots": ["node_modules/@types", "src/types"], // 包含创建时的个性化提示目录 “类型”：[“mapbox-gl”] } }

4. 将 @mapbox/mapbox-gl-geocoder 导入到您的组件中 确保执行上述步骤后按如下方式导入模块：

   从“@mapbox/mapbox-gl-geocoder”导入 MapboxGeocoder；