vue2.6 内嵌超图11i发布的场景

StudentEntity

已于 2024-04-10 14:58:25 修改

阅读量354

点赞数 3

分类专栏：超图相关文章标签： vue.js

于 2024-03-26 17:46:05 首次发布

本文链接：https://blog.csdn.net/StudentEntity/article/details/137050965

版权

超图相关专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章描述了如何在Vue项目中集成超图11i的三维场景，包括npm安装依赖、调整HTML和JS引用、配置vue.config.js以及解决场景URL问题的详细步骤。

摘要由CSDN通过智能技术生成

项目需求:若依前后分离版集成超图发布的三维场景,超图版本11i

官方文档写的太简洁了.以前也没用过超图.直接生搬硬套出来,一堆报错,两天的摸索,还好搞出来了.

其中涉及的试错过程就不体现了,直接说成功的配置方式

npm安装依赖;

npm install @supermap/iclient3d-vue-for-webgl

找到安装的依赖,找到包内的Cesium文件夹,复制到项目的public文件下

npm删除第一步安装的vue3的超图依赖,并安装vue2的超图依赖

//删除vue3的超图依赖
npm uninstall @supermap/iclient3d-vue-for-webgl
//安装vue2的超图依赖
npm install @supermap/vue-iclient3d-webgl

修改本地项目public文件夹下的index.html,主要是添加这两句

<link href="/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="/Cesium/Cesium.js"></script>

修改本地项目src下的main.js,主要添加这三句

import  '@supermap/vue-iclient3d-webgl/dist/styles/vue-iclient3d-webgl.min.css';
import VueiClient from '@supermap/vue-iclient3d-webgl';
Vue.use(VueiClient)

修改项目根路径下的vue.config.js,主要添加这段代码

chainWebpack(config) {
//其他不相关代码
...
//主要添加的代码
config.module
      .rule('cur')
      .test(/\.(cur)$/)
      .use('file-loader')
      .loader('file-loader')
      .end();
//其他不相关代码
...
}