Почему я должен создать бесполезный источник в моей надстройке OpenLayer, чтобы видеть мои рисунки?

Question

Я создаю небольшую аддонную библиотеку Open Layers с некоторым общим стилем и взаимодействием, чтобы использовать ее в некоторых приложениях.

Поэтому я создаю эту библиотеку в Typescript и использую ее для упаковки в Webpack.

Сегодня моя библиотека представляет собой отдельный класс:

import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import GeometryType from 'ol/geom/GeometryType';
import {OlFeaturesStyles} from './Styles';
import {Draw} from 'ol/interaction'


export class OpenLayersAddOn {
  private map: Map;

  private drawingFeaturesVector: VectorLayer;
  private drawingInteraction: Draw;
  private drawingFeaturesSource: VectorSource;

  constructor(map: Map) {
    this.map = map;

    // const foo = new VectorSource();

    this.drawingFeaturesVector = new VectorLayer({
      source: new VectorSource({features: []})
    });
    this.map.addLayer(this.drawingFeaturesVector);
    this.drawingFeaturesSource = this.drawingFeaturesVector.getSource();

    this.drawingInteraction = new Draw({
      source: this.drawingFeaturesSource,
      type: GeometryType.LINE_STRING
    });
    this.map.addInteraction(this.drawingInteraction);
  }
}

Я использую эту библиотеку в компоненте Angular (в другом проекте) следующим образом:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import {OSM} from 'ol/source';
import View from 'ol/View';
import {IxOpenLayersAddOn} from 'ix-openlayers-add-on';
import GeometryType from 'ol/geom/GeometryType';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  private addOn: IxOpenLayersAddOn;
  private map: Map;
  @ViewChild('map', { static: true }) private mapContainer: ElementRef;

  ngAfterViewInit() {

    this.map = new Map({
      layers: [ new TileLayer({source: new OSM()}) ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
    this.map.setTarget(this.mapContainer.nativeElement);
    this.addOn = new IxOpenLayersAddOn(this.map);
  }
}

Когда язапустите мое приложение, я смогу увидеть свою карту OpenLayer и установить взаимодействие рисования «Линия строк».Когда я начинаю рисовать полилинию, я вижу классический рисунок "синяя полилиния", но когда я выхожу из взаимодействия (двойным щелчком мыши), моя полилиния не рисуется на карте.

Теперь, еслиЯ создаю бесполезный VectorSource перед созданием моего слоя (раскомментируя const foo = new VectorSource(); в конструкторе моего аддона) : я могу видеть свои линии на карте при рисовании ...

Так что мойвопрос: Почему я должен добавить бесполезный векторный слой, чтобы показать мой рисунок.

Я не думаю, что это может быть ошибкой OpenLayers (если я попробую тот же кодв простом старом скрипте в файле HTML все в порядке).

Я думаю, что это может быть где-то в моем процессе пакетирования (это моя первая библиотека веб-пакетов)

Вот веб-пакет.config.js проекта дополнения:

const path = require('path');
module.exports = {
    mode: 'development',
    watch: true,
    entry: {
        lib: './index.ts',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle-[name].js',
        library: 'ixOpenLayersAddOnLib',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    plugins: [],
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ],
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },
    externals: [
        function(context, request, callback) {
            console.log('Checking : ' + request);
            if (/^ol.*$/.test(request)) {
                return callback(null, 'umd ' + request);
            }
            callback();
        }
    ],
    }
};

Я проверил, и мой bundle-lib.js довольно маленький, я могу прочитать в нем

/*!**********************************!*\
  !*** ./src/OpenLayersAddOn.ts ***!
  \**********************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nconst Vector_1 = __webpack_require__ ...");

Со всемпередал версию моего OpenLayersAddOn.ts.

и для импровизации OpenLayersrt, они просто объявлены так (потому что я не хочу, чтобы openlayer был частью моего пакета):

eval("module.exports = __WEBPACK_EXTERNAL_MODULE_ol_geom_GeometryType__;\n\n//# sourceURL=webpack://OpenLayersAddOnLib/external_%22ol/geom/GeometryType%22?");

Я также проверил, что версия Openlayer, которую я использую для сборки своей библиотеки, и мои приложениято же самое (5.3.3).

Есть ли у кого-нибудь идея?