需要创建一个需要一些其他 AMD 模块的 UI5 自定义控件

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 as

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 自定义控件或模块，我必须在第一个代码 return 之前将 UI5 模块和 ESRI AMD 模块一起加载。

Answer 1

一般来说，大多数 AMD 模块加载器不支持 ArcGIS API for JavaScript 使用的 Dojo AMD 插件语法（例如：dojo/i18n）。因此，加载这些模块的唯一可靠方法是使用上面提到的 Dojo 的 require()。

在使用其他模块加载器时，我们经常使用 "nested 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() 中发出此类异步请求。如果没有，您可能需要为 require 寻找另一个地方。

这个模式也有更详细的描述 in this blog post which links out to other examples of how it is used in React and Angular applications. You may be able to use the esri-loader，它只是提供了一个 API 来隐藏 require() 全局的使用。

需要创建一个需要一些其他 AMD 模块的 UI5 自定义控件

Need to create a UI5 custom control which need some other AMD modules

javascript

custom-controls

sapui5

arcgis-js-api