用于在 MapBox FeatureLayer 中添加标记的 WebWorker

WebWorker to add markers in MapBox FeatureLayer

本文关键字：加标记 WebWorker 添加 MapBox FeatureLayer 用于      更新时间：2023-09-26

我正在用MapBox地图构建一个应用程序。我向服务器询问一个GeoJson文件，其中包含一个标记列表，已经根据猫鼬模式格式化，如下所示：

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 几乎卡住了，滚动像其他所有滚动一样非常非常慢。有没有办法在网络工作者中执行setGeoJSON？谢谢

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

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

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

相关文章：