OpenLayers 6 - ES6 項目結構

Question

我正在使用帶有 Webpack 的 ES6 中的 OpenLayers 6 進行項目。
這是我的第一個真正的 ES6 項目，我想讓它有條理（並且有點模塊化），但我在使用導入和導出方面遇到了困難。

目前我的結構是：

- all.js
- map/
   - index.js
   - gpx.js

all.js文件是“入口點”。

all.js

import 'ol/ol.css';
import map from './map/index';
import { vector as GPXvector } from './map/gpx';

map.addLayer(GPXvector);

地圖/index.js

import { Map, View } from 'ol';
import { OSM } from 'ol/source';
import { Tile as TileLayer } from 'ol/layer';

const map = new Map({
    layers: [
        new TileLayer({
            source: new OSM()
        })
    ],
    target: 'map',
    view: new View({
        center: [1037749, 5135381],
        zoom: 10
    })
});

export { map as default };

地圖/gpx.js

import { Vector as VectorLayer } from 'ol/layer';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { unByKey } from 'ol/Observable';
import VectorSource from 'ol/source/Vector';
import GPX from 'ol/format/GPX';
import map from './index.js'; // Is that good ??

const style = {
    // [...] Some style here
};

const source = new VectorSource({
    url: 'test.gpx',
    format: new GPX()
});

var onChange = source.on('change', function() {
    if (source.getState() == 'ready') {
        map.getView().fit(source.getExtent()); // Access to "map" from "index.js" HERE
        unByKey(onChange);
    }
});

const vector = new VectorLayer({
    source: source,
    style: function (feature) {
        return style[feature.getGeometry().getType()];
    }
});

export { vector, source };

我想從map/gpx.js文件中訪問map實例（在map/index.js中初始化）（參見源代碼中的注釋）。
但我覺得我正在從all.js中的map/index.js導入map ，它正在導入map/gpx.js ，而它自己也從map/index.js導入map 。
在我看來，這聽起來像是某種“循環”導入，其中處理導入順序會很混亂，例如當我在項目中獲得更多文件時。

另外，如果您對我正確開始使用 ES6 有任何建議，那就太酷了！

編輯 1

我換了別的東西，看看它是否允許更多的粒度。

all.js

import 'ol/ol.css';
import map from './ntrak/index';
import MyGPX from './ntrak/gpx';

const gpx = new MyGPX(map, 'test.gpx');

地圖/gpx.js

import { Vector as VectorLayer } from 'ol/layer';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { unByKey } from 'ol/Observable';
import VectorSource from 'ol/source/Vector';
import GPX from 'ol/format/GPX';

const style = {
    // [...] Some style here
};

const _onSourceChange = function(map, source) {
    if (source.getState() == 'ready') {
        map.getView().fit(source.getExtent());
        unByKey(_onSourceChange);
    }
}

export default class {
    constructor(map, url, fit = true) {
        this.map = map;
        this.url = url;
        this.fit = fit;
        this.loadGPX();
    }

    loadGPX() {
        this.source = new VectorSource({
            url: this.url,
            format: new GPX()
        });

        if (this.fit) {
            this.source.on('change', () => _onSourceChange(this.map, this.source));
        }

        this.vector = new VectorLayer({
            source: this.source,
            style: function(feature) {
                return style[feature.getGeometry().getType()];
            }
        });

        this.map.addLayer(this.vector);
    }
};

我認為這很酷，因為它允許在同一個 map 實例上獲取多個 GPX 向量。
但是，如果我想做更多與我的 GPX 源或向量交互的東西，我將需要每次都傳遞實例，而不是直接導入 GPX 文件。

你怎么看？

Answer 1

您可以使用webpack的CircularDependencyPlugin來跟蹤此類循環依賴關系。
您的示例中沒有循環依賴， import map from './index.js'; // Is that good?? import map from './index.js'; // Is that good?? 沒關系。

您的 es6 代碼對我來說很好，我看到一個var用法（ var onChange =... ），您應該替換它。