как получить размер маркеров в системе координат листовки - PullRequest
Новая
       42

как получить размер маркеров в системе координат листовки

0 голосов
/ 07 октября 2019

Я использую буклет для отображения текстовой информации о некоторых точных координатах.

Спойлер:

Я хорошо знаю, что не стоит беспокоиться об использовании буклета для отображения какой-либо строки наhtml / CSS-страница ... Но вы знаете ... чего хочет клиент ...

Что работает до сих пор:

Пока все хорошо, я получаю ярлыки (libelleпо-французски) и их координаты в формате JSON, и превратить их в маркеры с помощью divIcon. В итоге я получаю что-то вроде этого (обобщенно): 

const divIcon = L.divIcon({html: '<div style="white-space: nowrap;font-size:9px">' + myLabel + '</div>', iconSize: null})
myMarker.setIcon(divIcon);
myMarker.addTo(this.map);

Что прекрасно работает.

Так в чем же дело?

Проблема в том, что я получаю не только 1, но несколько ярлыков на одном и том же абсциссе.

Итак, мне нужно создать несколько divIcons и соответствующие маркеры. На самом деле, я объединяю метки, так как позже мне придется добавлять пользовательские CSS к каждому из них.

Конечно, я не хочу, чтобы метки перекрывались (поэтому ни маркеры, ни divIcons).

IЗатем я ищу способ узнать, где разместить следующий маркер, зная начальные координаты предыдущего.

Но как я могу это сделать, поскольку я не знаю размер, взятыймаркер с divIcon в системе координат листовки?

Мой обходной путь:

Пока что я использую количество символов предыдущей метки. Который почти работает, но имеет тенденцию размещать следующий маркер очень далеко от предыдущего. Это расстояние будет увеличиваться, как только символ в системе координат листовки не станет равным 1.

То, что я пробовал:

  • Я пытался измеритьдлина в пикселях предыдущих меток. Который работает нормально .... если бы я манипулировал фактическим <div> на моей фактической странице html / css ... но я не.

  • Я также пытался искатьдля метода getSize() в листовке напрасно, перепробовал много сообщений stackoverflow.

Каждый пытается изменить размер маркеров в зависимости от уровней масштабирования, но это не то, что япытаясь здесь.

  • Я не нашел ничего полезного в документации, ни ... кроме того, что я мог попытаться расширить класс L.Markers. Но я, конечно, слишком молодой разработчик, чтобы делать это.

Надеюсь Я сделал стек стека , чтобы помочь вам понять, что я пытаюсь сделать.

По сути, я получаю это в формате JSON: 

{"textes":[ 
            { 
               "coord":{ 
                  "x":9,
                  "y":3
               },
               "zt":[ 
                  { 
                     "libelle":"Switch A1"
                  },
                  {
                    "libelle":"This could be a very long text"
                  },
                  {
                    "libelle":"or short"
                  }
               ]
            },
            {
               "coord":{ 
                  "x":9,
                  "y":6
               },
               "zt":[ 
                  { 
                     "libelle":"Brassage",
                  },
                  { 
                     "libelle":" (1.0 m)"
                  }
               ]
            },
            {
               "coord":{ 
                  "x":9,
                  "y":9
               },
               "zt":[ 
                  { 
                     "libelle":"Site: ",
                  },
                  { 
                     "libelle":"Building B"
                  },
                  {
                    "libelle":"floor 4"
                  }
               ]
            }
         ]}

Так, например, любая удачная попытка разместить ярлык "This could be a very long text" рядом с "Switch A1" сделает меня счастливым.

Если это не было кристально чистым:

До сих пор метки, которые должны находиться на одной и той же «линии» (= одинаковая y координата), находятся далеко друг от друга.

Этобыло бы неплохо отобразить их как обычный объединенный текст.

См. Stackblitz и мой входной JSON, чтобы увидеть, в чем заключается моя проблема.

О ... и спасибо всем за помощь!

...