z-amap-jsapi-loader 1.0.4

package/README.md

@@ -0,0 +1,114 @@
+# z-amap-jsapi-loader
+z-amap-jsapi-loader 是基于高德开放平台官网提供的地图 JSAPI 的加载器amap-jsapi-loader，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法。
+如果你已使用@amap/amap-jsapi-loader,只需将安装的包名替换为z-amap-jsapi-loader
+```
+原安装：npm i @amap/amap-jsapi-loader
+原使用：import AMapLoader from '@amap/amap-jsapi-loader';
+
+改为
+现安装：npm i z-amap-jsapi-loader
+现使用：import AMapLoader from 'z-amap-jsapi-loader';
+```
+
+
+该加载器具有以下特性：
+* 支持以 普通JS 和 npm包 两种方式使用；
+* 有效避免错误异步加载导致的 JSAPI 资源加载不完整问题；
+* 对于加载混用多个版本 JSAPI 的错误用法给予报错处理；
+* 对于不合法加载引用 JSAPI 给予报错处理；
+* 支持指定 JSAPI 版本；
+* 支持插件加载；
+* 允许多次执行加载操作，网络资源不会重复请求，便于大型工程模块管理；
+
+
+# USAGE
+
+## AMapLoader.load方法参数说明
+```js
+AMapLoader.load({
+    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
+    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
+        "version": '1.1',   // AMapUI 缺省 1.1
+        "plugins":[],       // 需要加载的 AMapUI ui插件
+    },
+    "Loca":{                // 是否加载 Loca， 缺省不加载
+        "version": '1.3.2'  // Loca 版本，缺省 1.3.2
+    },
+}).then(()=>{
+    window.AMap.xx;
+    window.AMapUI.xx;
+    window.Loca.xx
+});
+
+```
+
+## AMapUI
+
+AMapUI 用法和官网有一点点区别。通过 AMapUI.xx 来获取组件
+```js
+AMapLoader.load({
+    key: '',//首次load必填
+    version: '2.0',
+    AMapUI: {
+        version: '1.1',
+        plugins: ['overlay/SimpleMarker'],
+    }
+}).then((AMap) => {
+    map = new AMap.Map('container');
+
+    // !!! 通过 AMap.SimpleMarker 获取组件
+    new AMapUI.SimpleMarker({
+        //前景文字
+        iconLabel: 'A',
+        //图标主题
+        iconTheme: 'default',
+        //背景图标样式
+        iconStyle: 'red',
+        map: map,
+        position: map.getCenter()
+    });
+}).catch((e) => {
+    console.error(e);
+});
+```
+
+
+# 使用
+#### 以普通 JS 方式使用 Loader
+尚未发布在线Loader，可将 dist/index.js 复制到项目下
+```
+<script src="../dist/index.js"></script>
+<script>
+    AMapLoader.load({
+        key:'',//首次load必填
+        version:'2.0',
+        plugins:['AMap.Scale']
+    }).then((AMap)=>{
+        map = new AMap.Map('container');
+        map.addControl(new AMap.Scale())
+    }).catch((e)=>{
+        console.error(e);
+    });   
+</script>
+```
+#### 以 NPM 包方式使用 Loader
+安装
+```
+tnpm i z-amap-jsapi-loader --save-dev
+```
+使用
+```
+import AMapLoader from 'z-amap-jsapi-loader';
+
+AMapLoader.load().then((AMap)=>{
+    map = new AMap.Map('container');
+}).catch(e=>{
+    console.log(e);
+})
+
+```
+
+
+

package/dist/index.js

