style:宗地图

+<!--
+ * @Description: 
+ * @Autor: renchao
+ * @LastEditTime: 2023-06-01 09:48:15
+-->
 <template>
-  <div ref="canvas"></div>
+  <canvas id="mxcad">
+  </canvas>
 </template>
-
 <script>
-  import * as THREE from 'three'
-  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-  import { VueThreejs } from 'vue-threejs'
-
+  import Mx from "mxdraw"
   export default {
-    mixins: [VueThreejs],
-
     mounted () {
-      this.initCADViewer()
-    },
-
-    methods: {
-      initCADViewer () {
-        const container = this.$refs.canvas
-
-        // 创建场景
-        const scene = new THREE.Scene()
-
-        // 创建相机
-        const camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 0.1, 1000)
-        camera.position.set(0, 0, 10)
-
-        // 创建渲染器
-        const renderer = new THREE.WebGLRenderer({ antialias: true })
-        renderer.setSize(container.offsetWidth, container.offsetHeight)
-        container.appendChild(renderer.domElement)
-
-        // 添加灯光
-        const light = new THREE.DirectionalLight(0xffffff, 1)
-        light.position.set(0, 0, 1)
-        scene.add(light)
-
-        // 加载CAD文件
-        const loader = new GLTFLoader()
-        loader.load('./cad.dwg', (gltf) => {
-          scene.add(gltf.scene)
-          renderer.render(scene, camera)
+      // 动态加载 js库核心代码
+      Mx.loadCoreCode().then(() => {
+        // Mx.MxFun.setMxServer("ws://localhost:5090") // 开启socket通信 可编辑图纸
+        // 创建控件对象
+        Mx.MxFun.createMxObject({
+          canvasId: "mxcad", // canvas元素的id
+          cadFile: "/buf/hhhh.dwg", // http方式(预览): 加载public/demo文件夹下转换后的图纸
+          // cadFile: "test2.dwg", //  socket通信方式请直接提供图纸名称 如：text.dwg
+          callback: (mxDraw, {
+            canvas,
+            canvasParent
+          }) => {
+            // 可以拿到canvas元素和它的父级元素
+            console.log(canvas, canvasParent)
+            console.log(mxDraw)
+            // 拿到图层数据
+            mxDraw.addEvent('uiSetLayerData', (listLayer) => {
+              console.log(listLayer)
+            })
+          },
+          isNewFile: true // 是否新建文件
         })
-
-        // 动画循环
-        const animate = () => {
-          requestAnimationFrame(animate)
-          renderer.render(scene, camera)
-        }
-        animate()
-      }
+      })
     }
   }
 </script>
-
-<style>
-  div {
+<style scoped lang='scss'>
+  #cad-container {
     width: 100%;
     height: 100%;
   }

-<!--
- * @Description: 
- * @Autor: renchao
- * @LastEditTime: 2023-06-01 09:58:47
--->
-<template>
-  <canvas id="mxcad">
-  </canvas>
-</template>
-<script>
-  import Mx from "mxdraw"
-  export default {
-    mounted () {
-      // 动态加载 js库核心代码
-      Mx.loadCoreCode().then(() => {
-        // Mx.MxFun.setMxServer("ws://localhost:5090") // 开启socket通信 可编辑图纸
-        // 创建控件对象
-        Mx.MxFun.createMxObject({
-          canvasId: "mxcad", // canvas元素的id
-          cadFile: "/buf/hhhh.dwg", // http方式(预览): 加载public/demo文件夹下转换后的图纸
-          // cadFile: "test2.dwg", //  socket通信方式请直接提供图纸名称 如：text.dwg
-          callback: (mxDraw, {
-            canvas,
-            canvasParent
-          }) => {
-            // 可以拿到canvas元素和它的父级元素
-            console.log(canvas, canvasParent)
-            console.log(mxDraw)
-            // 拿到图层数据
-            mxDraw.addEvent('uiSetLayerData', (listLayer) => {
-              console.log(listLayer)
-            })
-          },
-          isNewFile: true // 是否新建文件
-        })
-      })
-    }
-  }
-</script>
-<style scoped lang='scss'>
-  #cad-container {
-    width: 100%;
-    height: 100%;
-  }
-</style>
\ No newline at end of file