我一直在构建一个 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;
});
我似乎无法弄清楚我做错了什么或出了什么问题。我是否正确导入了所有内容?
自午餐以来,我一直在对此表示反对,但我开始意识到我需要一些帮助。我不能诱惑太多,但我会牺牲我的长子来解决问题!