ค้นหาเว็บไซต์

aurelia - Typescript; mapboxgl ไม่ได้ถูกกำหนดเมื่อใช้ร่วมกับ mapbox gl directions


ฉันกำลังใช้งาน Aurelia/Typescript + Mapbox ในโปรเจกต์ของฉัน แต่ฉันประสบปัญหาในการใช้ mapbox-gl และ mapbox-gl-directions ร่วมกับ typescript

สำหรับ mapbox-gl ฉันกำลังใช้ไฟล์คำจำกัดความ TypeScript นี้ ฉันสามารถเริ่มต้นแผนที่และเพิ่มมาร์กเกอร์/เลเยอร์ลงไปได้ เป็นต้น

ก่อนอื่น สิ่งที่ฉันพยายามทำคือเพิ่มตัวชี้ (จุดเริ่มต้นและจุดหมายปลายทาง ซึ่งสามารถทำงานได้) และเพิ่มเส้นระหว่างพวกมันด้วยเส้นทางที่สมเหตุสมผล สำหรับเส้นระหว่างตัวชี้ ฉันพยายามใช้ mapbox-gl-directions น่าเสียดายที่ mapbox-gl-directions ไม่ได้ถูกรวมอยู่ในไฟล์คำจำกัดความนี้ ดังนั้นฉันจึงพยายามสร้างไฟล์ขึ้นมาเอง

ฉันได้สร้างไฟล์คำนิยาม TypeScript ดังต่อไปนี้แล้ว เป็นที่ชัดเจนว่ายังมีหลายสิ่งที่ยังขาดหายไป แต่สิ่งนี้ควรช่วยให้ฉันเริ่มต้นได้

declare namespace mapboxgl {
    export class Directions extends Control {
        constructor(options?: DirectionOptions);
    }

    export interface DirectionOptions {
        unit?: string; 
        profile?: string;
        container?: string;
        proximity?: Array<number>;
    }
}

declare module 'mapbox-gl-directions' {
    export = mapboxgl;
}

ฉันได้สร้างคอมโพเนนต์แบบกำหนดเอง Map สำหรับแผนที่ mapbox-gl นี่คือการนำเข้าของฉันในไฟล์ .ts ของพวกเขา พวกมันทำงานได้ดีและฉันได้รับไฟล์ .js ทั้งสองในโฟลเดอร์ dist ของฉันเมื่อฉันรันโปรเจกต์

import * as mapboxgl from 'mapbox-gl';
import * as mapboxgldirections from 'mapbox-gl-directions';

ปัญหาเริ่มขึ้นเมื่อฉันพยายามใช้คำสั่งในการทำงานของฟังก์ชัน initializeMap ของฉัน

initializeMap = () : void => {
       this.map = new mapboxgl.Map({
            container: this.options.mapElement,
            style: this.options.style,
            center: [this.options.startLongitude, this.options.startLatitude],
            zoom: this.options.startingZoom
       });  
       // It gives an error on the following line
       this.map.addControl(new mapboxgldirections.Directions());
   }

ฉันได้รับข้อผิดพลาดดังต่อไปนี้:

 mapbox-gl-directions.js:4 Uncaught ReferenceError: mapboxgl is not defined

ดูเหมือนว่า mapbox-gl-directions มีการพึ่งพา mapbox-gl และควรใช้งานหลังจากที่รวม mapbox-gl ซึ่งเป็นสิ่งที่สมเหตุสมผล แต่ก็ยังสามารถสร้างแผนที่ได้โดยไม่มีปัญหา ดังนั้นทำไม mapbox ถึงไม่ถูกกำหนด แม้ว่าฉันจะใช้ mapbox.Map ได้โดยไม่มีปัญหาใดๆ?

นี่เป็นข้อมูลมากมาย แต่คำถามคือ ฉันจะมั่นใจได้อย่างไรว่่า mapbox-gl พร้อมใช้งานเมื่อฉันพยายามใช้ mapbox-gl-directions?

โปรดทราบว่าฉันติดตั้งโมดูลทั้งสองด้วย NPM

 npm install mapbox-gl --save
 npm install mapbpx-gl-directions --save