This repository has been archived by the owner on May 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (95 loc) · 3.76 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Example of AIS-catcher GeoJSON</title>
<link rel="stylesheet" href="" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
const aiscatcher_server = "http://192.168.1.113:8100";
var aiscatcher_source = new ol.source.Vector({
url: aiscatcher_server + '/geojson',
format: new ol.format.GeoJSON()
});
function updateAIScatcher() { aiscatcher_source.refresh(); }
setInterval(updateAIScatcher, 60000);
const aiscatcher_mapping = {
0: { size: [20, 20], offset: [120, 20], comment: 'CLASS_OTHER' },
1: { size: [20, 20], offset: [120, 20], comment: 'CLASS_UNKNOWN' },
2: { size: [20, 20], offset: [0, 20], comment: 'CLASS_CARGO' },
3: { size: [20, 20], offset: [20, 20], comment: 'CLASS_B' },
4: { size: [20, 20], offset: [40, 20], comment: 'CLASS_PASSENGER' },
5: { size: [20, 20], offset: [60, 20], comment: 'CLASS_SPECIAL' },
6: { size: [20, 20], offset: [80, 20], comment: 'CLASS_TANKER' },
7: { size: [20, 20], offset: [100, 20], comment: 'CLASS_HIGHSPEED' },
8: { size: [20, 20], offset: [140, 20], comment: 'CLASS_FISHING' },
9: { size: [25, 25], offset: [0, 60], comment: 'CLASS_PLANE' },
10: { size: [25, 25], offset: [0, 85], comment: 'CLASS_HELICOPTER' },
11: { size: [20, 20], offset: [20, 40], comment: 'CLASS_STATION' },
12: { size: [20, 20], offset: [0, 40], comment: 'CLASS_ATON' },
13: { size: [20, 20], offset: [40, 40], comment: 'CLASS_SARTEPIRB' }
};
var aiscatcher_overlay = new ol.layer.Vector({
type: 'overlay',
title: "aiscatcher",
name: "aiscatcher",
zIndex: 99,
source: aiscatcher_source,
style: function (feature) {
const cog = feature.get('cog');
const rotation = (cog || 0) * (Math.PI / 180);
const shipclass = feature.get('shipclass');
const speed = feature.get('speed');
const ofs = aiscatcher_mapping[shipclass].offset;
const size = aiscatcher_mapping[shipclass].size;
if (speed && speed > 0.5)
o = [ofs[0], 0];
else
o = ofs;
return new ol.style.Style({
image: new ol.style.Icon({
src: aiscatcher_server + '/icons.png',
anchor: [0.5, 0.5],
rotation: rotation,
size: size,
offset: o
})
});
}
});
//world.push(aiscatcher_overlay);
var map = new ol.Map({
target: 'map',
layers: [
// Add an OpenStreetMap layer as the base layer
new ol.layer.Tile({
source: new ol.source.OSM()
}),
// Add a vector layer for GeoJSON data
aiscatcher_overlay
],
view: new ol.View({
// Set the initial center and zoom level
center: ol.proj.fromLonLat([0, 0]),
zoom: 2
})
});
</script>
</body>
</html>