# ZK-SDK
> ZK-SDK 是基于 Cesium 进行二次开发的2、3D一体 WebGis 应用框架,该框架优化了 Cesium 的使用方式和增添了一些额外功能，旨在为开发者快速构建 WebGis 应用。 ```warning Tips：本框架是 JS+GIS 的框架包。开发者需要有一定的前端技术和 GIS 相关技术 ``` ## 安装 `NPM / YARN` **_`(推荐使用)`_** NPM / YARN 的方式安装，它能更好地和 `webpack` 打包工具配合使用。 ```shell yarn add @gis/zk-sdk ------------------------- npm install @gis/zk-sdk ``` ```js 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` **_`(按需安装)`_** ```shell 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 ``` ```js 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 下载链接](http://139.9.186.136//gitlab/gis/zk-sdk.git) ```html
``` ``` 请将 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` ```js // 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` ```js // 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` ```js // 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'), }, ], }, ]) }, } ``` ## 开始 ```js global.ZK = ZK ZK.ready(() => { let viewer = new ZK.Viewer(divId) // divId 为一个div节点的Id属性值，如果不传入，会无法初始化3D场景 }) ``` ## 示例 [更多>>](http://192.168.1.86:9527/zkhome/#/examples)
