优化地图引擎加载方法，提升至全局加载，避免重复地图引擎js文件

README.md

@@ -65,4 +65,16 @@ public/static中，config文件夹下config.js用于定义全局变量文件夹
 
 接口在请求时无论当前接口是否需要token，在请求头中都会添加token，配置在src/utils/request.js中
 
-若开发过程中哪有不妥之处可以跟我沟通，若创建分支开发，模块开发完成后请合并到主分支中
+若开发过程中哪有不妥之处可以跟我沟通，若创建分支开发，模块开发完成后请合并到主分支中
+
+# 更新
+## 0.0.1
+地图开发引擎插件包引入代码集成到App.vue中
+
+并在App.vue的mounted函数中注册一个全局函数loadScripts
+
+loadScripts函数传入参数类型为Aarry，Aarry的值为需要当前地图开发所需插件
+
+config.js中更新各模块引入插件包的数据组织方式
+
+相应修改可见 src/views/example/Map.vue 示例

public/static/config/config.js

@@ -10,15 +10,14 @@ let systemConfig = {
     oauthServiceUrl: "/proxy_oauth",
     // dms地址
     dmsDataProxy: "/proxy_dms",
+    // 引擎基础js
+    scriptMain: "/static/plugins/skyscenery/SkyScenery.js",
 
     /* 以下为各模块定义各自全局变量的位置，包括 example 示例 */
     example: {
-        scriptObj: {
-            main: "/static/plugins/skyscenery/SkyScenery.js",
-            plugins: [
-                "/static/plugins/skyscenery/plugins/CGCS2000ArcGisMapServerImageryProvider.js"
-            ]
-        }
+        scriptArr: [
+            "/static/plugins/skyscenery/plugins/CGCS2000ArcGisMapServerImageryProvider.js"
+        ]
     },
     skszk: {},
     skmh: {},

src/App.vue

@@ -12,6 +12,11 @@ import { defineAsyncComponent } from "vue";
 import api from "@/api/common";
 export default {
   name: "App",
+  data() {
+    return {
+      loadedScripts: [],
+    }
+  },
   components: {
     Header: defineAsyncComponent(() =>
       import("@/components/AppVue/Header.vue")
@@ -20,15 +25,17 @@ export default {
   },
   mounted() {
     let that = this;
-    document.querySelector("#app").style.transform = `scale(${this.getScale()}) translate(-50%, 0%)`
-    document.querySelector("#app").style.height = window.innerHeight / this.getScale() + "px"
-    window.onresize = () => {
-      document.querySelector("#app").style.transform = `scale(${this.getScale()}) translate(-50%, 0%)`
-      document.querySelector("#app").style.height = window.innerHeight / this.getScale() + "px"
-    }
-    this.$nextTick(() => {
-      this.scrollUpdate();
-    });
+    window.loadScripts = this.loadScripts
+    // document.querySelector("#app").style.transform = `scale(${this.getScale()}) translate(-50%, 0%)`
+    // document.querySelector("#app").style.height = window.innerHeight / this.getScale() + "px"
+    // window.onresize = () => {
+    //   document.querySelector("#app").style.transform = `scale(${this.getScale()}) translate(-50%, 0%)`
+    //   document.querySelector("#app").style.height = window.innerHeight / this.getScale() + "px"
+    // }
+    // this.$nextTick(() => {
+    //   this.scrollUpdate();
+    // });
+    // 默认登录
     api.login({
       userName: systemConfig.defaultAccount.userName,
       password: systemConfig.defaultAccount.password,
@@ -64,7 +71,75 @@ export default {
       // const wh = window.innerHeight / 945
       // return ww < wh ? ww : wh;
       return ww
-    }
+    },
+    initScript() {
+      let that = this;
+      window.SkySceneryConfig = {
+        authUrl: systemConfig.oauthServiceUrlOrigin,
+        token: localStorage.getItem("token")
+      };
+      return new Promise((resolve, reject) => {
+        const str = systemConfig.scriptMain;
+        let strArr = str.split("/")
+        if (that.loadedScripts.indexOf(strArr[strArr.length - 1]) == -1) {
+          // SkyScenery.js
+          that.loadedScripts.push(strArr[strArr.length - 1]);
+          that.addScripts(systemConfig.scriptMain).then(function () {
+            resolve();
+          })
+        } else {
+          resolve();
+        }
+      })
+    },
+    loadScripts(scriptArr) {
+      // 初始化 SkyScenery.js
+      let that = this;
+      return new Promise((resolve, reject) => {
+        that.initScript().then(function () {
+          let arr = []
+          for (let i = 0; i < scriptArr.length; i++) {
+            const str = scriptArr[i];
+            let strArr = str.split("/")
+            if (that.loadedScripts.indexOf(strArr[strArr.length - 1]) == -1) {
+              let pro = that.addScripts(str);
+              that.loadedScripts.push(strArr[strArr.length - 1]);
+              arr.push(pro)
+            }
+          }
+          Promise.all(arr).then(function () {
+            resolve()
+          });
+        })
+      })
+    },
+    addScripts(src) {
+      return new Promise((resolve, reject) => {
+        // 创建一个新的script标签
+        var script = document.createElement("script");
+        // 设置script标签的src属性为要引入的JavaScript文件的URL
+        script.src = src;
+        // 将script标签添加到页面的head部分或者其他合适的位置
+        document.head.appendChild(script);
+        if (script.readyState) {
+          // IE
+          script.onreadystatechange = function () {
+            if (
+              script.readyState === "loaded" ||
+              script.readyState === "complete"
+            ) {
+              script.onreadystatechange = null;
+              resolve();
+            }
+          };
+        } else {
+          // 其他浏览器
+          script.onload = function () {
+            resolve();
+          };
+        }
+      });
+    },
   }
 };
 </script>

src/views/example/Map.vue

@@ -6,57 +6,14 @@
 export default {
     name: "Map",
     data() {
-        return {
-            globalvar: systemConfig.example
-        }
     },
     mounted() {
-        window.SkySceneryConfig = {};
-        this.loadScripts();
+        let that = this;
+        loadScripts(systemConfig.example.scriptArr).then(function () {
+            that.creatMap();
+        })
     },
     methods: {
-        loadScripts() {
-            let that = this;
-            SkySceneryConfig = {
-                authUrl: systemConfig.oauthServiceUrlOrigin,
-                token: localStorage.getItem("token")
-            };
-            this.addScripts(this.globalvar.scriptObj.main).then(function () {
-                let arr = that.globalvar.scriptObj.plugins.map(function (src) {
-                    return that.addScripts(src);
-                });
-                Promise.all(arr).then(function () {
-                    that.creatMap();
-                });
-            })
-        },
-        addScripts(src) {
-            return new Promise((resolve, reject) => {
-                // 创建一个新的script标签
-                var script = document.createElement("script");
-                // 设置script标签的src属性为要引入的JavaScript文件的URL
-                script.src = src;
-                // 将script标签添加到页面的head部分或者其他合适的位置
-                document.head.appendChild(script);
-                if (script.readyState) {
-                    // IE
-                    script.onreadystatechange = function () {
-                        if (
-                            script.readyState === "loaded" ||
-                            script.readyState === "complete"
-                        ) {
-                            script.onreadystatechange = null;
-                            resolve();
-                        }
-                    };
-                } else {
-                    // 其他浏览器
-                    script.onload = function () {
-                        resolve();
-                    };
-                }
-            });
-        },
         creatMap() {
             window.viewer = new SkyScenery.Viewer("skysceneryContainer", {
                 animation: false, //是否创建动画小器件，左下角仪表
@@ -110,26 +67,26 @@ export default {
                     roll: 0
                 }
             });
-            // 添加点
-            viewer.entities.add({
-                name: "点",
-                position: SkyScenery.Cartesian3.fromDegrees(121.1, 31), //经纬度转世界坐标
-                point: {
-                    show: true,
-                    color: SkyScenery.Color.GREEN,
-                    pixelSize: 20,
-                    outlineColor: SkyScenery.Color.YELLOW,
-                    outlineWidth: 3
-                },
-                label: {
-                    text: "这里是标签", //设置文字内容
-                    font: "normal 18px 楷体", //设置文字大小和字体
-                    fillColor: SkyScenery.Color.fromCssColorString("#00ff00"), //设置文字填充的颜色
-                    horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
-                    verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
-                    pixelOffset: new SkyScenery.Cartesian2(0, -20)
-                }
-            });
+            // // 添加点
+            // viewer.entities.add({
+            //     name: "点",
+            //     position: SkyScenery.Cartesian3.fromDegrees(121.1, 31), //经纬度转世界坐标
+            //     point: {
+            //         show: true,
+            //         color: SkyScenery.Color.GREEN,
+            //         pixelSize: 20,
+            //         outlineColor: SkyScenery.Color.YELLOW,
+            //         outlineWidth: 3
+            //     },
+            //     label: {
+            //         text: "这里是标签", //设置文字内容
+            //         font: "normal 18px 楷体", //设置文字大小和字体
+            //         fillColor: SkyScenery.Color.fromCssColorString("#00ff00"), //设置文字填充的颜色
+            //         horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
+            //         verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
+            //         pixelOffset: new SkyScenery.Cartesian2(0, -20)
+            //     }
+            // });
         }
     }
 };