快速开始

可以根据以下步骤快速搭建三维可视化平台，项目搭建主要采用Vite+vue3+ts框架

框架安装

CDN

SDK下载链接

<script src="https://app.larkview.cn/larkexplorersdk/download/release/larkexplorer.min.js"></script>
<link
  rel="stylesheet"
  href="https://app.larkview.cn/larkexplorersdk/download/release/larkexplorer.min.css"
/>

创建应用

框架安装 和 配置 后，就可以开发属于自己的 WebGis 应用了

构建三维容器

<!-- id属性必须赋值，否则无法创建三维场景 -->
<div id="map"></div>

构建三维场景

LarkExplorer.ready({
   baseUrl: '/resources/',
 }).then(()=>{
 const map = new LarkExplorer.Map('map')
 });

运行效果 更多示例

应用配置

受 worker 同源策略影响，在引入SDK框架后，需要手动设定 Cesium 相关的静态资源路径，以保证三维场景能够正常呈现

手动配置 静态资源下载

可以直接将静态资源包resources拷贝到项目public文件夹下，或者自定义拷贝到项目任意目录下，采用相对路径的形式在代码中进行设置

// public文件夹下
baseUrl: '/resources/'

// 自定义路径文件夹下
baseUrl: './相对路径/resources/'

在线资源

可以直接引用在线resources静态资源，同样受worker同源策略影响，需要对其进行手动代理

TIP

resource静态资源地址 https://app.larkview.cn/larkexplorersdk/download/release/resources

代理配置

// vite.config.ts
proxy: {
   '/resources': {
     target: 'https://app.larkview.cn',
     changeOrigin: true,
     rewrite: (path) =>
       path.replace(/^\/resources/, '/larkexplorersdk/download/release/resources'),
   },
 },

静态文件配置

LarkExplorer.ready({
   baseUrl: '/resources/',
 }).then(()=>{
  const map = new LarkExplorer.Map('map')
 });