@@ -0,0 +1,11 @@
+'use strict';(function(m,p){"object"===typeof exports&&"undefined"!==typeof module?module.exports=p():"function"===typeof define&&define.amd?define(p):(m=m||self,m.AMapLoader=p())})(this,function(){function m(a){var b=[];a.AMapUI&&b.push(p(a.AMapUI));a.Loca&&b.push(r(a.Loca));return Promise.all(b)}function p(a){return new Promise(function(h,c){var f=[];if(a.plugins)for(var e=0;e<a.plugins.length;e+=1)-1==d.AMapUI.plugins.indexOf(a.plugins[e])&&f.push(a.plugins[e]);if(g.AMapUI===b.failed)c("\u524d\u6b21\u8bf7\u6c42 AMapUI \u5931\u8d25");
+else if(g.AMapUI===b.notload){g.AMapUI=b.loading;d.AMapUI.version=a.version||d.AMapUI.version;e=d.AMapUI.version;var l=document.body||document.head,k=document.createElement("script");k.type="text/javascript";k.src="https://webapi.amap.com/ui/"+e+"/main.js";k.onerror=function(a){g.AMapUI=b.failed;c("\u8bf7\u6c42 AMapUI \u5931\u8d25")};k.onload=function(){g.AMapUI=b.loaded;if(f.length)window.AMapUI.loadUI(f,function(){for(var a=0,b=f.length;a<b;a++){var c=f[a].split("/").slice(-1)[0];window.AMapUI[c]=
+arguments[a]}for(h();n.AMapUI.length;)n.AMapUI.splice(0,1)[0]()});else for(h();n.AMapUI.length;)n.AMapUI.splice(0,1)[0]()};l.appendChild(k)}else g.AMapUI===b.loaded?a.version&&a.version!==d.AMapUI.version?c("\u4e0d\u5141\u8bb8\u591a\u4e2a\u7248\u672c AMapUI \u6df7\u7528"):f.length?window.AMapUI.loadUI(f,function(){for(var a=0,b=f.length;a<b;a++){var c=f[a].split("/").slice(-1)[0];window.AMapUI[c]=arguments[a]}h()}):h():a.version&&a.version!==d.AMapUI.version?c("\u4e0d\u5141\u8bb8\u591a\u4e2a\u7248\u672c AMapUI \u6df7\u7528"):
+n.AMapUI.push(function(a){a?c(a):f.length?window.AMapUI.loadUI(f,function(){for(var a=0,b=f.length;a<b;a++){var c=f[a].split("/").slice(-1)[0];window.AMapUI[c]=arguments[a]}h()}):h()})})}function r(a){return new Promise(function(h,c){if(g.Loca===b.failed)c("\u524d\u6b21\u8bf7\u6c42 Loca \u5931\u8d25");else if(g.Loca===b.notload){g.Loca=b.loading;d.Loca.version=a.version||d.Loca.version;var f=d.Loca.version,e=d.AMap.version.startsWith("2"),l=f.startsWith("2");if(e&&!l||!e&&l)c("JSAPI \u4e0e Loca \u7248\u672c\u4e0d\u5bf9\u5e94\uff01\uff01");
+else { e = d.key; l = document.body || document.head; var k = document.createElement("script"); k.type = "text/javascript"; k.src ="https://map.zlink.org.cn/a/loca?v="+f+"&key="+e;k.onerror=function(a){g.Loca=b.failed;c("\u8bf7\u6c42 AMapUI \u5931\u8d25")};k.onload=function(){g.Loca=b.loaded;for(h();n.Loca.length;)n.Loca.splice(0,1)[0]()};l.appendChild(k)}}else g.Loca===b.loaded?a.version&&a.version!==d.Loca.version?c("\u4e0d\u5141\u8bb8\u591a\u4e2a\u7248\u672c Loca \u6df7\u7528"):h():a.version&&a.version!==d.Loca.version?
+c("\u4e0d\u5141\u8bb8\u591a\u4e2a\u7248\u672c Loca \u6df7\u7528"):n.Loca.push(function(a){a?c(a):c()})})}if(!window)throw Error("AMap JSAPI can only be used in Browser.");var b;(function(a){a.notload="notload";a.loading="loading";a.loaded="loaded";a.failed="failed"})(b||(b={}));var d={key:"",AMap:{version:"1.4.15",plugins:[]},AMapUI:{version:"1.1",plugins:[]},Loca:{version:"1.3.2"}},g={AMap:b.notload,AMapUI:b.notload,Loca:b.notload},n={AMap:[],AMapUI:[],Loca:[]},q=[],t=function(a){"function"==typeof a&&
+(g.AMap===b.loaded?a(window.AMap):q.push(a))};return{load:function(a){return new Promise(function(h,c){if(g.AMap==b.failed)c("");else if(g.AMap==b.notload){var f=a.key,e=a.version,l=a.plugins;f?(window.AMap&&"lbs.amap.com"!==location.host&&c("\u7981\u6b62\u591a\u79cdAPI\u52a0\u8f7d\u65b9\u5f0f\u6df7\u7528"),d.key=f,d.AMap.version=e||d.AMap.version,d.AMap.plugins=l||d.AMap.plugins,g.AMap=b.loading,e=document.body||document.head,window.___onAPILoaded=function(d){delete window.___onAPILoaded;if(d)g.AMap=
+b.failed,c(d);else for(g.AMap=b.loaded,m(a).then(function(){h(window.AMap)})["catch"](c);q.length;)q.splice(0,1)[0]()},l=document.createElement("script"),l.type="text/javascript",l.src="https://map.zlink.org.cn/a/webapi/maps?callback=___onAPILoaded&v="+d.AMap.version+"&key="+f+"&plugin="+d.AMap.plugins.join(","),l.onerror=function(a){g.AMap=b.failed;c(a)},e.appendChild(l)):c("\u8bf7\u586b\u5199key")}else if(g.AMap==b.loaded)if(a.key&&a.key!==d.key)c("\u591a\u4e2a\u4e0d\u4e00\u81f4\u7684 key");else if(a.version&&
+a.version!==d.AMap.version)c("\u4e0d\u5141\u8bb8\u591a\u4e2a\u7248\u672c JSAPI \u6df7\u7528");else{f=[];if(a.plugins)for(e=0;e<a.plugins.length;e+=1)-1==d.AMap.plugins.indexOf(a.plugins[e])&&f.push(a.plugins[e]);if(f.length)window.AMap.plugin(f,function(){m(a).then(function(){h(window.AMap)})["catch"](c)});else m(a).then(function(){h(window.AMap)})["catch"](c)}else if(a.key&&a.key!==d.key)c("\u591a\u4e2a\u4e0d\u4e00\u81f4\u7684 key");else if(a.version&&a.version!==d.AMap.version)c("\u4e0d\u5141\u8bb8\u591a\u4e2a\u7248\u672c JSAPI \u6df7\u7528");
+else{var k=[];if(a.plugins)for(e=0;e<a.plugins.length;e+=1)-1==d.AMap.plugins.indexOf(a.plugins[e])&&k.push(a.plugins[e]);t(function(){if(k.length)window.AMap.plugin(k,function(){m(a).then(function(){h(window.AMap)})["catch"](c)});else m(a).then(function(){h(window.AMap)})["catch"](c)})}})},reset:function(){delete window.AMap;delete window.AMapUI;delete window.Loca;d={key:"",AMap:{version:"1.4.15",plugins:[]},AMapUI:{version:"1.1",plugins:[]},Loca:{version:"1.3.2"}};g={AMap:b.notload,AMapUI:b.notload,
+Loca:b.notload};n={AMap:[],AMapUI:[],Loca:[]}}}})

