# czm-plugin-sample
**Repository Path**: keepsoft_gis/czm-plugin-sample
## Basic Information
- **Project Name**: czm-plugin-sample
- **Description**: czm-plugin三维GIS应用开发示例
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-09-23
- **Last Updated**: 2024-05-29
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# czm-plugin-sample
#### 介绍
该项目是czm-plugin三维开发库功能集锦示例，每个目录包含了相关的功能代码示例，同时也提供了详细的API文档，帮助开发者无需任何
基础亦可独立完成Web三维开发。
#### API结构
1. API在线地址：http://202.96.98.106:8674/czm-plugin/Documentation/
2. API框架结构
#### 目录说明
#### 1、三维模型
1.1 加载航拍的三维倾斜摄影数据，需要处理成3dtiels格式；
1.2 加载第三方建模软件的模型，比如：3d max 或者maya制作的人工模型，需要转换成gltf格式；
#### 2、交互
2.1 鼠标click拾取或者hover拾取返回要素对象；
#### 3、几何体
3.1 一些特殊的三维几何体要素，包括正四面体等等，目前为保留目录；
#### 4、分布式模型：
4.1 加载水文分布式模型结果数据，并动态展示流域流向和流量；
#### 5、图层
5.1 栅格类图层，即各种影像地图服务的添加，比如天地图、ArcGIS在线地图等；
5.2 矢量类图层，即各种几何要素要素的添加，比如点、线、多边形、圆、圆柱体、billboard等；
#### 6、图层遮罩
6.1 凸显某个行政区域；
#### 7、图片播放
7.1 对贴地表的图片的进行轮播切换；
#### 8、地形
8.1 地形加载
#### 9、标绘
9.1 点、先、多边形、圆形、单箭头、燕尾箭头、钳击箭头的绘制；
9.3 点位测量、线段测量、区域面积测量；
#### 10、气泡
9.1 与三维球联动的UI类弹窗；
#### 11、水域
11.1 水域图层的添加；
11.2 水位上升或者下降动画；
11.2 水花效果；
#### 12、漫游
12.1 漫游的开始、暂停、停止；
#### 13、矢量动画
13.1 mark点的呼吸动画；
13.2 mark点的波纹动画；
13.3 mark点的移动动画；
#### 14、管网
14.1 管网数据模型加载与流向动画；
#### 15、组件
15.1 鹰眼
15.2 状态信息，包括当前中心点、海拔
15.3 天空盒
#### 16、流场模拟
16.1 展示二维水动力模型的计算的流向和流速；
#### 17、天气系统
17.1 雨、雪、雾、雷电
#### 18、流场模拟(新)
#### 使用教程
##### 1、插件安装
`npm i @space8/czm-plugin`
##### 2、webpack配置
```javascript
// The path to the czm-plugin
const czmPlugin = 'node_modules/@space8/czm-plugin/';
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
module.exports = {
context: __dirname,
entry: {
app: './index.js'
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'publish'),
sourcePrefix: ''
},
amd: {
// Enable webpack-friendly use of require in czm-plugin
toUrlUndefined: true
},
resolve: {
mainFiles: ['index']
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: ['url-loader']
}],
unknownContextCritical: false,
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
filename: "index.html"
}),
// Copy czm-plugin Assets, Widgets, and Workers to a static directory
new CopyWebpackPlugin({
patterns: [
{from: path.join(czmPlugin, "build/Workers"), to: 'Workers'},
{from: path.join(czmPlugin, "build/ThirdParty"), to: 'ThirdParty'},
{from: path.join(czmPlugin, 'build/Assets'), to: 'Assets'},
{from: path.join(czmPlugin, 'build/Widgets'), to: 'Widgets'}
]
}),
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('')
}),
new NodePolyfillPlugin(),
],
mode: 'development',
devtool: 'source-map',
// development server options
devServer: {
static: {
directory: path.join(__dirname, 'publish'),
},
port: 8080,
}
};
```
#### czm-plugin features
1、czm-plugin是cesium的一个拓展库，兼容原生API，开发者大可以使用原生对象；
2、相比原生我们做了大量的分类、合并等操作，运行效率会比使用原生API高一些；
3、抽象了图层的概念，跟二维GIS类似，使用起来更方便友好；
4、集成了多种功能特效，比如河道水域的流动、矢量动画，管网流向等等；
5、支持webpack、vite等多种打包方式；