Show sourcecode

The following files exists in this folder. Click to view.

public_html/exercises/Projekt/viewdistance/

8k_earth_daymap.jpg
index.html
main.js
package.json

`main.js`

158 lines ASCII Windows (CRLF)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158


const map = new ol.Map({

  target: 'map',



  layers: [

    new ol.layer.Tile({

      source: new ol.source.OSM(),

    }),

  ],



  view: new ol.View({

    center: [0, 0],

    zoom: 2,

    projection: 'EPSG:4326',

  })

});



var mapDisplay = document.getElementById("map")

var marker = document.getElementById("marker")

var latitude = document.getElementById("latitude")

var longitude = document.getElementById("longitude")

var visCanvas = document.getElementById("visibility-container")



let currentLat = latitude.value;

let currentLong = longitude.value;

var stepSize = 0.01;

var rad = 6371;



function findPosition(long, lat) {

    var zoom = (Math.pow(2, Number(map.getView().getZoom()))*0.25)

    var center = map.getView().getCenter();



    let centerX = Number((center[0] + 180) % 360) - 180;

    let centerY = Number(center[1]);



    let minX = centerX - (180/zoom);

    let minY = -centerY - (90/zoom);



    let maxX = centerX + (180/zoom);

    let maxY = -centerY + (90/zoom);



    let width = (maxX-minX);

    let height = (maxY-minY);



    let x = (((Number(long)) - minX)/width);

    let y = (((Number(-lat)) - minY)/height);



    return [x, y];

}



function findCoordinate(x, y) {

    var zoom = (Math.pow(2, Number(map.getView().getZoom()))*0.25)

    var center = map.getView().getCenter();



    let centerX = Number((center[0] + 180) % 360) - 180;

    let centerY = Number(center[1]);



    let minX = centerX - (180/zoom);

    let minY = -centerY - (90/zoom);



    let maxX = centerX + (180/zoom);

    let maxY = -centerY + (90/zoom);



    let width = (maxX-minX);

    let height = (maxY-minY);



    let long = x*width + minX

    let lat = y*height + minY



    return [long, lat]

}



async function spawnVisibility() {

  const canvasWidth = visCanvas.width;

  const canvasHeight = visCanvas.height;

  const ctx = visCanvas.getContext("2d");

  var stepsX = 1/stepSize

  var stepsY = 1/stepSize



  var fillWidth = stepSize*canvasWidth

  var fillHeight = stepSize*canvasHeight



  var halfWidth = (fillWidth*0.5);

  var halfHeight = (fillHeight*0.5);



  var toCanvasCoordsWidth = stepSize*canvasWidth

  var toCanvasCoordsHeight = stepSize*canvasHeight



  let canvasX = 0;

  let canvasY = 0;



  ctx.clearRect(0, 0, canvasWidth, canvasHeight);

  ctx.fillStyle = "rgb(0 255 0 / 100%)";



  var height = document.getElementById("height").value

  for (let x = 0; x < stepsX; x++) {

    canvasX = x*toCanvasCoordsWidth - halfWidth - 1;

    for (let y = 0; y < stepsY; y++) {

      let pos = findCoordinate(x*stepSize, y*(stepSize));



      if (0 > checkVisible(currentLong, -currentLat, pos[0], pos[1], rad, height)) {

        canvasY = (y*toCanvasCoordsHeight - halfHeight - 1);

        ctx.fillRect(canvasX, canvasY, fillWidth + 2, fillHeight + 2);

      }

    }

  }

}



function checkVisible(long, lat, targetLong, targetLat, radius, h) {

  const deg = Math.PI / 180;



  const p1x = Math.cos(long * deg) * Math.cos(lat * deg) * radius;

  const p1y = Math.cos(lat * deg) * Math.sin(long * deg) * radius;

  const p1z = Math.sin(lat * deg) * radius;



  const p2x = Math.cos(targetLong * deg) * Math.cos(targetLat * deg) * radius;

  const p2y = Math.cos(targetLat * deg) * Math.sin(targetLong * deg) * radius;

  const p2z = Math.sin(targetLat * deg) * radius;



  const dx = p1x - p2x;

  const dy = p1y - p2y;

  const dz = p1z - p2z;



  const distance = 2 * radius * Math.asin(

    Math.sqrt(dx * dx + dy * dy + dz * dz) / (2 * radius)

  );



  const term2 = radius * Math.acos(radius / (h / 1000 + radius));



  return distance - term2;

}



function setMarkerPos(pos = [x, y]) {

    marker.style.left = (Number(pos[0])*100).toString() + "%"

    marker.style.top = (Number(pos[1]*100)).toString() + "%"

}



document.getElementById("findPos").addEventListener('click', () => {

  currentLat = Number(latitude.value);

  currentLong = Number(longitude.value);



  setMarkerPos(findPosition(currentLong, currentLat))

  spawnVisibility()

})



map.getView().on('change:center', update);

map.getView().on('change:zoom', update);



function update() {

  setMarkerPos(findPosition(currentLong, currentLat));

  spawnVisibility()

}



document.getElementById("body").addEventListener('mousemove', (event) => {

  console.log(event.clientX/window.innerWidth, event.clientY/window.innerHeight)

})



setMarkerPos(findPosition(currentLong, currentLat));

spawnVisibility()