npm package: @pggis/pg-kit
Description: pg-sdk 用到的组件库
Author: Lucas Xu
Latest version: 2.6.12

# PanGu Gis SDK 用到的基础库

![logo.png](logo.png)
> `PanGu Gis SDK` 是基于开源项目 `Cesium` 进行二次开发的二三维一体的 `WebGis` 应用框架，该框架优化了部分 `Cesium`
> 的使用方式和增添一些通用功能，旨在为开发者快速构建 `WebGis` 应用。

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

## 运行示例

```shell
  npm run build
  npm run dev
  npm run docs:dev
```

## 安装

`NPM / YARN` **_`(推荐使用)`_**

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

```shell
yarn add @pggis/pg-sdk
-------------------------
npm install @pggis/pg-sdk
```

```js
import * as PG from '@pggis/pg-sdk/'
import '@pggis/pg-sdk/dist/pggis.min.css' 
```

## 配置

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

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

`Webpack`

```js
// webpack.config.js

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

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

`Vue2.x`

[工程模板](https://git.pgio.cn/xulei0857/pggis-vue)

```js
// vue.config.js

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

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

`Vue3.x`

[工程模板](https://git.pgio.cn/xulei0857/pggis-vue-next)

```js
// vue.config.js

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

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

`vite`

[Project Template](https://git.pgio.cn/xulei0857/pggis-vite)

```js
// vite.config.js
import {defineConfig} from 'vite'
import PG from '@pggis/vite-plugin-dc'

export default defineConfig({
  plugins: [PG()],
})
```

## 开始

```js
PG.ready().then(() => {
  let viewer = new PG.Viewer(divId)
})
```

## 示例

|   ![picture](https://docs.pggis.com/examples/previews/baselayer/online/baidu.png)    |   ![picture](http://docs.pggis.com/examples/previews/baselayer/online/tdt.png)    | ![picture](http://docs.pggis.com/examples/previews/baselayer/online/arcgis.png?v=3) |        ![picture](http://docs.pggis.com/examples/previews/mini-scene/china.gif)         |
|:-----------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------:|
|       ![picture](http://docs.pggis.com/examples/previews/mini-scene/dfmz.gif)        |    ![picture](http://docs.pggis.com/examples/previews/mini-scene/factory.gif)     |    ![picture](http://docs.pggis.com/examples/previews/layer/cluster_circle.gif)     | ![picture](http://docs.pggis.com/examples/previews/model/3dtiles/shp_custom_shader.gif) |
| ![picture](http://docs.pggis.com/examples/previews/overlay/polyline/image_trail.gif) | ![picture](http://docs.pggis.com/examples/previews/overlay/others/wall_trail.gif) |   ![picture](http://docs.pggis.com/examples/previews/overlay/primitive/water.gif)   |      ![picture](http://docs.pggis.com/examples/previews/scene-ext/tools/plot.png)       |

[更多>>](http://docs.pggis.com/#/examples)

## 谢谢