Question

我需要创建一个UI5 coustom控件，我需要加载ESRI Map。

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模块加载器不支持ArcGIS API for JavaScript使用的Dojo AMD插件语法（例如：dojo/i18n）。因此，加载这些模块的唯一可靠方法是使用上面提到的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()中发出这样的异步请求。如果没有，您可能需要找到另一个需要的地方。

更详细地描述了这种模式in this blog post，它链接到在React和Angular应用程序中如何使用它的其他示例。您也可以使用esri-loader，它只是提供了一个API来隐藏require()全局的使用。

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

1 个答案: