全部修改架构

src/pages/modules/building.vue

@@ -2,16 +2,8 @@
   <div class="page_container">
     <el-row type="flex" justify="space-between">
       <el-col :span="10"><button class="button_control" :disabled="disabled" @click="addPoint"><p>打点</p></button></el-col>
-      <el-col :span="14">
-        <el-row type="flex" justify="end">
-          <el-button type="primary" icon="el-icon-zoom-in" size="mini" @click="zoomIn">放大</el-button>
-          <el-button type="primary" icon="el-icon-zoom-out" size="mini" @click="zoomOut">缩小</el-button>
-        </el-row>
-      </el-col>
     </el-row>
-    <div class="canvas-container">
-      <canvas id="canvas" ref="canvas" width="1920" height="1080"></canvas>
-    </div>
+    <gl-map></gl-map>
     <el-row type="flex" justify="end">
       <button class="button_control" @click="$router.push('/index/home')"><p>放弃建图</p></button>
       <button class="button_control" style="margin-left: 10px" :disabled="disabled" @click="_stopMapping"><p>结束建图</p></button>
@@ -41,8 +33,13 @@
 </template>
 
 <script>
-import { startMapping, setStation, stopMapping, getLocalMaps, oneClickDeployment, abandonMapping } from '@config/getData.js'
+import GlMap from './gl-map1.vue'
+import { startMapping, setStation, stopMapping, getLocalMaps, oneClickDeployment, abandonMapping } from '../../config/getData.js'
 export default {
+  name: 'ModuleBuilding',
+  components: {
+    GlMap
+  },
   beforeRouteLeave (to, from, next) {
     if (this.needsConfirmation) {
       this.$confirm('是否放弃本次建图?', '提示', {
@@ -305,15 +302,6 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-.canvas-container
-  height calc(100% - 1rem)
-  margin .14rem 0
-  background-color rgba(0, 19, 48, 70%)
-  box-shadow inset 1px 1px 7px 2px #4d9bcd
-  overflow hidden
-#canvas
-  width 100%
-  height 100%
 .message
   min-width 380px
   border 1px solid #e1f3d8