cesium相关问题

1.在cesium中，3d河流流动的效果，我是如何做得？

• 使用桥接器解决PolylineTrailLink报错问题
• 使用函数式编程解决methods函数中嵌套function失效的问题
• cesium版本：1.68.0
• 速度由uniforms里面的constantSpeed属性
• 河流的图是由传入image参数设置
• 组件中使用

let Cesium = require('cesium/Source/Cesium')
import img999 from "../../../images/waterDiversion/colorsblue.png"
import { PolylineTrailLinkMaterialProperty } from '../../../common/3dRiver2'

// 地图画分段河流线
drawSegmentRiversLine(list) {
    // console.log(list, list[0].positions, 'list444')
    // (6)[{…}, {…}, {…}, {…}, {…}, {…}] 
    // (12)[100.60632466, 26.20926104, 100.60759358, 26.21078145, 100.60729381, 26.21163208, 100.60801317, 26.21307263, 100.60776332, 26.21557423, 100.60872245, 26.21661442] 'list444'
    // color e50000, e5ff80, e5ff00
    list.forEach(ele => {
        let o = ele.lineColor;
        let line = {
            name: "polyline",
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray(ele.positions),
                show: true,
                width: 16,
                material:  new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.fromCssColorString(`#${o}`), img999, 8000),
                clampToGround: true
            }
        };
        this.viewer.entities.add(line)
    })

• 3dRiver2.js文件内容

let Cesium = require('cesium/Source/Cesium')

const PolylineTrailLinkMaterialProperty = (function(){
    /*
        流动纹理线
        color 颜色
        duration 持续时间 毫秒
    */
    function PolylineTrailLinkMaterialProperty(color,imgUrl, duration) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._image = undefined;
        this._colorSubscription = undefined;
        this.color = color;
        this.image = imgUrl;
        this.duration = duration;
        this._time = (new Date()).getTime();
    }
    Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
        isConstant: {
            get: function () {
                return false;
            }
        },
        definitionChanged: {
            get: function () {
                return this._definitionChanged;
            }
        },
        color: Cesium.createPropertyDescriptor('color'),
        image: Cesium.createPropertyDescriptor('image')
    });
    PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
        return 'PolylineTrailLink';
    }
    PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
        if (!Cesium.defined(result)) {
            result = {};
        }
        result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.RED.withAlpha(0.95), result.color);
        result.image = Cesium.Property.getValueOrUndefined(this._image, time);//Cesium.Material.PolylineTrailLinkImage;
        result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
        return result;
    }
    PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
        return this === other ||
            (other instanceof PolylineTrailLinkMaterialProperty &&
                Cesium.Property.equals(this._color, other._color)&&
                Cesium.Property.equals(this._image, other._image))
    }
    Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
    Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
    Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
                                                  {\n\
                                                        czm_material material = czm_getDefaultMaterial(materialInput);\n\
                                                        vec2 st = materialInput.st;\n\
                                                        vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
                                                        material.alpha = colorImage.a * color.a;\n\
                                                        material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
                                                        return material;\n\
                                                    }";
    Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
        fabric: {
            type: Cesium.Material.PolylineTrailLinkType,
            uniforms: {
                color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
                image: Cesium.Material.DefaultImageId,
                time: -20
            },
            source: Cesium.Material.PolylineTrailLinkSource
        },
        translucent: function (material) {
            return true;
        }
    });
})();
export {
    PolylineTrailLinkMaterialProperty
}

2.cesium能加载那些类型模型？适用场景如何？

• cesium支持两种模型方案，使用3D tiles或者加载glTF模型
• 前者适用于展示大区域的建筑模型，后者适用于放置单个模型
• 3D tiles采用了一种称为loD（levels of Detail）分层加载的方法实现模型的快速加载呈现
• 先在视野中加载一个粗糙的模型，然后再慢慢加载整个模型的细节，一点点替换掉这个模型
• 访问这个示例，可以观察到视野中的模型从模糊到逐渐清晰的过程

3.cesium如何处理模型？

• 使用cesiume官方提供的objTo3d-tiles导出瓦片文件
• 每个瓦片文件包含model.b3dm和tileset.json两个文件

4.cesium如何加载3dtiles的格式模型？

• viewer.scene.primitives.add方法
• 传入Cesium.Cesium3DTilese方法实例对象

<div id="cesiumContainer" class="fullSize"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciO...';
var viewer = new Cesium.Viewer('cesiumContainer');
// 加载1个模型文件
let tile = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: modelInfo.url , //模型地址
        preferLeaves: true,
        skipLevels: 4
    })
);
// 监听模型加载 
tile.readyPromise.then(function (argument) {
    console.log('loaded')
})
</script>

5.kml是什么东西？cesium中如何使用？里面有啥？

• kml—一种用在地球浏览器中显示地理数据的格式
• KML 允许您在地图与 globe 上绘制点、线和面，并与他人共享这些信息
• 可以创建KML文件来精确定位位置，添加图像叠加层并以新方式公开丰富的数据
• 文件打开—Google earth pro，图新地球，lsv—白膜文件—绘制多边形
• cesium中使用

drawChengHaiRange(state) {
  var options = {
    camera: state.viewer.scene.camera,
    canvas: state.viewer.scene.canvas,
    clampToGround: true //开启贴地
  };
    state.viewer.dataSources.add(Cesium.KmlDataSource.load('./kml/chenghairange.kml', options))
}

扩展：kmz是啥？

• kmz—压缩的kml文件