dc-sdk/docs/zh/guide/get-start.md

快速开始

框架安装

npm / yarn / pnpm

npm / yarn / pnpm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm install @dvgis/dc-sdk
# yarn add @dvgis/dc-sdk
# pnpm add @dvgis/dc-sdk

import * as DC from '@dvgis/dc-sdk'
import '@dvgis/dc-sdk/dist/dc.core.min.css'

CDN

下载链接

<script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.min.js"></script>
<link
  href="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.min.css"
  rel="stylesheet"
  type="text/css"
/>

创建应用

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

构建三维容器

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

构建三维场景

DC.ready().then(() => {
  let viewer = new DC.Viewer('viewer-container')
})

运行效果 更多示例

应用配置

由于 DC 框架将 Cesium 静态资源默认路径设置为 ./libs/dc-sdk/resources/，这样需将 Cesium 相关的静态资源文件: Assets、Workers 、ThirdParty 复制到工程的 libs/dc-sdk/resources 目录下以保证三维场景能够正常呈现,也可通过全局函数进行 Cesium 相关的静态资源路基设置

npm / yarn / pnpm

Webpack 工程模板

// webpack.config.js

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const dvgisDist = './node_modules/@dvgis'

module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.join(dvgisDist, 'dc-sdk/dist/resources'),
        to: 'libs/dc-sdk/resources',
      },
    ]),
  ],
}

Vue2.x 工程模板

// vue.config.js

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const dvgisDist = './node_modules/@dvgis'

module.exports = {
  // 其他配置
  chainWebpack: (config) => {
    config.plugin('copy').use(CopyWebpackPlugin, [
      [
        {
          from: path.join(dvgisDist, 'dc-sdk/dist/resources'),
          to: 'libs/dc-sdk/resources',
        },
      ],
    ])
  },
}

Vue3.x 工程模板

// vue.config.js

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const dvgisDist = './node_modules/@dvgis'

module.exports = {
  // 其他配置
  chainWebpack: (config) => {
    config.plugin('copy').use(CopyWebpackPlugin, [
      {
        patterns: [
          {
            from: path.join(dvgisDist, 'dc-sdk/dist/resources'),
            to: path.join(__dirname, 'dist', 'libs/dc-sdk/resources'),
          },
        ],
      },
    ])
  },
}

Vite 工程模板

npm install @dvgis/vite-plugin-dc
# yarn add @dvgis/vite-plugin-dc
# pnpm add @dvgis/vite-plugin-dc

// vite.config.js
import { defineConfig } from 'vite'
import DC from '@dvgis/vite-plugin-dc'
export default defineConfig({
  plugins: [DC()],
})

CDN

直接通过网站下载当前版本的资源文件

:::danger CDN 模式下开发时尽量不要使用 DC 为变量名或者命名空间，避免框架无法正常使用。 :::

代码提示

通过安装代码提示工具包，能够在开发过程中提示和自动完成框架内部的接口，更好地提高开发效率

npm install @dvgis/types -D
# yarn add @dvgis/types -D
# pnpm add @dvgis/types -D