javascript - WebWorker 在 MapBox FeatureLayer 中添加标记

Question

我正在构建一个带有 MapBox map 的应用程序。我向服务器请求一个 GeoJson 文件，其中包含标记列表，已根据 Mongoose 模式进行格式化，如下所示:

var poiSchema = new Schema({
  type      :    { type:String, required:true},
  geometry  :    {
                   type        : { type:String},//point
                   coordinates : { type: [Number]} //lng, lat
                 },
  properties:
                 {
                    "marker-color"  : {type:String},
                    "marker-size"   : {type:String},
                    "marker-symbol" : {type:String},
                 }
});

这样我就可以获取结果并将其放在 map 上

  map.featureLayer.setGeoJSON(result_from_server);

无论如何，我有很多标记(大约 1000 个)，需要一段时间...... 5-6 秒:(

加载时，GUI 几乎卡住，滚动像其他所有内容一样非常非常慢。有没有办法在 WebWorker 中执行 setGeoJSON ？谢谢

Answer 1

如果您实际分析了您的应用程序，您会发现导致性能问题的原因。 DOM 操作让你陷入困境。问题不是标记的初始化，而是标记和阴影 img 元素附加到 DOM 树以及浏览器必须执行的结果绘制。

抱歉，您无法在 JavaScript Worker 中执行 DOM 操作。工作线程无权访问窗口对象，因此 Mapbox/Leaflet 无法操作。它甚至不会加载，因为库要做的第一件事就是将自身 L 附加到窗口对象。此外，您无法将 Leaflet 对象从主线程发送到工作线程，因为它只接受可以通过结构化克隆算法克隆的值。这不包括具有方法的复杂对象，例如 Leaflet 对象。

如果您确实想显示大量标记，您可以尝试使用效果更好的纯 SVG，或者您可以考虑对它们进行聚类。