/
map.js
110 lines (93 loc) · 2.92 KB
/
map.js
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
import { View, Map, Feature } from "ol";
import { fromLonLat } from "ol/proj";
import { Group as LayerGroup, Tile, Vector as LayerVector } from "ol/layer";
import { OSM, XYZ, Vector as SourceVector } from "ol/source";
import { Icon, Style } from "ol/style";
import { Point } from "ol/geom";
const DEFAULT_ZOOM = 16,
DEFAULT_LON = 0,
DEFAULT_LAT = 0,
ICON_IMAGE_GPS = "/images/icons/cf_icon_position.png",
ICON_IMAGE_MAG = "/images/icons/cf_icon_position_mag.png",
ICON_IMAGE_NOFIX = "/images/icons/cf_icon_position_nofix.png";
export function initMap() {
const lonLat = fromLonLat([DEFAULT_LON, DEFAULT_LAT]);
const mapView = new View({
center: lonLat,
zoom: DEFAULT_ZOOM,
});
const map = new Map({
target: "map",
layers: [
new Tile({
source: new OSM({
url: "https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=3a5a1a6c0d4e4f8a9c5b6c6f2b3f6e5f",
}),
}),
new LayerGroup({
layers: [
new Tile({
source: new XYZ({
attributions: [
'Powered by Esri',
'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community',
],
attributionsCollapsible: false,
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
maxZoom: DEFAULT_ZOOM,
}),
}),
],
}),
],
view: mapView,
controls: [],
});
const iconGPS = new Icon({
anchor: [0.5, 1],
opacity: 1,
scale: 0.5,
src: ICON_IMAGE_GPS,
});
const iconMag = new Icon({
anchor: [0.5, 1],
opacity: 1,
scale: 0.5,
src: ICON_IMAGE_MAG,
});
const iconNoFix = new Icon({
anchor: [0.5, 1],
opacity: 1,
scale: 0.5,
src: ICON_IMAGE_NOFIX,
});
const iconStyleGPS = new Style({
image: iconGPS,
});
const iconStyleMag = new Style({
image: iconMag,
});
const iconStyleNoFix = new Style({
image: iconNoFix,
});
const iconGeometry = new Point(lonLat);
const iconFeature = new Feature({
geometry: iconGeometry,
});
iconFeature.setStyle(iconStyleGPS);
const vectorSource = new SourceVector({
features: [iconFeature],
});
const currentPositionLayer = new LayerVector({
source: vectorSource,
});
map.addLayer(currentPositionLayer);
return {
mapView,
iconStyleMag,
iconStyleGPS,
iconStyleNoFix,
iconFeature,
iconGeometry,
};
}