arcgis-js-api 与 ts 优雅结合使用 (工厂模式+策略模式)

众所周知, arcgis都是ts开发出来的, 打包出来的东西, 却是一言难尽. 必须得用esri-loader加载. 那么. 有没有办法优雅一点呢? 刚学了3天ts, 和arcgis的我放肆的想到!

策略类

enum FactoryStrategy {
    IntegratedMeshLayer = 'esri/layers/IntegratedMeshLayer',
    Map = 'esri/Map',
    SceneView = 'esri/views/SceneView',
    WebScene = 'esri/WebScene'
}
export default FactoryStrategy;

工厂类

import esriLoader from 'esri-loader';
import FactoryStrategy from '../enum/FactoryStrategy';
let map: Map<string, any> = new Map();
export default class FactoryUtils {
    get<T>(name: FactoryStrategy, options: {}): T {
        let newClass = map.get(name);
        return new newClass(options)
    }

    static init() {
        return new Promise((resolve, reject) => {
            let arr: [] = []
            for (let key in FactoryStrategy) {
                // @ts-ignore
                arr.push(FactoryStrategy[key])
            }
            esriLoader.loadModules(arr).then((arr1) => {
                for (let i = 0; i < arr.length; i++) {
                    map.set(arr[i], arr1[i]);
                }
                resolve()
            })
        })
    }
}

使用 (ESRI对象是arcgis提供的ts)

Factory.init().then(() => {
            this.webScene = this.factory.get<ESRI.WebScene>(FactoryStrategy.WebScene, {
                portalItem: {
                    id: "95d51825f62b4b738a3a12d5e518dea3"
                }
            });
            this.map = this.factory.get<ESRI.Map>(FactoryStrategy.Map, mapProperties);
            this.scene = this.factory.get<ESRI.SceneView>(FactoryStrategy.SceneView, {
                container: container,
                map: this.webScene,
                qualityProfile: "high"
            });
            this.scene.on('resize', e => {
                console.log(e, " 复位size")
            })
            this.map.allLayers.on('change', e => {
                console.log(e, ' e')
            })
        })