feat(ol-map-adapter): make compatible with ol v9

nextgis · Mar 13, 2024 · 7f684d4 · 7f684d4
1 parent abb01f6
commit 7f684d4
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 283 deletions.
diff --git a/packages/build-tools/lib/rollup.config.js b/packages/build-tools/lib/rollup.config.js
@@ -266,7 +266,7 @@ function createConfig(format, output, plugins = []) {
     });
   }
 
-  function ignoreCertainImports() {
+  function ignoreLibImports() {
     const pattern = /^@nextgis\/[^/]+\/lib\//;
     return {
       name: 'ignore-nextgis-lib-imports',
@@ -333,7 +333,7 @@ function createConfig(format, output, plugins = []) {
       json({
         namedExports: false,
       }),
-      ignoreCertainImports(),
+      ignoreLibImports(),
       alias({
         entries,
       }),

diff --git a/packages/ngw-ol/package.json b/packages/ngw-ol/package.json
@@ -13,21 +13,15 @@
     "@nextgis/ol-map-adapter": "^2.0.0-alpha.0",
     "@types/events": "^3.0.0",
     "events": "*",
-    "ol": "^6.x"
+    "ol": ">=6.0.0"
   },
   "devDependencies": {
     "@nextgis/build-tools": "^2.0.0-alpha.0",
-    "ol": "^6.15.1"
+    "ol": "^9.0.0"
   },
   "buildOptions": {
     "name": "NgwOl",
     "injectCss": true,
-    "alias": [
-      {
-        "find": "^(ol|ol(/.*))$",
-        "replacement": "ol/src$2"
-      }
-    ],
     "formats": [
       "esm-bundler",
       "esm-browser",

diff --git a/packages/ol-map-adapter/package.json b/packages/ol-map-adapter/package.json
@@ -27,12 +27,6 @@
   },
   "buildOptions": {
     "name": "OlMapAdapter",
-    "alias": [
-      {
-        "find": "^(ol|ol(/.*))$",
-        "replacement": "ol/src$2"
-      }
-    ],
     "formats": [
       "esm-bundler",
       "esm-browser",

diff --git a/packages/ol-map-adapter/src/OlMapAdapter.ts b/packages/ol-map-adapter/src/OlMapAdapter.ts
@@ -29,8 +29,8 @@ import type {
   MapOptions,
   ViewOptions,
 } from '@nextgis/webmap';
+import type { MapOptions as OlMapOptions } from 'ol/Map';
 import type MapBrowserEvent from 'ol/MapBrowserEvent';
-import type { MapOptions as OlMapOptions } from 'ol/PluggableMap';
 import type { ViewOptions as OlViewOptions } from 'ol/View';
 import type { FitOptions as OlFitOptions } from 'ol/View';
 import type Control from 'ol/control/Control';

diff --git a/packages/ol-map-adapter/src/controls/createButtonControl.ts b/packages/ol-map-adapter/src/controls/createButtonControl.ts
@@ -1,47 +1,44 @@
 import './createButtonControl.css';
-
 import Control from 'ol/control/Control';
 
 import type { ButtonControlOptions } from '@nextgis/webmap';
 
 export function createButtonControl(options: ButtonControlOptions): Control {
-  const newControl = (function (C) {
-    function NewControl(this: Control) {
-      const button = document.createElement('button');
-      button.className = 'custom-button-control';
-      if (typeof options.html === 'string') {
-        button.innerHTML = options.html;
-      } else if (options.html) {
-        button.appendChild(options.html);
-      }
-      if (typeof options.title === 'string') {
-        button.title = options.title;
+  class NewControl extends Control {
+    constructor() {
+      super({ element: createControlElement(options) });
+      if (options.onClick) {
+        this.element
+          .querySelector('button')!
+          .addEventListener('click', options.onClick, false);
       }
-
-      const element = document.createElement('div');
-      element.className =
-        (options.addClass ? options.addClass + ' ' : '') +
-        'ol-unselectable webmap-ctrl-group';
-      element.appendChild(button);
-
-      C.call(this, { element });
-
-      button.addEventListener('click', () => options.onClick(), false);
     }
 
-    if (C) {
-      NewControl.__proto__ = C;
+    handleRotateNorth() {
+      this.getMap()?.getView().setRotation(0);
     }
-    NewControl.prototype = Object.create(Control && Control.prototype);
-    NewControl.prototype.constructor = NewControl;
-
-    NewControl.prototype.handleRotateNorth = function handleRotateNorth() {
-      this.getMap().getView().setRotation(0);
-    };
+  }
 
-    return NewControl;
-  })(Control);
+  return new NewControl();
+}
 
-  // @ts-ignore
-  return new newControl();
+function createControlElement(options: ButtonControlOptions) {
+  const button = document.createElement('button');
+  button.className = 'custom-button-control';
+  if (typeof options.html === 'string') {
+    button.innerHTML = options.html;
+  } else if (options.html instanceof HTMLElement) {
+    button.appendChild(options.html);
+  }
+  if (typeof options.title === 'string') {
+    button.title = options.title;
+  }
+
+  const element = document.createElement('div');
+  element.className =
+    (options.addClass ? options.addClass + ' ' : '') +
+    'ol-unselectable webmap-ctrl-group';
+  element.appendChild(button);
+
+  return element;
 }
diff --git a/packages/ol-map-adapter/src/controls/createControl.ts b/packages/ol-map-adapter/src/controls/createControl.ts
@@ -11,37 +11,23 @@ export function createControl(
   options: CreateControlOptions = {},
   map: MapAdapter,
 ): Control {
-  const NewControl = (function (C) {
-    function NewControl(this: Control) {
+  class NewControl extends Control {
+    constructor() {
       const element = document.createElement('div');
       element.className =
         (options.addClass ? options.addClass + ' ' : '') +
         'ol-unselectable' +
         (options.bar ? ' webmap-ctrl-group' : '') +
         (options.margin ? ' ol-control-margin' : '');
+
       const content = control.onAdd(map);
       if (content) {
         element.appendChild(content);
       }
 
-      C.call(this, {
-        element,
-      });
-    }
-
-    if (C) {
-      NewControl.__proto__ = C;
+      super({ element });
     }
-    NewControl.prototype = Object.create(Control && Control.prototype);
-    NewControl.prototype.constructor = NewControl;
-
-    NewControl.prototype.handleRotateNorth = function handleRotateNorth() {
-      this.getMap().getView().setRotation(0);
-    };
+  }
 
-    return NewControl;
-  })(Control);
-  // @ts-ignore
   return new NewControl();
-  // return control;
 }
diff --git a/packages/ol-map-adapter/src/layer-adapters/GeoJsonAdapter.ts b/packages/ol-map-adapter/src/layer-adapters/GeoJsonAdapter.ts
@@ -355,7 +355,7 @@ export class GeoJsonAdapter
           const labelStyle = labelStyleFunction(type, {
             // ratio: this.options.ratio,
           });
-          labelStyle.getText().setText(text);
+          labelStyle.getText()?.setText(text);
           style.push(labelStyle);
         }
       }

diff --git a/packages/ol-map-adapter/src/utils/createFeaturePositionOptions.ts b/packages/ol-map-adapter/src/utils/createFeaturePositionOptions.ts
@@ -6,7 +6,6 @@ import VectorSource from 'ol/source/Vector';
 import type { LngLatArray, LngLatBoundsArray } from '@nextgis/utils';
 import type { FeaturePosition } from '@nextgis/webmap';
 import type { Feature } from 'geojson';
-import type Geometry from 'ol/geom/Geometry';
 
 interface GetFeaturePositionOptions {
   feature: Feature | Feature[];
@@ -18,7 +17,7 @@ function featuresSource({
   feature,
   dataProjection,
   featureProjection,
-}: GetFeaturePositionOptions): VectorSource<Geometry> {
+}: GetFeaturePositionOptions): VectorSource {
   const olFeatures = new GeoJSON().readFeatures(
     {
       type: 'FeatureCollection',

diff --git a/packages/ol-map-adapter/src/utils/styleFunction.ts b/packages/ol-map-adapter/src/utils/styleFunction.ts
@@ -3,7 +3,6 @@ import { asArray } from 'ol/color';
 import { Fill, Stroke, Style, Text } from 'ol/style';
 import CircleStyle from 'ol/style/Circle';
 import Icon from 'ol/style/Icon';
-import IconAnchorUnits from 'ol/style/IconAnchorUnits';
 
 import { getFeature } from './utils';
 
@@ -116,10 +115,9 @@ export function styleFunction(
       if (svg) {
         const iconOptions: IconOptions = {
           src: 'data:image/svg+xml,' + encodeURIComponent(svg),
-          anchorXUnits: IconAnchorUnits.PIXELS,
-          anchorYUnits: IconAnchorUnits.PIXELS,
+          anchorXUnits: 'pixels',
+          anchorYUnits: 'pixels',
           anchor: paint.iconAnchor,
-          imgSize: paint.iconSize,
           rotation: paint.rotate,
         };
         style.image = new Icon(iconOptions);

diff --git a/packages/react-ngw-ol/package.json b/packages/react-ngw-ol/package.json
@@ -15,12 +15,6 @@
   "buildOptions": {
     "name": "ReactNgwOl",
     "injectCss": true,
-    "alias": [
-      {
-        "find": "^(ol|ol(/.*))$",
-        "replacement": "ol/src$2"
-      }
-    ],
     "formats": [
       "esm-bundler"
     ]