⚱️ 🏷️ ☝🏾 我们如何在不影响性能的情况下在地图上绘制数千个交互式对象 🆓 🔥 🧜🏼

嗨，我叫Daria，我是Avito中Geo部门的前端开发人员。我想分享一下我如何在网络上进行新的地图搜索，用更方便的解决方案替换集群以及消除显示对象数量的限制的经验。

在本文中，我将告诉您任务是什么以及我们如何处理实现过程中的问题。

为什么旧地图搜索不适合我们

, — . — , . — .

. -, , . -, — . , .

, , , , . , — .

, . , , .

, , , . — . , , . , , , . :

l i m i t = v i e w P o r t . w i d t h \times v i e w P o r t . h e i g h t / (p i n D i a m e t e r^{2} \times 9)

$limit = viewPort.width × viewPort.height / (pinDiameter^2 × 9)$

, , .

, . , . :

( );
( , );
, , ( ).

— . , —

, —

, , —

, , , .

, 1000 . , , . , :

-, API . , ObjectManager, , 1000. , , 3000 , .

, . API - — , Layer.

API , ( png svg ) , X, Y Z. , - . , API , ( ), - .

. . —

, . .

, :

func (*Tile) Deg2num(t *Tile) (x int, y int) {
    x = int(math.Floor((t.Long + 180.0) / 360.0 * (math.Exp2(float64(t.Z)))))
    y = int(math.Floor((1.0 - math.Log(math.Tan(t.Lat*math.Pi/180.0)+1.0/math.Cos(t.Lat*math.Pi/180.0))/math.Pi) / 2.0 * (math.Exp2(float64(t.Z)))))
    return
}

func (*Tile) Num2deg(t *Tile) (lat float64, long float64) {
    n := math.Pi - 2.0*math.Pi*float64(t.Y)/math.Exp2(float64(t.Z))
    lat = 180.0 / math.Pi * math.Atan(0.5*(math.Exp(n)-math.Exp(-n)))
    long = float64(t.X)/math.Exp2(float64(t.Z))*360.0 - 180.0
    return lat, long
}

Go, .

svg , :

, GET- . :

const createTilesUrl = (tileNumber, tileZoom) => {
// params -      ,     GET-
return `/web/1/map/tiles?${params}&z=${tileZoom}&x=${tileNumber[0]}&y=${tileNumber[1]}`;
};
const tilesLayer = new window.ymaps.Layer(createTilesUrl, { tileTransparent: true });
ymap.layers.add(tilesLayer);