Необходимо создать пользовательский элемент управления UI5, для которого нужны другие модули AMD

Question

Мне нужно создать элемент управления UI5 Кустом, где мне нужно загрузить карту ESRI.

sap.ui.define([
"sap/ui/core/Control"
], function (Control) {
"use strict";
return Control.extend("custom.map.ESRIMap", {
    init : function(){
        this._map = new Map('mapDiv',esriMapOptions);
    }
});
});

Вот как я хочу написать свой пользовательский элемент управления.

Где я загрузил ESRI javascript API как

jQuery.sap.includeScript({
                     url : "https://js.arcgis.com/3.18/init.js",
                     id : 'esriApi' 
                 });

Проблема, с которой я сталкиваюсь - загрузка библиотеки ESRI, если я загружаю, как показано ниже,

sap.ui.define([
    "sap/ui/core/Control"
    "esri/map
    ], function (Control,Map) {

Он не будет загружаться, потому что это не модуль ui5

я должен сделать требуют, как показано ниже

require(["esri/map"],function(Map){

Мне нужна помощь, чтобы написать пользовательский элемент управления UI5 или модуль, в котором мне нужно загрузить модуль UI5 и модуль ESRI AMD вместе, прежде чем вернуть первый код.

Answer 1

Вообще говоря, большинство загрузчиков модулей AMD не поддерживают синтаксис плагина AMD Dojo (например, dojo / i18n), используемый ArcGIS API для JavaScript. Поэтому единственный надежный способ загрузить эти модули - это использовать Dojo require() как вы упомянули выше.

При использовании других загрузчиков модулей мы часто используем шаблоны "вложенных требований". В вашем случае это будет выглядеть примерно так:

sap.ui.define([
  "sap/ui/core/Control"
], function (Control) {
    "use strict";
    return Control.extend("custom.map.ESRIMap", {
      init : function() {
        require(["esri/map"],function(Map){
          // now you have access to Control and Map
          this._map = new Map('mapDiv',esriMapOptions);
        });
      }
    });
});

Имейте в виду, что require() является асинхронным и, по всей вероятности, приведет к сетевым запросам для извлечения скриптов модуля. Я ничего не знаю о структуре UI5 и о том, нормально ли делать такие асинхронные запросы в элементе управления init(), Если нет, вам может понадобиться найти другое место для этого.

Этот шаблон более подробно описан в этом сообщении в блоге, в котором приведены ссылки на другие примеры его использования в приложениях React и Angular. Вы также можете использовать esri-loader, который просто предоставляет API, чтобы скрыть использование require() Глобальный.