https://www.prix-carburants.gouv.fr/carto/js/minimapnew.js

1class MiniCarte {
2    map = null;
3    layerPdvs = null;
4    sourcePdvs = null;
5    featurePDV = null;
6    featureRoute = null;
7
8    initialize = function (divCarte, WMTS_URL, BASE_CARTO_ASSET_URL, nocontrols, print) {
9        // converti le parametre WTMS tn TMS_URL
10        // var TMS_URL = WMTS_URL.replace(/wmts/, 'tms');    
11        this.map = new ol.Map({
12            target: divCarte,
13            layers: [
14                new ol.layer.Tile({
15                    source: MiniCarte.getWmtsSource(WMTS_URL, BASE_CARTO_ASSET_URL)
16                })
17            ],
18            // Centrer la carte sur la France et vérouiller le zoom
19            view: new ol.View({
20                center: ol.proj.fromLonLat([2.3, 47]),
21                //projection: 'EPSG:4326',
22                zoom: 5.861501057942709,
23                maxZoom: 18,
24                minZoom: 5
25            }),
26            controls: (nocontrols == undefined || !nocontrols)? ol.control.defaults.defaults({zoom: true, attribution: false, zoomOptions: ({zoomInTipLabel: 'Zoomer dans la carte (+)', zoomOutTipLabel: 'Dézoomer dans la carte (-)'}), rotate: false}):[]
27        });
28
29        // Création layer et ajout
30        // Ajouter la couche des pdvs
31        this.map.addLayer(this.getLayerPdvs());
32
33        //this._registerEvents(layerBing, print);
34        
35        if(print !== true) {
36            this._compterVues();
37        } else {
38            this.map.on('loadend', this.lancerImpression);
39        }
40
41        return this;
42    }
43
44    /**
45     * Créer le calque pour les pdvs
46     * @returns ol.layer.Vector
47     */
48    getLayerPdvs = function () {
49        this.sourcePdvs = new ol.source.Vector({
50            features: [],
51            attributions: MAP_ATTRIBUTION
52        });
53
54        // on crée la couche
55        this.layerPdvs = new ol.layer.Vector({
56            source: this.sourcePdvs,
57            minResolution: 0,
58            maxResolution: 400,
59            style: function (feature) {
60                let color = '#0000bb';
61                return new ol.style.Style({
62                    image: new ol.style.Icon({
63                        color: color,
64                        crossOrigin: 'anonymous',
65                        src: BASE_CARTO_ASSET_URL + '/gas-station-fill.svg',
66                        scale: 0.4
67                    }),
68                })
69            }
70        });
71
72        return this.layerPdvs;
73    };
74
75    /**
76     * Permet de capter les évènements
77     * @param {type} layer
78     * @param {type} print
79     * @returns {undefined}
80     */
81    lancerImpression = function() {
82        // FIX #1 : Laisse le temps à Openlayers d'afficher les images
83        setTimeout(function() {
84            window.print();
85            // FIX #2 : Empêche la fermeture de la fenêtre avant l'ouverture du print dialog
86            setTimeout(function() {
87                window.close();
88            }, 300);
89        }, 500);
90    }
91
92
93    /**
94     * Permet d'ajouter un point de vente à la carte
95     * @param {*} id
96     * @param {*} lat
97     * @param {*} lon
98     * @returns {MiniCarte}
99     */
100    addPdv = function(id, lon, lat) { 
101        var objPdv = {
102            id: id,
103            coordLatitude: parseFloat(lat),
104            coordLongitude: parseFloat(lon),
105        };
106     
107        let point = new ol.geom.Point(ol.proj.fromLonLat([objPdv.coordLongitude, objPdv.coordLatitude]));
108        let feature = new ol.Feature({
109            geometry: point,
110            name: objPdv.id,
111            type: 'pdv',
112        });
113        // ajout au calque
114        this.sourcePdvs.addFeatures([feature]);
115        // Zoom
116        if(this.sourcePdvs.getFeatures().length > 0) {
117            this.map.getView().fit(this.sourcePdvs.getExtent(), { duration: 0 });
118        }
119        return this;
120    }
121
122    /**
123     * Permet d'afficher une route avec ses étapes
124     * @param {type} polyLineGeometry
125     * @param {type} arrEtapes
126     * @returns {undefined}
127     */
128    addRoute = function(polyLineGeometry, arrEtapes) {
129        if(this.sourceRoute != null) {
130           //this.sourceRoute.clear();
131        } else {
132            this.sourceRoute = new ol.source.Vector();
133        }
134        if(this.layerRoute == null) {
135            this.layerRoute = new ol.layer.Vector({
136                source: this.sourceRoute
137              });
138            this.map.addLayer(this.layerRoute);
139        }       
140
141        let styles = {
142          route: new ol.style.Style({
143            stroke: new ol.style.Stroke({
144              width: 6, color: [0, 255, 0, 0.5]
145              
146            })
147          }),
148          icon: function (feature) { 
149            if (DEBUG_CARTO) {
150                console.log(feature.get('step'));
151            }
152            var color = '#87CEEB';
153            if(feature.get('step') == 'start') {
154                color =  '#34C924';
155            } else if(feature.get('step') == 'end') {
156                color =  '#FF5E4D';
157            }
158
159            return new ol.style.Style({
160                image: new ol.style.Icon({
161                    color: color,
162                    crossOrigin: 'anonymous',
163                    src: BASE_CARTO_ASSET_URL + '/flag-fill.svg',
164                    scale: 1,
165                    //anchor: [0.5, 1],
166                })
167            })
168        }
169        };
170
171        // Decode la polyline
172        var route = new ol.format.Polyline({
173                factor: 1e5
174            }).readGeometry(polyLineGeometry, {
175                dataProjection: 'EPSG:4326',
176                featureProjection: 'EPSG:3857'
177        });
178        // création feature
179        var featureRoute = new ol.Feature({
180            type: 'route',
181            geometry: route
182        });
183        featureRoute.setStyle(styles.route);
184        
185        // Ajout au calque
186        this.sourceRoute.clear();
187        this.sourceRoute.addFeature(featureRoute);
188
189        // Affichage des points de passages
190        if (arrEtapes !== undefined)
191        {
192            if (DEBUG_CARTO) {
193                console.log(arrEtapes);
194            }

195            arrEtapes.forEach((etape, index) => {
196                // Création des features, ajout type "step" selon position dans le tableau
197                var feature = new ol.Feature({
198                    type: 'place',
199                    step: (index==0)?'start':((index==arrEtapes.length -1)?'end':'step'),
200                    geometry: new ol.geom.Point(ol.proj.fromLonLat([etape.coordinates.lon,etape.coordinates.lat], 'EPSG:3857'))
201                });
202
203                feature.setStyle(styles.icon);       
204                this.sourceRoute.addFeature(feature);
205            });
206        }
207    };
208
209    zoomRoute = function() {
210        this.map.getView().fit(this.sourceRoute.getExtent(), { duration: 0 });
211    };
212
213    /**
214     * Retourne une source WTMS
215     * @param {*} WMTS_URL 
216     * @param {*} BASE_CARTO_ASSET_URL 
217     * @returns 
218     */
219    static getWmtsSource = function (WMTS_URL, BASE_CARTO_ASSET_URL) {
220        // définir l'origine de la grille TMS en haut à gauche
221        var origin = [-20037508.3427892480, -20037508.3427892480];
222
223        // créer une grille de tuiles avec l'origine personnalisée
224        var tileGrid = new ol.tilegrid.WMTS({
225            origin: [-20037508,20037508],
226            resolutions: [
227                156543.03392804103,
228                78271.5169640205,
229                39135.75848201024,
230                19567.879241005125,
231                9783.939620502562,
232                4891.969810251281,
233                2445.9849051256406,
234                1222.9924525628203,
235                611.4962262814101,
236                305.74811314070485,
237                152.87405657035254,
238                76.43702828517625,
239                38.218514142588134,
240                19.109257071294063,
241                9.554628535647034,
242                4.777314267823517,
243                2.3886571339117584,
244                1.1943285669558792,
245                0.5971642834779396,
246                0.29858214173896974,
247                0.14929107086948493,
248                0.07464553543474241
249            ],
250            matrixIds:["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"],
251        });
252        return new ol.source.WMTS({
253          attributions: ["IGN-F/Géoplateforme"],
254          url: WMTS_URL,
255          layer: "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2",
256          matrixSet: "PM",
257          format: "image/png",
258          tileGrid: tileGrid,
259          style: "normal",
260        });
261    };
262
263    /**
264     * Permet de compter le nombre de vues
265     * @param {type} layer
266     * @returns {undefined}
267     */
268    _compterVues = function() {
269        // Lorsque les tuiles ont finies d'être chargées
270        fetch(BASE_URL + "/map/statistiques")
271          .then(response => {
272            if (response.ok) {
273              // Code de succès
274              //console.log('Incrementation de stats');
275            } else {
276              // Gérer l'erreur
277              //console.log('Erreur');
278            }
279          })
280          .catch(error => {
281            // Gérer l'erreur
282            //console.log('Erreur');
283          });
284      };
285}