我有:
- Django 应用
- 使用 JavaScript
- 使用 OpenLayers 库
- 使用 Parcel 进行打包
- (用于包管理的 pipenv 和 yarn)
- (用于开发的 PyCharm)
基本上一切正常,但我遇到了 OpenLayers 的问题,调试似乎很复杂。我试图重新创建 cluster example form the OpenLayers page .我的 JavaScript 代码基本上是示例的副本。集群未加载。这是代码:
import 'ol/ol.css';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
import {Cluster, OSM, Vector} from 'ol/source.js';
import {Circle, Fill, Stroke, Style} from 'ol/style.js';
let distance = 50;
let count = 20000;
let features = new Array(count);
let e = 4500000;
for (let i = 0; i < count; ++i) {
let coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
features[i] = new Feature(new Point(coordinates));
}
let source = new Vector({
features: features
});
let clusterSource = new Cluster({
distance: distance,
source: source
});
let styleCache = {};
let clusters = new Vector({
source: clusterSource,
style: function (feature) {
let size = feature.get('features').length;
let style = styleCache[size];
if (!style) {
style = new Style({
image: new Circle({
radius: 10,
stroke: new Stroke({
color: '#fff'
}),
fill: new Fill({
color: '#3399CC'
})
}),
text: new Text({
text: size.toString(),
fill: new Fill({
color: '#fff'
})
})
});
styleCache[size] = style;
}
return style;
}
});
let raster = new TileLayer({
source: new OSM()
});
let map = new Map({
target: 'map_canvas',
layers: [
raster,
clusters
],
view: new View({
center: [0, 0],
zoom: 2
})
});
所以集群层没有加载,但我得到了这个错误。
这是我的问题
如果那是堆栈跟踪,为什么没有我自己的代码调用函数?
我想我的代码隐藏在 self-hosted:1009
中,但我无法打开该代码。如果我点击它,我会看到 view-source:http://self-hosted/
显示“找不到页面”。那么这个自托管匿名代码是什么,我在哪里可以找到它?
另外,为什么它会尝试从 http://localhost:37575/
获取文件?我的测试服务器在端口 8000 上运行。我没有创建第二个服务器,也没有在该端口上启动请求。我想一定有一个请求隐藏在 OpenLayers 库中的某处,但我不知道我在哪里调用它。
另外,为什么我不能只在 JavaScript 终端中请求一些值?当我输入变量名时出现此错误:
>> clusters
ReferenceError: clusters is not defined
所以我猜 parcel 使调试变得更加复杂,但 OpenLayers 需要一个 bundler ,所以我碰壁了。
最佳答案
您可能无法在堆栈跟踪中看到您的代码,因为该堆栈跟踪是从匿名函数调用开始的。这些匿名函数调用通常是来自计时器/事件的回调函数。但是,通常单击这样的行会在开发工具中打开脚本;在您的浏览器中导航很奇怪...也许源映射有问题?
Parcel 可能将您的代码包装在 IIFE 中以避免污染全局命名空间。为了调试目的,我用来访问诸如 clusters
之类的变量的技巧是:
window.debugClusters = clusters
现在您可以从开发控制台以 debugClusters
访问 clusters
。
意外的端口 37575 可能是 Parcel's HMR server . HMR 是一项开发功能,可在检测到文件更改时自动为您重新加载 HTML/CSS/JS 模块。 HMR 端口可以配置/禁用。
关于javascript - 如何正确调试捆绑的(parceljs)JavaScript 文件(使用 OpenLayers)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56295121/