Update libs + Search bar

ignfab · Sep 18, 2023 · 95fd5fd · 95fd5fd
1 parent 058e502
commit 95fd5fd
Show file tree

Hide file tree

Showing 5 changed files with 828 additions and 3,462 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,8 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-build
-npm-debug.log
 dist
-.env
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
 .DS_Store
-.cache
-.parcel-cache
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/main.js b/main.js
@@ -9,159 +9,175 @@ import WMTSTileGrid from 'ol/tilegrid/WMTS';
 import { getWidth } from 'ol/extent';
 import VectorSource from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
-import { bbox as bboxStrategy, tile as tileStrategy } from 'ol/loadingstrategy';
+import { tile as tileStrategy } from 'ol/loadingstrategy';
 import VectorLayer from 'ol/layer/Vector';
 import { Stroke, Style, Fill } from 'ol/style';
 import materiaux_mur from './dmatgm.json';
 import materiaux_toit from './dmatto.json';
+import { Services, olExtended } from 'geoportal-extensions-openlayers';
 
-// Infobulle
-var container = document.getElementById('popup');
-var content = document.getElementById('popup-content');
-var closer = document.getElementById('popup-closer');
-const toPrint = ["altitude_maximale_sol", "altitude_maximale_toit",
- "altitude_minimale_sol", "altitude_minimale_toit",
- "construction_legere", "date_d_apparition", "etat_de_l_objet",
- "hauteur", "materiaux_de_la_toiture", "materiaux_des_murs",
- "nature", "nombre_d_etages", "nombre_de_logements", "usage_1", "usage_2"
-]
-
-var overlay = new Overlay({
- element: container,
- autoPan: true,
- autoPanAnimation: {
- duration: 250,
- },
-});
+function createMap() {
+ // Infobulle
+ const container = document.getElementById('popup');
+ const content = document.getElementById('popup-content');
+ const closer = document.getElementById('popup-closer');
+ const toPrint = [
+ 'altitude_maximale_sol', 'altitude_maximale_toit',
+ 'altitude_minimale_sol', 'altitude_minimale_toit',
+ 'construction_legere', 'date_d_apparition', 'etat_de_l_objet',
+ 'hauteur', 'materiaux_de_la_toiture', 'materiaux_des_murs',
+ 'nature', 'nombre_d_etages', 'nombre_de_logements', 'usage_1', 'usage_2',
+ ];
 
-closer.onclick = function () {
- overlay.setPosition(undefined);
- closer.blur();
- return false;
-};
-
-// Définition de la pyramide de résolution Géoportail
-var resolutions = [];
-var matrixIds = [];
-var proj3857 = getProjection('EPSG:3857');
-var maxResolution = getWidth(proj3857.getExtent()) / 256;
-
-for (var i = 0; i < 19; i++) {
- matrixIds[i] = i.toString();
- resolutions[i] = maxResolution / Math.pow(2, i);
-};
-
-var tileGrid = new WMTSTileGrid({
- origin: [-20037508, 20037508],
- resolutions: resolutions,
- matrixIds: matrixIds,
-});
+ const overlay = new Overlay({
+ element: container,
+ autoPan: true,
+ autoPanAnimation: {
+ duration: 250,
+ },
+ });
 
-// Objets WFS Batiments
-var vectorSource = new VectorSource({
- format: new GeoJSON(),
- url: function (extent) {
- return (
- 'https://wxs.ign.fr/essentiels/geoportail/wfs?service=WFS&' +
- 'version=1.1.0&request=GetFeature&typename=BDTOPO_V3:batiment&' +
- 'outputFormat=application/json&srsname=EPSG:3857&' +
- 'bbox=' +
- extent.join(',') +
- ',EPSG:3857'
- );
- },
- strategy: tileStrategy(tileGrid),
-});
+ closer.onclick = function () {
+ overlay.setPosition(undefined);
+ closer.blur();
+ return false;
+ };
 
-var wfs = new VectorLayer({
- source: vectorSource,
- style: new Style({
- stroke: new Stroke({
- color: 'rgba(0, 0, 255, 1.0)',
- width: 2,
- }),
- fill: new Fill({
- color: 'rgba(0, 0, 255, 0.2)'
+ // Définition de la pyramide de résolution Géoportail
+ const resolutions = [];
+ const matrixIds = [];
+ const proj3857 = getProjection('EPSG:3857');
+ const maxResolution = getWidth(proj3857.getExtent()) / 256;
+
+ for (let i = 0; i < 19; i++) {
+ matrixIds[i] = i.toString();
+ resolutions[i] = maxResolution / Math.pow(2, i);
+ }
+
+ const tileGrid = new WMTSTileGrid({
+ origin: [ -20037508, 20037508 ],
+ resolutions: resolutions,
+ matrixIds: matrixIds,
+ });
+
+ // Objets WFS Batiments
+ const vectorSource = new VectorSource({
+ format: new GeoJSON(),
+ url: function (extent) {
+ return (
+ 'https://wxs.ign.fr/essentiels/geoportail/wfs?service=WFS&' +
+ 'version=1.1.0&request=GetFeature&typename=BDTOPO_V3:batiment&' +
+ 'outputFormat=application/json&srsname=EPSG:3857&' +
+ 'bbox=' + extent.join(',') + ',EPSG:3857'
+ );
+ },
+ strategy: tileStrategy(tileGrid),
+ });
+
+ const wfs = new VectorLayer({
+ source: vectorSource,
+ style: new Style({
+ stroke: new Stroke({
+ color: 'rgba(0, 0, 255, 1.0)',
+ width: 2,
+ }),
+ fill: new Fill({
+ color: 'rgba(0, 0, 255, 0.2)',
+ }),
  }),
- }),
- minZoom: 16
-});
+ minZoom: 16,
+ });
 
-// Couche WMTS PLAN IGN v2
-var rasterSource1 = new WMTS({
- url: 'https://wxs.ign.fr/essentiels/geoportail/wmts',
- layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
- format: 'image/png',
- matrixSet: 'PM',
- projection: 'EPSG:3857',
- tileGrid: tileGrid,
- style: 'normal',
- attributions:
- '<a href="http://www.ign.fr" target="_blank">' +
- '<img src="https://wxs.ign.fr/static/logos/IGN/IGN.gif" title="Institut national de l\'' +
- 'information géographique et forestière" alt="IGN"></a>',
-});
+ // Couche WMTS PLAN IGN v2
+ const rasterSource1 = new WMTS({
+  url: 'https://wxs.ign.fr/essentiels/geoportail/wmts',
+  layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
+  format: 'image/png',
+  matrixSet: 'PM',
+  projection: 'EPSG:3857',
+  tileGrid: tileGrid,
+  style: 'normal',
+  attributions:
+  '<a href="https://www.ign.fr" target="_blank">' +
+  '<img src="https://wxs.ign.fr/static/logos/IGN/IGN.gif" title="Institut national de l\'' +
+  'information géographique et forestière" alt="IGN"></a>',
+ });
 
-var wmts1 = new TileLayer({
- source: rasterSource1,
- maxZoom: 16
-});
+ const wmts1 = new TileLayer({
+  source: rasterSource1,
+  maxZoom: 16,
+ });
 
-// Couche WMTS ORTHO PHOTO
-var rasterSource2 = new WMTS({
- url: 'https://wxs.ign.fr/essentiels/geoportail/wmts',
- layer: 'ORTHOIMAGERY.ORTHOPHOTOS',
- format: 'image/jpeg',
- matrixSet: 'PM',
- projection: 'EPSG:3857',
- tileGrid: tileGrid,
- style: 'normal',
- attributions:
- '<a href="http://www.ign.fr" target="_blank">' +
- '<img src="https://wxs.ign.fr/static/logos/IGN/IGN.gif" title="Institut national de l\'' +
- 'information géographique et forestière" alt="IGN"></a>',
-});
+ // Couche WMTS ORTHO PHOTO
+ const rasterSource2 = new WMTS({
+  url: 'https://wxs.ign.fr/essentiels/geoportail/wmts',
+  layer: 'ORTHOIMAGERY.ORTHOPHOTOS',
+  format: 'image/jpeg',
+  matrixSet: 'PM',
+  projection: 'EPSG:3857',
+  tileGrid: tileGrid,
+  style: 'normal',
+  attributions:
+  '<a href="https://www.ign.fr" target="_blank">' +
+  '<img src="https://wxs.ign.fr/static/logos/IGN/IGN.gif" title="Institut national de l\'' +
+  'information géographique et forestière" alt="IGN"></a>',
+ });
 
-var wmts2 = new TileLayer({
- source: rasterSource2,
- minZoom: 16
-});
+ const wmts2 = new TileLayer({
+  source: rasterSource2,
+  minZoom: 16,
+ });
 
-// Map OpenLayers
-var map = new Map({
- layers: [wmts1, wmts2, wfs],
- overlays: [overlay],
- target: document.getElementById('map'),
- view: new View({
- center: fromLonLat([3.280578, 47.368489]),
- maxZoom: 20,
- zoom: 19,
- }),
-});
+ // Map OpenLayers
+ const map = new Map({
+ layers: [ wmts1, wmts2, wfs ],
+ overlays: [ overlay ],
+ target: document.getElementById('map'),
+ view: new View({
+ center: fromLonLat([ 3.280578, 47.368489 ]),
+ maxZoom: 20,
+ zoom: 19,
+ }),
+ });
+
+ const search = new olExtended.control.SearchEngine({
+ collapsed: false,
+ displayAdvancedSearch: false
+ });
+ map.addControl(search);
 
-// Ouverture infobulle
-map.on('singleclick', function (evt) {
- var coordinate = evt.coordinate;
- var feature = map.forEachFeatureAtPixel(evt.pixel,
- function (feature, layer) {
- return feature;
- });
- if (feature) {
- var props = feature.getProperties();
- var id = feature.getId().replace("batiment.", "");
- var liste = "<center><b>" + id + "</b></center>"
- liste += "<ul>";
- for (const p in props) {
- if (props[p] != null && props[p] != "" && toPrint.includes(p)) {
- var value = props[p]
- if (p == "materiaux_des_murs") value = materiaux_mur[props[p]];
- if (p == "materiaux_de_la_toiture") value = materiaux_toit[props[p]];
- if (value == "INDETERMINE" || value == false) continue;
- liste += "<li><b>" + p + "</b> : " + value + "</li>";
+ // Ouverture infobulle
+ map.on('singleclick', function (evt) {
+ const coordinate = evt.coordinate;
+ const feature = map.forEachFeatureAtPixel(evt.pixel,
+ function (feature) {
+ return feature;
+ });
+ if (feature) {
+ const props = feature.getProperties();
+ const id = feature.getId().replace('batiment.', '');
+ let liste = '<center><b>' + id + '</b></center>';
+ liste += '<ul>';
+ for (const p in props) {
+ if (props[p] && toPrint.includes(p)) {
+ let value = props[p];
+ if (p === 'materiaux_des_murs') value = materiaux_mur[props[p]];
+ if (p === 'materiaux_de_la_toiture') value = materiaux_toit[props[p]];
+ if (value === 'INDETERMINE' || value === false) continue;
+ liste += '<li><b>' + p + '</b> : ' + value + '</li>';
+ }
  }
+ liste += '</ul>';
+ content.innerHTML = liste;
+ overlay.setPosition(coordinate);
  }
- liste += "</ul>";
- content.innerHTML = liste;
- overlay.setPosition(coordinate);
- }
+ });
+}
+
+Services.getConfig({
+ apiKey : 'essentiels',
+ timeOut : 20000,
+ onSuccess : createMap,
+ serverUrl: 'autoconf-https.json',
+ callbackSuffix : '',
 });