jk-map-weight/src/AppNew.vue

<template>
  <div id="app">
    <Map id="map" />
  </div>
</template>

<script>
import Map from "@/components/MapNew";
import $ from 'jquery';

export default {
  name: 'App',
  components: {
    Map,
  },
  mounted(){
    window.CityGIS = (($Core) => {
      var app = {
        debug: false,
        Invoke: (options) => {
          // console.log(options);
          if(!Array.isArray(options))
            options = [options];
          options.forEach(function(item)
          {
            window.CityGIS.InvokeAPI(item.ActionName,item.Parameters);
          });
        },
        InvokeAPI: (methodName, params) => {
          this.InvokeMethod(methodName, params);
        },
        InitInvokeType: () => {
          //如果被嵌入Iframe响应跨域消息
          if (window.CityGIS.hasIframe()) {
            window.addEventListener("message", (evt) => {
              if(evt.data != undefined){
                var commands = JSON.parse(evt.data);
                if(!Array.isArray(commands))
                {
                  commands = [commands]
                }
                commands.forEach(function(command){
                  var Parameters = command.Parameters;
                  if (typeof (Parameters) == "string")
                  {
                    Parameters = eval('(' + command.Parameters + ')');
                  }
                  window.CityGIS.InvokeAPI(command.ActionName, Parameters);
                })
              }
            });
          }
        },
        SendOutMessage: (msg) => {
          msg = JSON.stringify(msg);
          console.log("发送消息" + msg);
          //如果被嵌入Iframe响应跨域消息
          if (window.CityGIS.hasIframe()) {
            return $.when(window.parent.postMessage(msg, "*")).then(function(){
              return "ok";
            });
          }
          else {
            console.error("未嵌入页面,无法通讯");
            return $.when(true).then(function(){
              return "error";
            });
          }
        },
        hasIframe: () => {
          if (self.frameElement == null) {
            return self != top;
          }
          else {
            return self.frameElement.tagName == "IFRAME";
          }
        },
        AppStart: () => {
          window.CityGIS.InitInvokeType();
          //创建地图
          this.$bus.$emit('CreateMap');
          //监听回传信息
          this.$bus.$on('SendMessage', (data) => {
            // console.log(data);
            window.CityGIS.SendOutMessage(data).then((data) => {
              console.log("回传成功:" + JSON.stringify(data));
            },(err) => {
              console.log(err);
            });
          })
        }
      }
      return $.extend($Core, app);
    })(window.CityGIS || {});
    window.CityGIS.AppStart();
  },
  methods: {
    InvokeMethod(methodname, params){
      this.$bus.$emit('InvokeMethod',{
        "methodname": methodname,
        "params": params
      });
    }
  }
}
</script>

<style>
  #app {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  #map{
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
</style>