<template>
  <div id="app">
    <!-- <div class="button" @click="handleCenter">改变中心点</div> -->
    <map-wraper :document="document"></map-wraper>
  </div>
</template>

<script>
import axios from "axios";
import MapWraper from "./Map";
export default {
  name: "app",
  data() {
    return {
      template: {},
      document: {}
    };
  },
  components: { MapWraper },
  created() {
    let self = this;
    let map = axios.get("./template/map.json");
    let doc = axios.get("./template/doc_raster.json");
    Promise.all([map, doc]).then(res => {
      console.log(res);
      self.template = res[0].data;
      self.document = res[1].data;
    });
  },
  methods: {
    handleCenter() {
      this.center = [100, 10];
    }
  }
};
</script>

<style lang="css">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
}
</style>