AtThree 组件 1.0

AtThree组件本质就是对iframe进行封装。用于打开三维地图数据，并且能够进行数据交互。

安装

# 安装 1.0.63 以上版本
npm i at-three
# 或
yarn add at-three # 推荐使用

使用

import { AtThree } from 'at-three'

// 全局组件注册
Vue.use(AtThree)

// 局部组件注册 vue组件中添加 components
export default {
 components: {
    AtThree
  }
}

Vue组件

<template>
  <div class="demo-container">
    <!--嵌入at-three"-->
    <at-three :param="param"  ref="atThree" @three-call="threeCall" />
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
        param: {
          url: 'http://192.168.0.240:8166/'
        }
    }
  },
  methods: {
    /**
     * 监听事件
     * msg: {"code":200,"message":"移除图表","result":{"type":"AtScene.ChartLayer.Chart.Remove",param":{"data":true}}}
     *
     * code: 200 正常， 500 异常
     * result: 返回结果 {type: 接口名 ,param: 响应参数}
     */
    threeCall(msg) {
        console.log(msg)
    },
    /**
     *调用图形接口
      */
    callThree() {
        let obj = {}
        // 接口名
        obj.type = 'AtScene.ChartLayer.Chart.Add'
        obj.param = {
            // 请求参数
            data: null,
            type: '2'
        }
        this.$refs.atThree.callThree(obj)
    },
  }
}
</script>

Events

| 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | three-call | 图形系统抛出事件的唯一出口 | { type:'接口名',param:'返回参数' } |

Methods

| 方法名 | 说明 | 参数 | |---------- |-------- |---------- | | callThree | 调用图形系统接口的统一入口 | { type:'接口名',param:'请求参数' } |

Author

gaozhiqian