package/index.d.ts

@@ -0,0 +1,15 @@
+declare var load: (options: {
+    key: string; // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: string; // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins?: string[]; //插件列表
+    // 是否加载 AMapUI，缺省不加载
+    AMapUI?: {
+        version?: string; // AMapUI 缺省 1.1
+        plugins?: string[]; // 需要加载的 AMapUI ui插件
+    };
+    // 是否加载 Loca， 缺省不加载
+    Loca?: {
+        version?: string; // Loca 版本，缺省 1.3.2
+    };
+}) => Promise<any>;
+export { load };

package/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "z-amap-jsapi-loader",
+    "version": "1.0.4",
+    "description": "amap jsapi Loader",
+    "main": "dist/index.js",
+    "types": "index.d.ts",
+    "author": "zlink.org.cn",
+    "license": "MIT",
+    "devDependencies": {
+        "@ampproject/rollup-plugin-closure-compiler": "^0.23.0",
+        "@babel/core": "^7.8.7",
+        "@babel/preset-env": "^7.8.7",
+        "rollup": "^1.32.0",
+        "rollup-plugin-babel": "^4.3.3",
+        "rollup-plugin-server": "^0.7.0",
+        "rollup-plugin-typescript2": "^0.27.1",
+        "typescript": "^3.9.7"
+    }
+}

