Question

我有一个HTML文件，在网页的要素图层上执行查询任务。

现在我想将文件分成3个不同的文件：html文件，加载webmap的main.js文件，以及执行Query任务和其余文件的Color-Code.js文件。基本上，html文件应该调用main.js，而main.js又应该调用Color_Code.js.I尝试使用require.js ...但每次都得到一个文件Color-Code.js找不到错误。我是dojo和arcGIS的新手，所以有人可以指出我哪里出错了。

Main.js -> require([
            "Color-Extent",
            "dojo/parser",
            "esri/arcgis/utils",
            "esri/map",
            "esri/dijit/Legend",
            "dojo/domReady!"
], function (
            ColorExtent,
            parser,
            arcgisUtils,
            Map,
            Legend
          ) {
    parser.parse();
    return {
        createMap: function () {
            arcgisUtils.createMap("ce88f9dba8d748a4bf3aa8d6c8027d2e ", "map").then(function (response) {
                var map = response.map;

                var legend = new Legend({
                    map: map,
                    layerInfos: (arcgisUtils.getLegendLayers(response))
                }, "legendDiv");
                legend.startup();
            });
            return map;
            ColorExtent.colorCurrentExtent();
        }
    }           
        });


Color-Code.js -> 

define([        "Main",
                "dojo/parser",
                "esri/arcgis/utils",
                "esri/map",
                "esri/dijit/Legend",
                "esri/tasks/QueryTask",
                "esri/tasks/query",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/Color",
                "dojo/_base/json",
                "dojo/text!./jdata.txt",
                "esri/geometry/Extent",
                "dojo/_base/array",
                "esri/layers/GraphicsLayer",
                "esri/graphic",
                "dojo/domReady!"
    ], function (
                main,
                parser,
                arcgisUtils,
                Map,
                Legend,
                QueryTask,
                Query,
                SimpleMarkerSymbol,
                SimpleLineSymbol,
                Color,
                json,
                JData,
                Extent,
                array,
                GraphicsLayer,
                Graphic
            ) {
            function colorCurrentExtent() {
                parser.parse();
                map.on("load", function () {
                    var map = main.createMap();
                    var queryTask = new QueryTask(featureLayer.url);
                    var query = new Query();
                    query.outFields = ["OBJECTID"];
                    query.returnGeometry = true;
                    query.where = "1=1";
                    queryTask.execute(query, showResults);
                })

                function showResults(featureSet) {
                    var symbol = new SimpleMarkerSymbol();
                    symbol.setSize(20);
                    var resultFeatures = featureSet.features;
                    var storeobj = dojo.fromJson(JData);

                    map.on("extent-change", function () {
                        var extent = map.extent;
                        graphiclayer.clear();
                        //var extent = map.geographicExtent;                         
                        array.forEach(resultFeatures, function (feature) {
                            if (extent.contains(feature.geometry)) {
                                for (var i = 0; i < 30; i++) {
                                    if (feature.attributes.OBJECTID === storeobj[0].data[i].assetID) {
                                        switch (storeobj[0].data[i].colorCode) {
                                            case 1:
                                                symbol.setColor(new Color([0, 255, 0, 0.75]));
                                                break;
                                            case 2:
                                                symbol.setColor(new Color([255, 165, 0, 0.75]));
                                                break;
                                            case 3:
                                                symbol.setColor(new Color([255, 255, 0, 0.75]));
                                                break;
                                            case 4:
                                                symbol.setColor(new Color([255, 0, 0, 0.75]));
                                                break;
                                            default:
                                                symbol.setColor(new Color([128, 128, 128, 0.75]));
                                                break;
                                        } // end switch
                                        graphiclayer.add(new Graphic(feature.geometry, symbol));
                                        break;
                                    } //end if
                                } // end for

                            } //end if
                        }) // end forEach
                    }) // end extent-change
                } // end showResults
                map.addLayer(graphiclayer);
            } //colorCurrentExtent
    });  and

我在html页面中引用它们

<script src="https://js.arcgis.com/3.16/"></script>
    <script data-main="Main" src="require.js"></script>

Answer 1

结果应该这样做：https://www.google.de/search?q=require+js+basic+tutorial&ie=utf-8&oe=utf-8&gws_rd=cr,ssl&ei=GSc3V_OzEYvxUsDDlcgE#q=require+js+multiple+files

第一和第二个。也许找一个基本的requireJS教程来解释requireJS-module-definitions。

首先是单独的文件。然后在每个文件中调用

require(["modules", "needed", "for", "THIS", "file"], function(a,b,c,d,e) {
   /*code goes here*/
   return Module;  
});

希望它有所帮助。

我认为好的教程：http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/

Answer 2

我认为您需要完成一些配置。默认情况下，如果您需要模块“Main”，则loader会将baseUrl附加到它并尝试加载它。我建议this tutorial以获得更多不受欢迎的内容。

Answer 3

require.js的链接是什么？

要求JS已经是ESRI API的一部分。你不需要明确地包含它。如果要将链接添加到自定义模块，请确保在esri api之后添加它们。这种方式要求不会给出错误。

同样在函数colorCurrentExtent（）中，您正在设置map load事件，并且您正在创建map实例。我认为这不起作用，因为初始化事件时不会创建地图。在活动之外移动下面一行。

 var map = main.createMap();

如何调用colorCurrentExtent函数？

Answer 4

我认为你错过了几件事。

Esri JS API带有Dojo的模块加载器，可与AMD模块配合使用，因此您无需加载requirejs。
您好像缺少dojoConfig变量或者没有发布它，这告诉AMD加载器在哪里可以找到您的本地模块。我建议您阅读ArcGIS的本教程。 https://developers.arcgis.com/javascript/latest/sample-code/get-started-mapview/index.html。如果您不确定模块是如何工作的，那么阅读requirejs / dojo AMD教程仍然可能会很好。
看起来Main.js依赖于依赖于Main.js的Color-Code.js，这种循环依赖会导致问题。

我正在尝试在下面添加一个基本示例，但我肯定会建议您查看Esri教程以帮助您入门。

的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
  </head>
  <body>
    <script>
      var base = location.href.replace(/\/[^/]+$/, '');
      var dojoConfig = {
        parseOnLoad: false,
        async: true,
        packages: [
          { name: 'js', location: base + '/js' }
        ],
      deps: ['js/Main', 'dojo/domReady!'],
      callback: function (Main) { Main.createMap(); }
  };
    </script>
    <script src='//js.arcgis.com/4.0/init.js'></script>
  </body>
</html>

道场/ domready中！在dom准备就绪，惊喜和Main.js加载时触发，然后我们通过调用Main.createMap启动我们的应用程序。您可以在js变量的packages属性下配置此dojoConfig文件夹的路径。在加载js api之前，需要存在并配置它。

Main.js

define([
  "js/Color-Code",
  "dojo/parser",
  ... // remaining dependencies
], function (ColorCode, parser) {
  parser.parse();

  return {
    createMap: function () { ... }
  };
});

颜色Code.js

define([
  // Dependencies of the Color-Code.js Module only go here, e,g, you don't need the parser again
  "esri/Map",
  "esri/views/MapView"
], function (Map, MapView) {

// Return the interface to the Color-Code file, either an object, function, class, etc.
  return {
    colorCurrentExtent: function () { ... }
  };

});

注意：此示例使用的是4.0 API中的模块和文件，而不是3.16，但设置部分是相同的。我仍然建议使用@dazlious链接教程，以确保您对模块的工作原理以及要遵循的一些好的设计模式有很好的理解。

如何定义模块并使用它来分隔js文件

4 个答案: