Question

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

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

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

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

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

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

自午餐以来，我一直在反对这一点，但我已经意识到我需要一些帮助。我不能试探太多，但我会牺牲我的长子来解决问题！

Answer 1

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

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

L = {}

然后，当您将模块加载到Require中时，我将传单和 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 app

1 个答案:

工作示例：