将 esri-leaflet-renderers 导入 ReactJS+Backbone Cordova 应用程序时出现错误消息

Question

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

我的工作基于 this project on GitHub，但是我对使用 ReactJS 仍然非常缺乏经验。我还与 ESRI 的在线地图一起进一步探索 Leaflet-land。

我目前已经绘制出一条路线并将其发布为 FeatureLayer，甚至成功导入并在应用程序中显示它，但是当然，实际形状的所有样式都消失了。（例如颜色。）这是一个非常关键的部分。我找到了一个名为 Esri-Leaflet-Renderers 的 Esri-Leaflet 插件，但我很难获得它 imported/running。

当我将 Esri-Leaflet-Renderers 的路径添加到 Require 的路径配置并将其包含在页面上时，整个事情都被锁定了，我收到了以下错误消息，我不知道如何调试:

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

这是我的 require.config 设置:

如果你看一下 /www/js/main.js，除了 esri-leaflet 和 esri-leaflet-renderers

，它们应该是相同的

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) 和 esri-leaflet (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; 
});

我似乎无法弄清楚我做错了什么或出了什么问题。我是否正确导入了所有内容？

自从午饭后我就一直在为此苦恼，但我开始意识到我需要一些帮助。我不能试探太多，但我会牺牲我的长子来解决问题！[=16=]

Answer 1

我终于想通了，所以我正在回答我自己的问题，以防其他人出现并想知道类似的事情。

因为我知道 Leaflet 已经定义了一个全局变量 L，在 RequireJS 中加载源文件之前我定义了一个空的 table 变量给 L.

L = {}

然后，当您在 Require 中包含要加载的模块时，我将 leaflet 和 esri-leaflet 添加为 L 并分配 L到 L.

工作示例：

TLDR: Gist Example

代码:

// 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();
                }
            });
        }
    });
});

将 esri-leaflet-renderers 导入 ReactJS+Backbone Cordova 应用程序时出现错误消息

Error message when importing esri-leaflet-renderers to ReactJS+Backbone Cordova app

javascript

leaflet

cordova

reactjs

esri-leaflet

工作示例：