Как использовать библиотеки JavaScript на QML

Question

Я использую некоторые библиотеки 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

Answer 1

Самый простой способ сделать это - сделать 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.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 будет работать нормально.

Answer 2

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

Из doc :

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