package/rollup.config.js

@@ -0,0 +1,25 @@
+import server from "rollup-plugin-server";
+import babel from "rollup-plugin-babel";
+import compiler from "@ampproject/rollup-plugin-closure-compiler";
+import rollupTypescript from 'rollup-plugin-typescript2';
+
+export default {
+    input: "src/index.ts",
+    output: {
+        file: "dist/index.js",
+        format: "umd",
+        name: "AMapLoader",
+    },
+    plugins: [
+        rollupTypescript(),
+        babel({
+            presets: [["@babel/env", { targets: { ie: 9 } }]],
+        }),
+        compiler(),
+        server({
+            contentBase: "./",
+            host: "127.0.0.1",
+            port: 3601,
+        }),
+    ],
+};

package/src/global.d.ts

@@ -0,0 +1,5 @@
+declare var AMap: any;
+declare var AMapUI: any;
+declare var Loca: any;
+
+declare var ___onAPILoaded: any;

package/src/index.ts

@@ -0,0 +1,367 @@
+if (!window) {
+    throw Error("AMap JSAPI can only be used in Browser.");
+}
+enum LoadStatus {
+    notload = "notload",
+    loading = "loading",
+    loaded = "loaded",
+    failed = "failed",
+}
+let config = {
+    key: "",
+    AMap: {
+        version: "1.4.15",
+        plugins: [],
+    },
+    AMapUI: {
+        version: "1.1",
+        plugins: [],
+    },
+    Loca: {
+        version: "1.3.2",
+    },
+};
+
+let Status = {
+    AMap: LoadStatus.notload,
+    AMapUI: LoadStatus.notload,
+    Loca: LoadStatus.notload,
+};
+let Callback = {
+    AMap: [],
+    AMapUI: [],
+    Loca: [],
+};
+
+let onloadCBKs = [];
+const onload = function (callback) {
+    if (typeof callback == "function") {
+        if (Status.AMap === LoadStatus.loaded) {
+            callback(window.AMap);
+            return;
+        }
+        onloadCBKs.push(callback);
+    }
+};
+
+interface LoadOption {
+    key: string;
+    version?: string;
+    plugins?: string[];
+    AMapUI?: {
+        version?: string;
+        plugins?: string[];
+    };
+    Loca?: {
+        version?: string;
+    };
+}
+function appendOther(option: LoadOption): Promise<any> {
+    let pros: Promise<void>[] = [];
+    if (option.AMapUI) {
+        pros.push(loadAMapUI(option.AMapUI));
+    }
+    if (option.Loca) {
+        pros.push(loadLoca(option.Loca));
+    }
+    return Promise.all(pros);
+}
+function loadAMapUI(params: { version?: string; plugins?: string[] }): Promise<void> {
+    return new Promise((res, rej) => {
+        const newPlugins: string[] = [];
+        if (params.plugins) {
+            for (var i = 0; i < params.plugins.length; i += 1) {
+                if (config.AMapUI.plugins.indexOf(params.plugins[i]) == -1) {
+                    newPlugins.push(params.plugins[i]);
+                }
+            }
+        }
+        if (Status.AMapUI === LoadStatus.failed) {
+            rej("前次请求 AMapUI 失败");
+        } else if (Status.AMapUI === LoadStatus.notload) {
+            Status.AMapUI = LoadStatus.loading;
+            config.AMapUI.version = params.version || config.AMapUI.version;
+            const version = config.AMapUI.version;
+            const parentNode = document.body || document.head;
+            const script = document.createElement("script");
+            script.type = "text/javascript";
+            script.src = `https://webapi.amap.com/ui/${version}/main.js`;
+
+            script.onerror = (e) => {
+                Status.AMapUI = LoadStatus.failed;
+                rej("请求 AMapUI 失败");
+            };
+            script.onload = () => {
+                Status.AMapUI = LoadStatus.loaded;
+                if (newPlugins.length) {
+                    window.AMapUI.loadUI(newPlugins, function () {
+                        for (let i = 0, len = newPlugins.length; i < len; i++) {
+                            const path = newPlugins[i];
+                            const name = path.split("/").slice(-1)[0];
+                            window.AMapUI[name] = arguments[i];
+                        }
+                        res();
+                        while (Callback.AMapUI.length) {
+                            Callback.AMapUI.splice(0, 1)[0]();
+                        }
+                    });
+                } else {
+                    res();
+                    while (Callback.AMapUI.length) {
+                        Callback.AMapUI.splice(0, 1)[0]();
+                    }
+                }
+            };
+            parentNode.appendChild(script);
+        } else if (Status.AMapUI === LoadStatus.loaded) {
+            if (params.version && params.version !== config.AMapUI.version) {
+                rej("不允许多个版本 AMapUI 混用");
+            } else {
+                if (newPlugins.length) {
+                    window.AMapUI.loadUI(newPlugins, function () {
+                        for (let i = 0, len = newPlugins.length; i < len; i++) {
+                            const path = newPlugins[i];
+                            const name = path.split("/").slice(-1)[0];
+                            window.AMapUI[name] = arguments[i];
+                        }
+                        res();
+                    });
+                } else {
+                    res();
+                }
+            }
+        } else {
+            if (params.version && params.version !== config.AMapUI.version) {
+                rej("不允许多个版本 AMapUI 混用");
+            } else {
+                Callback.AMapUI.push((err) => {
+                    if (err) {
+                        rej(err);
+                    } else {
+                        if (newPlugins.length) {
+                            window.AMapUI.loadUI(newPlugins, function () {
+                                for (let i = 0, len = newPlugins.length; i < len; i++) {
+                                    const path = newPlugins[i];
+                                    const name = path.split("/").slice(-1)[0];
+                                    window.AMapUI[name] = arguments[i];
+                                }
+                                res();
+                            });
+                        } else {
+                            res();
+                        }
+                    }
+                });
+            }
+        }
+    });
+}
+
+function loadLoca(params: { version?: string }): Promise<void> {
+    return new Promise((res, rej) => {
+        if (Status.Loca === LoadStatus.failed) {
+            rej("前次请求 Loca 失败");
+        } else if (Status.Loca === LoadStatus.notload) {
+            Status.Loca = LoadStatus.loading;
+            config.Loca.version = params.version || config.Loca.version;
+            const version = config.Loca.version;
+            const isApiV2 = config.AMap.version.startsWith("2");
+            const isLocaV2 = version.startsWith("2");
+            if ((isApiV2 && !isLocaV2) || (!isApiV2 && isLocaV2)) {
+                rej("JSAPI 与 Loca 版本不对应！！");
+                return;
+            }
+            const key = config.key;
+            const parentNode = document.body || document.head;
+            const script = document.createElement("script");
+            script.type = "text/javascript";
+            script.src = `https://map.zlink.org.cn/a/loca?v=${version}&key=${key}`;
+
+            script.onerror = (e) => {
+                Status.Loca = LoadStatus.failed;
+                rej("请求 AMapUI 失败");
+            };
+            script.onload = () => {
+                Status.Loca = LoadStatus.loaded;
+                res();
+                while (Callback.Loca.length) {
+                    Callback.Loca.splice(0, 1)[0]();
+                }
+            };
+            parentNode.appendChild(script);
+        } else if (Status.Loca === LoadStatus.loaded) {
+            if (params.version && params.version !== config.Loca.version) {
+                rej("不允许多个版本 Loca 混用");
+            } else {
+                res();
+            }
+        } else {
+            if (params.version && params.version !== config.Loca.version) {
+                rej("不允许多个版本 Loca 混用");
+            } else {
+                Callback.Loca.push((err) => {
+                    if (err) {
+                        rej(err);
+                    } else {
+                        rej();
+                    }
+                });
+            }
+        }
+    });
+}
+
+const load = function (options: LoadOption) {
+    return new Promise((resolve, reject) => {
+        if (Status.AMap == LoadStatus.failed) {
+            reject("");
+        } else if (Status.AMap == LoadStatus.notload) {
+            //初次加载
+            let { key, version, plugins } = options;
+            if (!key) {
+                reject("请填写key");
+                return;
+            }
+            if (window.AMap && location.host !== "lbs.amap.com") {
+                reject("禁止多种API加载方式混用");
+            }
+            config.key = key;
+            config.AMap.version = version || config.AMap.version;
+            config.AMap.plugins = plugins || config.AMap.plugins;
+            Status.AMap = LoadStatus.loading;
+
+            const parentNode = document.body || document.head;
+
+            window.___onAPILoaded = function (err) {
+                delete window.___onAPILoaded;
+                if (err) {
+                    Status.AMap = LoadStatus.failed;
+                    reject(err);
+                } else {
+                    Status.AMap = LoadStatus.loaded;
+                    appendOther(options)
+                        .then(() => {
+                            resolve(window.AMap);
+                        })
+                        .catch(reject);
+                    while (onloadCBKs.length) {
+                        onloadCBKs.splice(0, 1)[0]();
+                    }
+                }
+            };
+            const script = document.createElement("script");
+            script.type = "text/javascript";
+
+            script.src =
+                "https://map.zlink.org.cn/a/webapi/maps?callback=___onAPILoaded&v=" +
+                config.AMap.version +
+                "&key=" +
+                key +
+                "&plugin=" +
+                config.AMap.plugins.join(",");
+            script.onerror = (e) => {
+                Status.AMap = LoadStatus.failed;
+                reject(e);
+            };
+            parentNode.appendChild(script);
+        } else if (Status.AMap == LoadStatus.loaded) {
+            //deal multi load
+            if (options.key && options.key !== config.key) {
+                reject("多个不一致的 key");
+                return;
+            }
+            if (options.version && options.version !== config.AMap.version) {
+                reject("不允许多个版本 JSAPI 混用");
+                return;
+            }
+            const newPlugins = [];
+            if (options.plugins) {
+                for (var i = 0; i < options.plugins.length; i += 1) {
+                    if (config.AMap.plugins.indexOf(options.plugins[i]) == -1) {
+                        newPlugins.push(options.plugins[i]);
+                    }
+                }
+            }
+            if (newPlugins.length) {
+                window.AMap.plugin(newPlugins, () => {
+                    appendOther(options)
+                        .then(() => {
+                            resolve(window.AMap);
+                        })
+                        .catch(reject);
+                });
+            } else {
+                appendOther(options)
+                    .then(() => {
+                        resolve(window.AMap);
+                    })
+                    .catch(reject);
+            }
+        } else {
+            // loading
+            if (options.key && options.key !== config.key) {
+                reject("多个不一致的 key");
+                return;
+            }
+            if (options.version && options.version !== config.AMap.version) {
+                reject("不允许多个版本 JSAPI 混用");
+                return;
+            }
+            const newPlugins = [];
+            if (options.plugins) {
+                for (var i = 0; i < options.plugins.length; i += 1) {
+                    if (config.AMap.plugins.indexOf(options.plugins[i]) == -1) {
+                        newPlugins.push(options.plugins[i]);
+                    }
+                }
+            }
+            onload(() => {
+                if (newPlugins.length) {
+                    window.AMap.plugin(newPlugins, () => {
+                        appendOther(options)
+                            .then(() => {
+                                resolve(window.AMap);
+                            })
+                            .catch(reject);
+                    });
+                } else {
+                    appendOther(options)
+                        .then(() => {
+                            resolve(window.AMap);
+                        })
+                        .catch(reject);
+                }
+            });
+        }
+    });
+};
+function reset() {
+    delete window.AMap;
+    delete window.AMapUI;
+    delete window.Loca;
+    config = {
+        key: "",
+        AMap: {
+            version: "1.4.15",
+            plugins: [],
+        },
+        AMapUI: {
+            version: "1.1",
+            plugins: [],
+        },
+        Loca: {
+            version: "1.3.2",
+        },
+    };
+    Status = {
+        AMap: LoadStatus.notload,
+        AMapUI: LoadStatus.notload,
+        Loca: LoadStatus.notload,
+    };
+    Callback = {
+        AMap: [],
+        AMapUI: [],
+        Loca: [],
+    };
+}
+export default { load, reset };