本项目是vue3的vue-cli构建的框架,使用的typescript开发,通过自定义材质,实现自定义特殊Marker。Cesium在场景中添加一个Marker可以用Entity或Primitive;针对这类,自定义材质需要不同的方式;项目中包含Primitive自定义材质和Entity自定义材质;
使用vue3+ts开发,扩展通过类继承的方式扩展;
- Primitive:waveGraphics继承Cesium.Primitive,在构造函数里通过super()里的geometryInstances、appearance自定义Primitive Marker;
- Entity:以radarWaveGraphic为例,radarWaveGraphic继承Cesium.Entity,在radarWaveGraphic构造函数中通过material参数,传入自定义材质RadarWaveMaterialProperty的实例,RadarWaveMaterialProperty自定义材质需要重写isConstant、definitionChanged、getType、getValue、equals,同时在构造函数内,向Cesium.Material._materialCache内添加材质的GLSL及参数;
- 思考:RadarWaveMaterialProperty是否可以通过继承Cesium.MaterialProperty方式扩展?还没有试过。。。
- node版本 v14.18.1
- npm版本 6.14.15
- vue-cli 5.0.3
- webpack 5.70.0
- vue 3.2.13
- cesium 1.91.0
- 开发工具 vscode
npm install
npm run serve
npm run build