0

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

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

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

当我将 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; 
});

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

自午餐以来，我一直在对此表示反对，但我开始意识到我需要一些帮助。我不能诱惑太多，但我会牺牲我的长子来解决问题！

4

1 回答 1

0

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

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

L = {}

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

 

工作示例：

TLDR：要点示例

代码：

// 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();
                }
            });
        }
    });
});
于 2016-11-18T10:20:16.093 回答