将esri-传单渲染器导入ReactJS+Backbone Cordova应用程序时出错

Question

我一直在构建一个Cordova应用程序，作为展示我的一个想法的概念的证明，到目前为止，它一直很棒，我从这个经历中学到了很多。

我的工作是以在GitHub上的这个项目为基础的，但是我仍然缺乏使用ReactJS的经验。我也在进一步探索传单和ESRI的在线地图。

目前，我已经找到了一条作为FeatureLayer发布的路线，甚至成功地在应用程序中导入和显示了它，但是当然，所有的造型都已经消失了。(例如，颜色)这是一个非常关键的部分。我找到了一个名为埃斯里-传单-渲染者的埃斯里传单插件，但我在导入/运行它时遇到了巨大的困难。

当我将路径添加到Esri-传单-Renderers以要求其路径配置并将其包含在页面中时，整个程序将被锁定，并收到以下错误消息，我不知道如何调试：

Uncaught TypeError: Cannot read property 'FeatureLayer' of undefined(…)

，这是我的require.config设置的方式

如果您看一下/www/js/main.js，它们应该是相同的，除了esri-传单和esri-传单渲染器之外。

require.config({
paths: {
    ...
    leaflet: '../lib/leaflet/leaflet-src',
    'esri-leaflet': '../lib/leaflet/esri-leaflet',
    'esri-leaflet-renderers': '../lib/leaflet/esri-leaflet-renderers'
},
shim: {
    ...
    'leaflet': {
        exports: 'L'
    }
}
});

我正在使用最新版本的传单(1.0.1)和埃斯里-传单(2.0.4)。

Maps.js文件，其中地图及其所有诡计都在发生

define(function (require) {
// Required libs
var Backbone = require("backbone");
var Utils = require("utils");

// Leaflet + ESRI = ❤
var L = {};
L = require("leaflet");
L.esri = require("esri-leaflet");
var renderers = require("esri-leaflet-renderers");

// Extend page function to add new page
var Maps = Utils.Page.extend({
    constructorName: "Maps",

    initialize: function () {
        this.listenTo(this, "inTheDOM", function () {
            var map, ll = new L.LatLng(65.838639, 13.188832), marker, popup, track;
            map = L.map('map', {center: ll, zoom: 14});
            L.esri.basemapLayer("Topographic").addTo(map);
            track = L.esri.featureLayer({
                url: 'http://services.arcgis.com/KDnc9fQhk48mvI9Z/arcgis/rest/services/Snøscooter_Løyper_i_Vefsn_Kommune/FeatureServer/0'
            }).addTo(map);
        });
    },

    id: "map",

    render: function () {
        return this;
    }
});
return Maps; 
});

我似乎找不出我做错了什么或出了什么错。我是否正确地导入了所有东西？

午饭后我一直对此大发雷霆，但我意识到我需要一些帮助。我不能用太多的诱惑，但我会牺牲我的长子为解决办法！

Answer 1

我终于想出了答案，所以我会回答我自己的问题，以防其他人出现，并对类似的事情感到好奇。

由于我知道传单已经定义了一个全局变量 L ，所以在加载RequireJS中的源文件之前，我定义了一个空表变量到L。

L = {}

然后，在需要加载模块的同时，我将传单和esri-传单添加为L，并将L赋值给L。

工作实例：

TLDR: Gist示例

码

// Leaflet + ESRI-Leaflet fix.
L = {}

// here we put the paths to all the libraries and framework we will use
require.config({
    paths: {
        jquery: '../lib/zepto/zepto',
        underscore: '../lib/underscore/underscore',
        backbone: "../lib/backbone/backbone",
        text: '../lib/require/text',
        async: '../lib/require/async',
        handlebars: '../lib/handlebars/handlebars',
        templates: '../templates',
        preloader: '../lib/preloader/pre-loader',
        utils: '../lib/utils/utils',
        leaflet: '../lib/leaflet/leaflet-src',
        'esri-leaflet': '../lib/leaflet/esri-leaflet',
        'esri-fullscreen': '../lib/leaflet/Leaflet.fullscreen.min',
        'esri-renderers': '../lib/leaflet/esri-leaflet-renderers',
    },
    shim: {
        'jquery': {
            exports: '$'
        }
        , 'underscore': {
            exports: '_'
        }
        , 'handlebars': {
            exports: 'Handlebars'
        }
        , 'leaflet': {
            exports: 'L'
        }
    }
});

// Launch the App
require(['backbone', 'utils'], function (Backbone, Utils) {
    // Include Leaflet and Leaflet-esri on launch as L and assign it to the global variable.
    require(['preloader', 'router', 'leaflet', 'esri-leaflet'], function (PreLoader, AppRouter, L) {
        L = L; // Globalize on load

        document.addEventListener("deviceready", run, false);

        function run() {
            // Precompile all templates for faster view switching
            Utils.loadTemplates().once("templatesLoaded", function () {
                var images = [
                  // Add images for preloading here. One image per line in an absolute path, e.g.:
                  // '/android_asset/www/img/myimage.png',
                ];
                if (images.length) {
                    new PreLoader(images, {
                        onComplete: startRouter
                    });
                }
                else {
                    // start the router directly if there are no images to be preloaded
                    startRouter();
                }

                function startRouter() {
                    // launch the router
                    var router = new AppRouter();
                    Backbone.history.start();
                }
            });
        }
    });
});