ZK-SDK

ZK-SDK 是基于 Cesium 进行二次开发的2、3D一体 WebGis 应用框架,该框架优化了 Cesium 的使用方式和增添了一些额外功能，旨在为开发者快速构建 WebGis 应用。

Tips：本框架是 JS+GIS 的框架包。开发者需要有一定的前端技术和 GIS 相关技术

安装

NPM / YARN (推荐使用)

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

yarn add @gis/zk-sdk
-------------------------
npm install @gis/zk-sdk

import ZK from '@gis/zk-sdk/dist/zk.base.min' //基础包
import ZkChart from '@gis/zk-sdk/dist/zk.chart.min' //chart包
import ZkMapv from '@gis/zk-sdk/dist/zk.mapv.min' //mapv包
import '@gis/zk-sdk/dist/zk.core.min.css' // 主要样式

NPM / YARN (按需安装)

yarn add @gis/zk-base
yarn add @gis/zk-chart
yarn add @gis/zk-mapv
-------------------------
npm install @gis/zk-base
npm install @gis/zk-chart
npm install @gis/zk-mapv

import ZK from '@gis/zk-base' //基础包
import ZkChart from '@gis/zk-chart' //chart包
import ZkMapv from '@gis/zk-mapv' //mapv包
import '@gis/zk-sdk/dist/zk.base.min.css' // 主要样式

Html

Resources 下载链接

<!--基础包-->
<script src="zk.base.min.js"></script>
<!--chart包-->
<script src="zk.chart.min.js"></script>
<!--mapv包-->
<script src="zk.mapv.min.js"></script>
<!--主要样式-->
<link
  href="zk.base.min.css"
  rel="stylesheet"
  type="text/css"
/>

请将 resources 放置工程根目录 libs/zk-sdk 下，如果放置到其他目录下，框架将无法正常运行

配置

配置主要用于 NPM / YARN 的方式

由于 ZK 框架中将 CESIUM_BASE_URL 设置为 JSON.stringify('./libs/zk-sdk/resources/')，这样需将 Cesium 相关的静态资源文件: Assets、Workers 、ThirdParty 复制到工程的 libs/zk-sdk/resources 目录下以保证三维场景能够正常呈现

Webpack

// webpack.config.js

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

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

Vue2.x

// vue.config.js

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

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

Vue3.x

// vue.config.js

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

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

开始

global.ZK = ZK
ZK.ready(() => {
  let viewer = new ZK.Viewer(divId) // divId 为一个div节点的Id属性值，如果不传入，会无法初始化3D场景
})

示例

更多>>