https://www.okosan.org/WebUI/JS/FW/Map.js?v=0

1//felületen lévő térképek listája (2 dimenzió: [index][0] = térkép, [index][0] = layer)
2var MapArray = new Array();
3//szélsőértékek a térkép kezdőpozíciójának meghatározásához
4var minLongitude = 0;
5var minLatitude = 0;
6var maxLongitude = 0;
7var maxLatitude = 0;
8var MapObjectCount = 0;
9
10//----------------------------------------------------------------------------------
11//id alapján visszaad egy layert
12//----------------------------------------------------------------------------------
13ol.Map.prototype.getLayer = function (layerid) {
14    var resultlayer;
15    this.getLayers().forEach(function (layer) {
16        if (layerid == layer.get('id')) {
17            resultlayer = layer;
18        }
19    });
20    return resultlayer;
21}
22
23
24//----------------------------------------------------------------------------------
25//id alapján visszaad egy feature-t
26//ha nincs megadva featureid, akkor featureid=layerid
27//----------------------------------------------------------------------------------
28ol.Map.prototype.getFeature = function (featureid, layerid) {
29    var resultfeature;
30
31    if (layerid == undefined) {
32        this.getLayers().forEach(function (layer) {
33            var feature = layer.getSource().getFeatureById(featureid);
34            if (feature) resultfeature = feature;
35        });
36    } else {
37        var layer = this.getLayer(layerid);
38        if (layer) resultfeature = layer.getSource().getFeatureById(featureid);
39    }
40
41    return resultfeature;
42}
43
44
45//----------------------------------------------------------------------------------
46//töröl egy layert a térképről(létező függvény)
47//----------------------------------------------------------------------------------
48//ol.Map.prototype.removeLayer = function (layer)
49
50
51//----------------------------------------------------------------------------------
52//töröl egy feature-t
53//ha nincs megadva layer, akkor minden layer-en próbálkozik
54//----------------------------------------------------------------------------------
55ol.Map.prototype.removeFeature = function (feature, layer) {
56    if (layer == undefined) {
57        this.getLayers().forEach(function (layer) {
58            layer.getSource().removeFeature(feature);
59        });
60    } else {
61        layer.getSource().removeFeature(feature);
62    }
63}
64
65
66//----------------------------------------------------------------------------------
67//Egyszerű marker-kirakó
68//offset 0,1 (0 esetén nincs eltolva semmi, és nincs árnyék se, és háttér se
69//----------------------------------------------------------------------------------
70ol.Map.prototype.addMarker = function(MapIndex, lonlat, icon, color, backgroundcolor, size, marker, info, infocolor, infostrokecolor, entityname, entityid, offset)
71{
72    var iconFont = 'fw';
73
74    var point = new ol.geom.Point(ol.proj.fromLonLat(lonlat, this.getView().getProjection()));
75    var feature = new ol.Feature(point);
76    feature.setStyle(
77        function (feature, resolution) {
78            var styles = [];
79
80            if (offset > 0) {
81                //Shadow
82                styles.push(new ol.style.Style({
83                    image: new ol.style.Shadow({
84                        radius: size,
85                        blur: 10,
86                        offsetX: 0,
87                        offsetY: 0,
88                        fill: new ol.style.Fill({
89                            color: "rgba(0,0,0,0.5)"
90                        })
91                    })
92                }));
93
94
95                //Info
96                styles.push(new ol.style.Style({
97                    text: new ol.style.Text({
98                        font: 'Normal ' + (size / 1.7) + 'px ' + iconFont,
99                        text: info,
100                        fill: new ol.style.Fill({color: infocolor}),
101                        offsetX: 0,
102                        offsetY: (-3 * size - 0) * offset,
103                        stroke: new ol.style.Stroke({
104                            color: infostrokecolor,
105                            width: 4
106                        })
107                    })
108                }));
109
110                //marker
111                styles.push(new ol.style.Style({
112                    image: new ol.style.FontSymbol({
113                        form: marker,
114                        fontSize: 2,
115                        radius: size,
116                        offsetX: 0,
117                        offsetY: (-1 * size - 5) * offset,
118                        fill: new ol.style.Fill({
119                            color: backgroundcolor
120                        }),
121                        stroke: new ol.style.Stroke({
122                            color: color,
123                            width: 2
124                        })
125                    }),
126                }));
127            }
128
129            //Text
130            styles.push(new ol.style.Style({
131                text: new ol.style.Text({
132                    font: 'Normal ' + (size * 1.2) + 'px ' + iconFont,
133                    text: icon,
134                    fill: new ol.style.Fill({ color: color }),
135                    offsetX: 0,
136                    offsetY: (-1 * size - 8) * offset,
137                })
138            }));
139
140            return styles;
141        }
142    );
143
144    feature.clickable = true;
145    feature.id = "marker|" + entityname + "|" + entityid;
146    feature.setId("marker|" + entityname + "|" + entityid);
147
148    //1 layer - 1 feature, mert egymásba lógtak a cuccok
149    var layer = new ol.layer.Vector({
150        id: "marker|" + entityname + "|" + entityid,
151        source: new ol.source.Vector({
152            features: [feature]
153        })
154    });

155    this.addLayer(layer);
156
157    return layer;
158}
159
160
161//----------------------------------------------------------------------------------
162//Egyszerű vonal-kirakó
163//----------------------------------------------------------------------------------
164ol.Map.prototype.addLine = function(MapIndex, lonlatarray, color, size, entityname, entityid)
165{
166    var feature = new ol.Feature();
167    var geometry = new ol.geom.LineString(lonlatarray);
168    geometry.transform('EPSG:4326', 'EPSG:3857'); //Transform to your map projection
169    feature.setGeometry(geometry);
170    feature.setStyle(
171        function (feature, resolution) {
172            var styles = [];
173
174            styles.push(new ol.style.Style({
175                stroke: new ol.style.Stroke({
176                    color: color,
177                    width: size
178                })
179            }));
180
181            return styles;
182        }
183    );
184
185    feature.clickable = false;
186    feature.id = "line|" + entityname + "|" + entityid;
187    feature.setId("line|" + entityname + "|" + entityid);
188
189    //1 layer - 1 feature, mert egymásba lógtak a cuccok
190    var layer = new ol.layer.Vector({
191        id: "line|" + entityname + "|" + entityid,
192        source: new ol.source.Vector({
193            features: [feature]
194        })
195    });
196    this.addLayer(layer);
197
198    return layer;
199}
200
201
202//----------------------------------------------------------------------------------
203//FWDynUI által indított tömeges markerkirakás, ami a BLL-ekbe hív be (a formhoz kapcsolt BLL-be!)
204//MapObject: maga a térkép objektum
205//----------------------------------------------------------------------------------
206function InitMap(MapIndex, MapObject, FormName, MapName, EntityName, Filter, MapOnClickFunction)
207{
208    //kattintás az ikonra
209    MapObject.on('click', function(e) {
210        var iconFeatureA = MapObject.getFeaturesAtPixel(e.pixel);
211        if (iconFeatureA && iconFeatureA.length>0 && iconFeatureA[0].clickable) {
212            MapMarkerOnClickFunction(MapObject, FormName, MapName, iconFeatureA[0].id);
213            e.preventDefault(); // avoid bubbling
214        }
215    });
216
217    //egérmutató állítása
218    MapObject.on('pointermove', function(e) {
219        if (e.dragging) return;
220        var pixel = e.map.getEventPixel(e.originalEvent);
221        var hit = e.map.forEachFeatureAtPixel(pixel, function (feature, layer) {
222            return feature.clickable;
223        });
224        e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
225    });
226
227    //az utolsó térképpozíció elmentése későbbi visszatöltéshez
228    var SaveMapLocationTimer;
229    MapObject.on('moveend', function(e) {
230        if (SaveMapLocationTimer != null) clearTimeout(SaveMapLocationTimer);
231
232        SaveMapLocationTimer = setTimeout(function() {
233            var lonlat = ol.proj.transform(e.map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326');
234            var postData = {
235                "function": "SaveMapLocation",
236                "mapname": MapName,
237                "formname": FormName,
238                "zoom": e.map.getView().getZoom(),
239                "latitude": lonlat[1],
240                "longlitude": lonlat[0],
241            };
242            CallAPIFunction("FWMap", postData, true);
243        }, 1300);
244    });
245
246    //adatok lekérdezése a backendről
247    var postData = {
248        "function": "GetList",
249        "from": "map",
250        "type": "line",
251        "filter": Base64.encode(Filter),
252        "entity": EntityName,
253        "mapname": MapName,
254        "formname": FormName,
255        "withoutgetlist": true
256    };
257
258    CallAPIFunction("FWCommon", postData, false, GetMapLines_Complete, new Array(MapIndex, Filter, EntityName, MapName, FormName, true));
259}
260
261
262
263//----------------------------------------------------------------------------------
264//A markerkirakás eredménye megjött a backendről
265//Az elvárt dataset tartalma:
266//          lon     lat     icon,       color,      backgroundcolor,    size,       marker,      entityname,     entityid,  offset, parameter
267//pl.:      19      47      '\uea56',   'navy',     '#fff',             20,         'marker',    'GSGPSData',    12,        0,      'akármi'
268//marker: a buborék alakja (none, circle, ban, poi, bubble, marker, coma, shield, blazon, bookmark, hexagon, diamond, triangle, sign, lozenge, square)
269//offset: eltolás, ami járműnél kell, viszont útvonalcsomópontnál nem
270//----------------------------------------------------------------------------------
271GetMapMarkers_Complete = function (ResponseData, Parameter)
272{
273    var MapIndex = Parameter[0];
274    var Filter = Parameter[1];
275    var EntityName = Parameter[2];
276    var MapName = Parameter[3];
277    var FormName = Parameter[4];
278    var NeedChangePosition = Parameter[5];
279
280    if (ResponseData.responseText != "") {
281        var markers = JSON.parse(RemoveUtf8BOM(ResponseData.responseText));
282        for (row = 0; row < markers.length; row++) {
283            MapArray[MapIndex][0].addMarker(
284                MapIndex,
285                [
286                    markers[row][0],
287                    markers[row][1]
288                ],
289                markers[row][2],
290                markers[row][3],
291                markers[row][4],
292                markers[row][5],
293                markers[row][6],
294                markers[row][7],
295                markers[row][8],
296                markers[row][9],
297                markers[row][10],
298                markers[row][11],
299                markers[row][12]
300            );
301        }
302    }
303
304    //adatok lekérdezése a backendről
305    var postData = {
306        "function": "gsgetmapedge",
307        "mapname": MapName,
308        "formname": FormName,
309    };
310    CallAPIFunction("GSCommon", postData, false, GetMapEdges_Complete, new Array(MapIndex, Filter, EntityName, MapName, FormName, NeedChangePosition));
311
312
313}
314
315
316//----------------------------------------------------------------------------------
317//A vonalkirakás eredménye megjött a backendről
318//Az elvárt dataset tartalma:
319//          lon     lat     color,      size,      entityname,     entityid
320//pl.:      19      47      'navy',     5,         'GSGPSData',    12
321//----------------------------------------------------------------------------------
322GetMapLines_Complete = function (ResponseData, Parameter)
323{
324    var MapIndex = Parameter[0];
325    var Filter = Parameter[1];
326    var EntityName = Parameter[2];
327    var MapName = Parameter[3];
328    var FormName = Parameter[4];
329    var NeedChangePosition = Parameter[5];
330
331    if (ResponseData.responseText != "")
332    {
333        var lines = JSON.parse(RemoveUtf8BOM(ResponseData.responseText));
334        for (row = 0; row < lines.length; row++) {
335            MapArray[MapIndex][0].addLine(
336                MapIndex,
337                JSON.parse(lines[row][0]),
338                lines[row][1],
339                lines[row][2],
340                lines[row][3],
341                lines[row][4]
342            );
343        }
344    }
345
346    //adatok lekérdezése a backendről
347    var postData = {
348        "function": "GetList",
349        "from": "map",
350        "type": "marker",
351        "filter": Base64.encode(Filter),
352        "entity": EntityName,
353        "mapname": MapName,
354        "formname": FormName,
355        "withoutgetlist": true
356    };
357    CallAPIFunction("FWCommon", postData, false, GetMapMarkers_Complete, new Array(MapIndex, Filter, EntityName, MapName, FormName, NeedChangePosition));
358}
359
360
361GetMapEdges_Complete = function (ResponseData, Parameter)
362{
363    var MapIndex = Parameter[0];
364    var Filter = Parameter[1];
365    var EntityName = Parameter[2];
366    var MapName = Parameter[3];
367    var FormName = Parameter[4];
368    var NeedChangePosition = Parameter[5];
369
370    if (ResponseData.responseText != "")
371    {
372        var resarray = ResponseData.responseText.split("|");
373
374        minLongitude = resarray[0];
375        minLatitude = resarray[1];
376        maxLongitude = resarray[2];
377        maxLatitude = resarray[3];

378        MapObjectCount = resarray[4];
379    }
380
381    $( document ).ready(function() {
382        MapInformationLoaded(MapIndex, NeedChangePosition);
383    });
384}
385
386
387//----------------------------------------------------------------------------------
388//Egy markerre történő kattntás
389//----------------------------------------------------------------------------------
390function MapMarkerOnClickFunction(MapIndex, FormName, MapName, EntityNameEntityID)
391{
392    //Felületenként kifejtendő függvény, felüldefiniált javascriptekben
393}
394
395
396//----------------------------------------------------------------------------------
397//Egy térkép töltésének utolsó szakasza is befejeződött
398//----------------------------------------------------------------------------------
399function MapInformationLoaded(MapIndex, NeedChangePosition)
400{
401    //Felületenként kifejtendő függvény, felüldefiniált javascriptekben
402}