Блог

Главная - Вопросы по программированию - Цвет полилинии в Aladin lite

Цвет полилинии в Aladin lite

#javascript #canvas

#javascript #холст

Вопрос:

Я использую библиотеку Aladin lite в своем веб-приложении. Я хотел бы создать интерактивную карту неба со всеми созвездиями. Однако, когда я добавляю новый слой наложения и рисую линии любого созвездия, некоторые линии становятся ярче и шире, чем другие. Вот скрипка. Я хотел бы иметь все строки с lineWidth: 1 и color: '#FFF' . Есть ли какой-нибудь способ это исправить?

введите описание изображения здесь

 const aladin = A.aladin('#aladin-lite-div',  {survey: "P/DSS2/color", fov: 30, target: "Betelgeuse" })

const constellations = A.graphicOverlay({ color: '#FFF', lineWidth: 0.5 })
aladin.addOverlay(constellations)

// Each array item is [[startX, startY], [endX, endY]] of single line.
const lines = [[[72.46, 6.961], [72.653, 8.9]], [[72.46, 6.961], [72.802, 5.61]], [[72.46, 6.961], [81.283, 6.35]], [[72.653, 8.9], [73.724, 10.15]], [[72.802, 5.605], [73.563, 2.44]], [[73.563, 2.441], [74.637, 1.71]], [[73.724, 10.151], [74.093, 13.51]], [[74.093, 13.514], [76.142, 15.4]], [[76.142, 15.404], [77.425, 15.6]], [[78.635, -8.202], [81.119, -2.4]], [[81.119, -2.397], [83.002, -0.3]], [[81.283, 6.35], [83.002, -0.3]], [[81.283, 6.35], [83.785, 9.93]], [[81.283, 6.35], [88.793, 7.41]], [[83.002, -0.299], [84.053, -1.2]], [[83.785, 9.934], [88.793, 7.41]], [[84.053, -1.202], [85.19, -1.94]], [[85.19, -1.943], [86.939, -9.67]], [[85.19, -1.943], [88.793, 7.41]], [[88.595, 20.276], [90.98, 20.14]], [[88.595, 20.276], [91.893, 14.77]], [[88.793, 7.407], [90.596, 9.65]], [[90.596, 9.648], [92.985, 14.21]], [[90.98, 20.138], [92.985, 14.21]], [[91.893, 14.768], [92.985, 14.21]]]

for (const line of lines) {
        const polyline = A.polyline(line)
    constellations.add(polyline)
}  
 <!-- include Aladin Lite CSS file in the head section of your page -->
<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
 
<!-- you can skip the following line if your page already integrates the jQuery library -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js" charset="utf-8"></script>
 
<!-- insert this snippet where you want Aladin Lite viewer to appear and after the loading of jQuery -->
<div id="aladin-lite-div" style="width:400px;height:400px;"></div>

<script type="text/javascript" src="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>

Ответ №1:

То, что вы видите, вызвано сферической проекцией…
Если вы увеличите масштаб строк по отдельности, они будут выглядеть одинаково

Смотрите мой пример ниже, это должна быть куча одинаковых параллельных линий, но они не совсем выглядят одинаково

 const aladin = A.aladin('#aladin-lite-div',  {survey: "P/DSS2/color", fov: 100, target: "Betelgeuse" })
const constellations = A.graphicOverlay({ color: '#FFF', lineWidth: 0.5 })
aladin.addOverlay(constellations)

for (i = -10; i < 20; i  ) {  
    const polyline = A.polyline([[70, i], [105, i]])
    constellations.add(polyline)
}  
 <link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js" charset="utf-8"></script>
<div id="aladin-lite-div" style="width:400px;height:400px;"></div>
<script type="text/javascript" src="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>

Что мы можем сделать?

  • Если мы увеличим lineWidth , они будут выглядеть немного более однородными
  • Не используйте Aladin, получите нужное изображение и рисуйте непосредственно на холсте