Update openlayers to v6.5.0 (#651)

* WIP: Update ol. currently at point 'Removal of optional this arguments.' in v5 * Remove of this parameters. * refresh does also clear. * Fix test. * Build openlayers in `postinstall` script. * Remove ability to inherit layers from overlay map. * Use built openlayers version from node_modules for examples. * Remove use of ol.Attribution * call style function with correct parameters * Fix tests and use built ol version * use @geoext/openlayers-legacy * Fix some problems * Add CHANGELOG.md
geoext · May 28, 2021 · b2f4680 · b2f4680
1 parent b4bf341
commit b2f4680
Show file tree

Hide file tree

Showing 43 changed files with 246 additions and 14,529 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,13 @@
+Next Version
+------------
+
+BREAKING CHANGES:
+- The OpenLayers version was updated to v6.5.0. To use this version run `npm i @geoext/openlayers-legacy` and include the
+`ol.js` and `ol.css` files from there.
+- Due to the OpenLayers update the OverviewMap no longer can use the same layers as the main map and always has to be
+provided own layers.
+- One of the bigger changes in OpenLayers is the removal of `opt_this` arguments. If you do not call `un` on the method
+you can simply use `.bind` on the call. It you want to unbind the listener, either store a bound version of the listener
+or store the listenerKey returned by `on` and usw `ol.Observable.unByKey`.
+- Please refer to https://github.com/openlayers/openlayers/releases/tag/v5.0.0 and
+https://github.com/openlayers/openlayers/releases/tag/v6.0.0 for overviews over the OpenLayers changes.
diff --git a/classic/form/field/GeocoderComboBox.js b/classic/form/field/GeocoderComboBox.js
@@ -188,6 +188,8 @@ Ext.define('GeoExt.form.field.GeocoderComboBox', {
     initComponent: function() {
         var me = this;
 
+        me.updateExtraParams = me.updateExtraParams.bind(me);
+
         if (!me.store) {
             me.store = Ext.create('Ext.data.JsonStore', {
                 fields: [
@@ -239,7 +241,7 @@ Ext.define('GeoExt.form.field.GeocoderComboBox', {
      */
     restrictExtent: function() {
         var me = this;
-        me.map.on('moveend', me.updateExtraParams, me);
+        me.map.on('moveend', me.updateExtraParams);
         me.updateExtraParams();
     },
 
@@ -296,7 +298,7 @@ Ext.define('GeoExt.form.field.GeocoderComboBox', {
     unRestrictExtent: function() {
         var me = this;
         // unbinding moveend event
-        me.map.un('moveend', me.updateExtraParams, me);
+        me.map.un('moveend', me.updateExtraParams);
         // cleanup params in store
         me.removeMapExtentParams();
     },

diff --git a/classic/selection/FeatureModelMixin.js b/classic/selection/FeatureModelMixin.js
@@ -31,6 +31,7 @@ Ext.define('GeoExt.selection.FeatureModelMixin', {
             bindComponent: 'bindFeatureModel'
         },
         before: {
+            constructor: 'onConstruct',
             onSelectChange: 'beforeSelectChange'
         }
     },
@@ -111,6 +112,14 @@ Ext.define('GeoExt.selection.FeatureModelMixin', {
      */
     selectedFeatures: null,
 
+    onConstruct: function() {
+        var me = this;
+
+        me.onSelectFeatAdd = me.onSelectFeatAdd.bind(me);
+        me.onSelectFeatRemove = me.onSelectFeatRemove.bind(me);
+        me.onFeatureClick = me.onFeatureClick.bind(me);
+    },
+
     /**
      * Prepare several connected objects once the selection model is ready.
      *
@@ -122,7 +131,7 @@ Ext.define('GeoExt.selection.FeatureModelMixin', {
         me.selectedFeatures = new ol.Collection();
 
         // detect a layer from the store if not passed in
-        if (!me.layer || !me.layer instanceof ol.layer.Vector) {
+        if (!me.layer || !(me.layer instanceof ol.layer.Vector)) {
             var store = me.getStore();
             if (store && store.getLayer && store.getLayer() &&
                 store.getLayer() instanceof ol.layer.Vector) {
@@ -144,14 +153,14 @@ Ext.define('GeoExt.selection.FeatureModelMixin', {
             var me = this;
 
             // change style of selected feature
-            me.selectedFeatures.on('add', me.onSelectFeatAdd, me);
+            me.selectedFeatures.on('add', me.onSelectFeatAdd);
 
             // reset style of no more selected feature
-            me.selectedFeatures.on('remove', me.onSelectFeatRemove, me);
+            me.selectedFeatures.on('remove', me.onSelectFeatRemove);
 
             // create a map click listener for connected vector layer
             if (me.mapSelection && me.layer && me.map) {
-                me.map.on('singleclick', me.onFeatureClick, me);
+                me.map.on('singleclick', me.onFeatureClick);
                 me.mapClickRegistered = true;
             }
             this.bound_ = true;
@@ -169,13 +178,13 @@ Ext.define('GeoExt.selection.FeatureModelMixin', {
 
         // remove 'add' / 'remove' listener from selected feature collection
         if (me.selectedFeatures) {
-            me.selectedFeatures.un('add', me.onSelectFeatAdd, me);
-            me.selectedFeatures.un('remove', me.onSelectFeatRemove, me);
+            me.selectedFeatures.un('add', me.onSelectFeatAdd);
+            me.selectedFeatures.un('remove', me.onSelectFeatRemove);
         }
 
         // remove 'singleclick' listener for connected vector layer
         if (me.mapClickRegistered) {
-            me.map.un('singleclick', me.onFeatureClick, me);
+            me.map.un('singleclick', me.onFeatureClick);
             me.mapClickRegistered = false;
         }
 

diff --git a/examples/component/map.html b/examples/component/map.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>GeoExt.component.Map Example</title>
-    <link rel="stylesheet" type="text/css" href="../lib/ol/ol.css">
+    <link rel="stylesheet" type="text/css" href="../../node_modules/@geoext/openlayers-legacy/dist/ol.css">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css"/>
 </head>
 
@@ -20,7 +20,7 @@
         </p>
     </div>
 
-    <script src="../lib/ol/ol.js"></script>
+    <script src="../../node_modules/@geoext/openlayers-legacy/dist/ol.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
     <script>
         Ext.Loader.setConfig({

diff --git a/examples/component/overviewMap.html b/examples/component/overviewMap.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>GeoExt.component.OverviewMap Example</title>
-    <link rel="stylesheet" type="text/css" href="../lib/ol/ol.css">
+    <link rel="stylesheet" type="text/css" href="../../node_modules/@geoext/openlayers-legacy/dist/ol.css">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css"/>
 </head>
 
@@ -27,7 +27,7 @@
         </p>
     </div>
 
-    <script src="../lib/ol/ol.js"></script>
+    <script src="../../node_modules/@geoext/openlayers-legacy/dist/ol.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
     <script>
             Ext.Loader.setConfig({

diff --git a/examples/component/overviewMap.js b/examples/component/overviewMap.js
@@ -11,31 +11,31 @@ var overviewMap2;
 Ext.application({
     name: 'OverviewMaps',
     launch: function() {
-        var source;
-        var source2;
-        var layer;
+        var layer1;
         var layer2;
+        var layer3;
         var olMap;
         var description;
         var ovMapPanel1;
         var ovMapPanel2;
 
-        source = new ol.source.OSM();
-        layer = new ol.layer.Tile({
-            source: source
+        layer1 = new ol.layer.Tile({
+            source: new ol.source.OSM()
         });
 
-
-        source2 = new ol.source.TileWMS({
-            url: 'https://ows.terrestris.de/osm-gray/service',
-            params: {'LAYERS': 'OSM-WMS', 'TILED': true}
-        });
         layer2 = new ol.layer.Tile({
-            source: source2
+            source: new ol.source.OSM()
+        });
+
+        layer3 = new ol.layer.Tile({
+            source: new ol.source.TileWMS({
+                url: 'https://ows.terrestris.de/osm-gray/service',
+                params: {'LAYERS': 'OSM-WMS', 'TILED': true}
+            })
         });
 
         olMap = new ol.Map({
-            layers: [layer],
+            layers: [layer1],
             interactions: ol.interaction.defaults().extend([
                 new ol.interaction.DragRotateAndZoom()
             ]),
@@ -58,13 +58,14 @@ Ext.application({
         });
 
         overviewMap1 = Ext.create('GeoExt.component.OverviewMap', {
-            parentMap: olMap
+            parentMap: olMap,
+            layers: [layer2]
         });
 
         overviewMap2 = Ext.create('GeoExt.component.OverviewMap', {
             parentMap: olMap,
             magnification: 12,
-            layers: [layer2],
+            layers: [layer3],
             anchorStyle: new ol.style.Style({
                 image: new ol.style.Circle({
                     radius: 7,

diff --git a/examples/features/grid-filter.html b/examples/features/grid-filter.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>Feature Grid with filtering Example</title>
-    <link rel="stylesheet" type="text/css" href="../lib/ol/ol.css">
+    <link rel="stylesheet" type="text/css" href="../../node_modules/@geoext/openlayers-legacy/dist/ol.css">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css"/>
 </head>
 
@@ -30,7 +30,7 @@
         </p>
     </div>
 
-    <script src="../lib/ol/ol.js"></script>
+    <script src="../../node_modules/@geoext/openlayers-legacy/dist/ol.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
     <script>
         Ext.Loader.setConfig({

diff --git a/examples/features/grid-filter.js b/examples/features/grid-filter.js
@@ -85,10 +85,8 @@ Ext.application({
                     'LAYERS': 'dwd:Warngebiete_Kreise',
                     'TILED': true
                 },
-                attributions: [new ol.Attribution({
-                    html: '<a href="https://www.dwd.de">' +
-                        'Copyright: © Deutscher Wetterdienst</a>'
-                })]
+                attributions: ['<a href="https://www.dwd.de">' +
+                        'Copyright: © Deutscher Wetterdienst</a>']
             })
         });
 
@@ -98,10 +96,9 @@ Ext.application({
                     source: new ol.source.TileWMS({
                         url: 'https://ows.terrestris.de/osm-gray/service',
                         params: {'LAYERS': 'OSM-WMS', 'TILED': true},
-                        attributions: [new ol.Attribution({
-                            html: '<a href="https://www.openstreetmap.org/' +
-                            'copyright">OpenStreetMap contributors</a>'
-                        })]
+                        attributions: [
+                            '<a href="https://www.openstreetmap.org/' +
+                            'copyright">OpenStreetMap contributors</a>']
                     })
                 }),
                 wmsLayer,
@@ -176,7 +173,6 @@ Ext.application({
                     });
                     wfsGetFeatureFilter = GeoExt.util.OGCFilter.
                         getOgcWfsFilterFromExtJsFilter(filters, 'And', '2.0.0');
-                    wfsLayer.getSource().clear();
                     wfsLayer.getSource().refresh();
                 }
             }

diff --git a/examples/features/grid-map-selection.html b/examples/features/grid-map-selection.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>Feature Grid Map Selection Example</title>
-    <link rel="stylesheet" type="text/css" href="../lib/ol/ol.css">
+    <link rel="stylesheet" type="text/css" href="../../node_modules/@geoext/openlayers-legacy/dist/ol.css">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css"/>
 </head>
 
@@ -20,7 +20,7 @@
         </p>
     </div>
 
-    <script src="../lib/ol/ol.js"></script>
+    <script src="../../node_modules/@geoext/openlayers-legacy/dist/ol.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
     <script>
         Ext.Loader.setConfig({

diff --git a/examples/features/grid-paging.html b/examples/features/grid-paging.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>WFS Feature Grid with Paging Example</title>
-    <link rel="stylesheet" type="text/css" href="../lib/ol/ol.css">
+    <link rel="stylesheet" type="text/css" href="../../node_modules/@geoext/openlayers-legacy/dist/ol.css">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css"/>
 </head>
 
@@ -22,7 +22,7 @@
         </p>
     </div>
 
-    <script src="../lib/ol/ol.js"></script>
+    <script src="../../node_modules/@geoext/openlayers-legacy/dist/ol.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
     <script>
         Ext.Loader.setConfig({

diff --git a/examples/features/grid-spatial-filter.html b/examples/features/grid-spatial-filter.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>Feature Grid with spatial filtering</title>
-    <link rel="stylesheet" type="text/css" href="../lib/ol/ol.css">
+    <link rel="stylesheet" type="text/css" href="../../node_modules/@geoext/openlayers-legacy/dist/ol.css">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css"/>
 </head>
 
@@ -20,7 +20,7 @@
         </p>
     </div>
 
-    <script src="../lib/ol/ol.js"></script>
+    <script src="../../node_modules/@geoext/openlayers-legacy/dist/ol.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
     <script>
         Ext.Loader.setConfig({

diff --git a/examples/features/grid-spatial-filter.js b/examples/features/grid-spatial-filter.js
@@ -59,10 +59,8 @@ Ext.application({
                     'LAYERS': 'dwd:Warngebiete_Kreise',
                     'TILED': true
                 },
-                attributions: [new ol.Attribution({
-                    html: '<a href="https://www.dwd.de">' +
-                      'Copyright: © Deutscher Wetterdienst</a>'
-                })]
+                attributions: ['<a href="https://www.dwd.de">' +
+                      'Copyright: © Deutscher Wetterdienst</a>']
             })
         });
 
@@ -72,10 +70,9 @@ Ext.application({
                     source: new ol.source.TileWMS({
                         url: 'https://ows.terrestris.de/osm-gray/service',
                         params: {'LAYERS': 'OSM-WMS', 'TILED': true},
-                        attributions: [new ol.Attribution({
-                            html: '<a href="https://www.openstreetmap.org/' +
-                            'copyright">OpenStreetMap contributors</a>'
-                        })]
+                        attributions: [
+                            '<a href="https://www.openstreetmap.org/' +
+                            'copyright">OpenStreetMap contributors</a>']
                     })
                 }),
                 wmsLayer
@@ -91,7 +88,7 @@ Ext.application({
             type: 'Polygon'
         });
         drawQueryInteraction.setActive(false);
-        drawQueryInteraction.on('drawend', this.onDrawEnd, this);
+        drawQueryInteraction.on('drawend', this.onDrawEnd.bind(this));
         olMap.addInteraction(drawQueryInteraction);
 
         // create feature store
@@ -291,8 +288,8 @@ Ext.application({
                 undefined
         });
         drawQueryInteraction.on('drawend',
-            FeatureGridWithSpatialFilter.app.onDrawEnd,
-            FeatureGridWithSpatialFilter.app
+            FeatureGridWithSpatialFilter.app.onDrawEnd
+                .bind(FeatureGridWithSpatialFilter.app)
         );
         olMap.addInteraction(drawQueryInteraction);
     }

diff --git a/examples/features/grid.html b/examples/features/grid.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>Feature Grid Example</title>
-    <link rel="stylesheet" type="text/css" href="../lib/ol/ol.css">
+    <link rel="stylesheet" type="text/css" href="../../node_modules/@geoext/openlayers-legacy/dist/ol.css">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css"/>
 </head>
 
@@ -25,7 +25,7 @@
         </p>
     </div>
 
-    <script src="../lib/ol/ol.js"></script>
+    <script src="../../node_modules/@geoext/openlayers-legacy/dist/ol.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
     <script>
         Ext.Loader.setConfig({

diff --git a/examples/filtered-heatmap/filtered-heatmap.html b/examples/filtered-heatmap/filtered-heatmap.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>Filtered FeatureStore Example</title>
-    <link rel="stylesheet" type="text/css" href="../lib/ol/ol.css">
+    <link rel="stylesheet" type="text/css" href="../../node_modules/@geoext/openlayers-legacy/dist/ol.css">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css"/>
 </head>
 
@@ -20,7 +20,7 @@
         </p>
     </div>
 
-    <script src="../lib/ol/ol.js"></script>
+    <script src="../../node_modules/@geoext/openlayers-legacy/dist/ol.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
     <script>
         Ext.Loader.setConfig({