Блог

Я использую некоторые библиотеки javascript с QML в версии 5.12.2. Некоторые из них работают как Proj4JS. Но я получаю ошибки при использовании geographiclib.js библиотека с QML. Как можно импортировать библиотеку JavaScript в QML?

main.qml:

 import QtQuick 2.12
import QtQuick.Window 2.12
import "geographiclib.js" as MyGeo
Window {
    visible: true
    width: 640
    height: 480
    Component.onCompleted: {
        var Geodesic = MyGeo.GeographicLib.Geodesic,
            DMS = MyGeo.GeographicLib.DMS,
            geod = Geodesic.WGS84;
        var r = geod.Inverse(23, 22, 44, 29);
        console.log("distance is: ", r.s12.toFixed(3)   " m")
    }
}
  

Ошибка:

 qrc:/geographiclib.js:3081: ReferenceError: window is not defined
qrc:/main.qml:9: TypeError: Cannot read property 'Geodesic' of undefined
  

Самый простой способ сделать это — сделать GeographicLib доступным по всему миру:

В конце geographiclib.js файл, изменение

 window.GeographicLib = geo;
  

Для

 this.GeographicLib = geo;
  

и тогда вы можете просто использовать:

main.qml:

 import QtQuick 2.12
import QtQuick.Window 2.12
import "geographiclib.js" as ThenItWillBeAvailableGlobally
Window {
    visible: true
    width: 640
    height: 480
    Component.onCompleted: {
        var Geodesic = GeographicLib.Geodesic,
            DMS = GeographicLib.DMS,
            geod = Geodesic.WGS84;
        var r = geod.Inverse(23, 22, 44, 29);
        console.log("distance is: ", JSON.stringify(r))
    }
}
  

В результате:

 qml: distance is:  {"lat1":23,"lat2":44,"lon1":22,"lon2":29,"a12":21.754466225665134,"s12":2416081.7576307985,"azi1":13.736139413215236,"azi2":17.669059640534535}
  

Это вы не хотите менятьgeographiclib.js файл вообще, вы могли бы добавить глобальный объект window, используя, например:

window.js:

 this.window = this;
  

а затем использовать:

 import QtQuick 2.12
import QtQuick.Window 2.12
import "window.js" as ThenWindowWillBeAvailableGlobally
import "geographiclib.js" as ThenGeographicLibWillBeAvailableGlobally
Window {
    visible: true
    width: 640
    height: 480
    Component.onCompleted: {
        var Geodesic = GeographicLib.Geodesic,
            DMS = GeographicLib.DMS,
            geod = Geodesic.WGS84;
        var r = geod.Inverse(23, 22, 44, 29);
        console.log("distance is: ", JSON.stringify(r))
    }
}
  

Если вы не хотите добавлять какие-либо глобальные переменные, но вы рады отредактироватьgeographiclib.js файл, тогда вы могли бы просто переместить строку 68 в начало файла:

 var GeographicLib = {};
/*
 * Geodesic routines from GeographicLib translated to JavaScript.  See
 * https://geographiclib.sourceforge.io/html/js/
  

и в конце файла измените

   } else {
    /******** otherwise just pollute our global namespace ********/
    window.GeographicLib = geo;
  }
});
  

Для

   } else if (typeof window === 'object') {
    /******** otherwise just pollute our global namespace ********/
    window.GeographicLib = geo;
  }
});
  

и тогда ваш main.qml будет работать просто отлично.

Вы импортируете файл javascript правильно.

Из документа:

QML предоставляет среду хоста JavaScript, адаптированную для написания приложений QML. Эта среда отличается от среды хоста, предоставляемой браузером или серверной средой JavaScript, такой как Node.js . Например, QML не предоставляет объект window или DOM API, которые обычно встречаются в среде браузера.