GTC-SDK
是基于开源项目Cesium
进行二次开发的二三维一体的WebGIS
应用框架,该框架优化了部分Cesium
的使用方式和增添一些通用功能,旨在为开发者快速构建WebGis
应用。
Tips:本框架是 JS+GIS 的框架包。开发者需要有一定的前端技术和 GIS 相关技术
yarn run build
yarn run server
NPM / YARN
(推荐使用)
NPM / YARN 的方式安装,它能更好地和 webpack
打包工具配合使用。
yarn add @tcgis/gtc-sdk
-------------------------
npm install @tcgis/gtc-sdk
import * as GTC from '@tcgis/gtc-sdk/'
import '@tcgis/gtc-sdk/dist/gtc.min.css'
请将 resources 放置工程根目录 libs/gtc-sdk 下,如果放置到其他目录下,框架将无法正常运行
配置主要用于
NPM / YARN
的方式
由于框架将Cesium静态资源默认路径设置为 ./libs/gtc-sdk/resources/
,这样需将 Cesium
相关的静态资源文件: Assets
、
Workers
、ThirdParty
复制到工程的 libs/gtc-sdk/resources
目录下以保证三维场景能够正常呈现,也可通过全局函数进行
Cesium
相关的静态资源路基设置
Webpack
// webpack.config.js
const path = require('path')
const CopywebpackPlugin = require('copy-webpack-plugin')
const tcgisDist = './node_modules/@tcgis'
module.exports = {
plugins: [
new CopyWebpackPlugin([
{
from: path.join(tcgisDist, 'gtc-sdk/dist/resources'),
to: 'libs/gtc-sdk/resources',
},
]),
],
}
Vue2.x
// vue.config.js
const path = require('path')
const CopywebpackPlugin = require('copy-webpack-plugin')
const tcgisDist = './node_modules/@tcgis'
module.exports = {
// 其他配置
chainWebpack: (config) => {
config.plugin('copy').use(CopywebpackPlugin, [
[
{
from: path.join(dvgisDist, 'gtc-sdk/dist/resources'),
to: 'libs/gtc-sdk/resources',
},
],
])
},
}
Vue3.x
// vue.config.js
const path = require('path')
const CopywebpackPlugin = require('copy-webpack-plugin')
const tcgisDist = './node_modules/@tcgis'
module.exports = {
// 其他配置
chainWebpack: (config) => {
config.plugin('copy').use(CopywebpackPlugin, [
{
patterns: [
{
from: path.join(tcgisDist, 'gtc-sdk/dist/resources'),
to: path.join(__dirname, 'dist', 'libs/gtc-sdk/resources'),
},
],
},
])
},
}
vite
// vite.config.js
import { defineConfig } from 'vite'
import GTC from '@tcgis/vite-plugin-gtc'
export default defineConfig({
plugins: [GTC()],
})
GTC.ready().then(() => {
let viewer = new GTC.Viewer(divId)
})