Question

我正在使用MapBox地图构建应用程序。我向服务器询问一个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.featureLayer.setGeoJSON(result_from_server);

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

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

Answer 1

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

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

如果你真的想展示大量的标记，你可以尝试使用纯粹的SVG，它可以更好地预制，或者你可以看一下它们的聚类。

WebWorker在MapBox FeatureLayer中添加标记

1 个答案: