@pggis/pg-sdk
v3.3.10
Published
PanGu Gis SDK 是基于开源项目 Cesium 进行二次开发的二三维一体的 WebGis 应用框架,该框架优化了部分 Cesium 的使用方式和增添一些通用功能,旨在为开发者快速构建 WebGis 应用。
Downloads
533
Maintainers
Readme
PanGu Gis SDK
PanGu Gis SDK
是基于开源项目Cesium
进行二次开发的二三维一体的WebGis
应用框架,该框架优化了部分Cesium
的使用方式和增添一些通用功能,旨在为开发者快速构建WebGis
应用。
Tips:本框架是 JS+GIS 的框架包。开发者需要有一定的前端技术和 GIS 相关技术
运行示例
npm run build
npm run dev
npm run docs:dev
安装
NPM / YARN
(推荐使用)
NPM / YARN 的方式安装,它能更好地和 webpack
打包工具配合使用。
yarn add @pggis/pg-sdk
-------------------------
npm install @pggis/pg-sdk
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
// 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
// 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
// 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
// vite.config.js
import { defineConfig } from 'vite'
import PG from '@pggis/vite-plugin-dc'
export default defineConfig({
plugins: [PG()],
})
开始
PG.ready().then(() => {
let viewer = new PG.Viewer(divId)
})
示例
| | | | | |:----------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------:| | | | | | | | | | |