vue+supermap三维地图(场景 模型 打包问题 报错)

一. 组件安装

首先本项目使用的是supermap官方为vue提供的组件——SuperMap/Vue-iClient3D-WebGL(点击打开官网)
推荐安装方法:

npm install @supermap/vue-iclient3d-webgl

步骤:

  1. 安装完环境后,需要在node_module/@supermap文件夹中找到Cesium文件夹,将其整个拷贝至最外层pubic文件夹下,然后在index.html中引入cesuim依赖
 
    <link href="./Cesium/Widgets/widgets.css" rel="stylesheet">		
    <script type="text/javascript" src="./Cesium/Cesium.js">script>
  1. 在main.js中引入组件库
// vue-iclient3d-webgl组件库
import '@supermap/vue-iclient3d-webgl/dist/styles/vue-iclient3d-webgl.min.css'
import VueiClient from '@supermap/vue-iclient3d-webgl'
Vue.use(VueiClient)
  1. 在vue.config.js中添加对.cur文件的处理,在chainWebpack(config){}函数中添加
// .cur文件处理器
    config.module
      .rule('url-loader')
      .test(/\.(cur)$/)
      .use('url-loader')
      .loader('url-loader')
      .end()

二. 组件使用

完成上述三个步骤之后就可以在你的.vue文件中使用这个组件包啦,使用方法很简单,直接调用组件即可

 
    <sm-viewer :scene-url="sceneUrl" >
     
     <sm3d-measure />
      <span style="position: absolute;top:7%;left:<

你可能感兴趣的:(vue,web)