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