动态加载 ArcGIS 在线模块

Question

是否可以动态决定需要哪些模型()？

使用 JavaScript require() 函数加载一堆小部件需要一些时间，所以我希望能够只包含我在任何给定实例中使用的那些我在用。

目前，我这样做：

var reqs="esri/Map", "esri/WebMap", ... "esri/widgets/Legend";
require(reqs, function(Map, WebMap, ... ,Legend,) { 
...

填充 reqs 数组很容易，但我怎样才能改变函数中的名称？

Answer 1

想出了解决办法。不像人们想要的那样优雅（即必须直接指定 class 名称），但它有效。

var reqs="esri/Map", "esri/WebMap", ... "esri/widgets/Legend";  

require(app.reqs, function() 
    var Map, WebMap, MapView, SceneView, KMLLayer.  ...  Legend;
    for (i=0;i<app.reqs.length;++i) {
        key=app.reqs[i].match(/([^\/]+)$/i)[1];
        if (key == "Map")                   Map=arguments[i];
        else if (key == "WebMap")           WebMap=arguments[i];

        ...

        else if (key == "Legend")           Legend=arguments[i];
        }

Answer 2

不确定在哪种情况下您希望在运行时动态更改导入，因为使用它们的代码很可能是静态的。您是说更改导入列表吗？

您可以随时更改此设置

require(
  ["esri/Map", "esri/WebMap", "esri/widgets/Legend"],
  function(Map, WebMap, Legend) {

   // Source code using Map, WebMap and Legend

  });

到您需要的依赖项列表：

require(
  ["esri/Map", "esri/SceneView", "esri/layers/KMLLayer"],
  function(Map, WebMap, KMLLayer) {

   // Source code using Map, SceneView and KMLLayer

  });

看到 ArcGIS API for JavaScript samples 都有不同的 require() 陈述。

如果您的意思是延迟加载以减少初始启动时间，则有一个使用 Webpack 和 TypeScript 的很好的模块化示例：

https://github.com/Esri/jsapi-resources/tree/master/4.x/webpack/demo

它 imports/requires 所有 ArcGIS API for JavaScript 类在主要 UI 加载完成后。这基本上是通过在方法中调用 import / require 来完成的：

https://github.com/Esri/jsapi-resources/blob/master/4.x/webpack/demo/src/widgets/App.tsx#L53

动态加载 ArcGIS 在线模块

Dynamically load ArcGIS online modeule

javascript

arcgis

arcgis-js-api