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

最新推荐文章于 2023-04-05 18:09:25 发布

原创最新推荐文章于 2023-04-05 18:09:25 发布 · 701 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#gis #arcgis #webgl #js #ts

arcgis 专栏收录该内容

1 篇文章

订阅专栏

博客围绕ArcGIS与TS开发展开，提到ArcGIS由TS开发，但打包情况不佳，需用esri - loader加载，作者思考能否有更优雅的方式，还提及策略类、工厂类以及使用ESRI对象（ArcGIS提供的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')
            })
        })