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
|
/* layers */
var default_pointer = "../media/images/default-pointer.png";
var source_osm = function(options){
return new ol.layer.Tile({
source: new ol.source.OSM()
});
};
var map_layers = {
'osm': source_osm
};
var get_layers = function(layers){
if (!layers){
layers = [{'type': 'osm', 'options': null}];
}
var ol_layers = [];
for (idx in layers){
var layer_attr = layers[idx];
ol_layers.push(
map_layers[layer_attr['type']](layer_attr['options'])
);
}
return ol_layers;
};
/* get markers */
var get_markers = function(points){
};
/* styles */
var get_style = function(feature){
/*
properties = feature.getProperties();
var size = [properties.icon_width, properties.icon_height];
var anchor = [properties.icon_offset_x,
properties.icon_offset_y];
return new ol.style.Style({
image: new ol.style.Icon({
anchor: [17, 50],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
src: default_pointer,
size: [35, 50]
})
});
*/
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
return new ol.style.Style({
image: image
});
};
/* display map */
var display_map = function(map_id, points, layers){
console.log((new ol.format.GeoJSON()).readFeatures(points));
var vector_source = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(points)
});
var vector_layer = new ol.layer.Vector({
source: vector_source,
style: get_style
});
var map_layers = get_layers(layers);
map_layers.push(vector_layer);
var map = new ol.Map({
target: map_id,
layers: map_layers,
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
}
|
