Skip to content

流动线

发光墙需要额外调用接口,需要引用插件 PolylineDynamicMaterialProperty.js

HTML
<script src="SDK/Plugins//PolylineDynamicMaterialProperty.js"></script>

流动线存储

JavaScript
//定义一个DataSource用于存储标绘的对象,便于管理
var drawDataSource = new LSGlobe.GeoJsonDataSource("drawDataSource");
//标绘存储对象绘制的标绘要素(线或者面)会保存到该对象中
viewer.dataSources.add(drawDataSource);

流动线绘制

JavaScript
// 定义一个流动线材质
var LineTypeDynamicMaterial = new LSGlobe.PolylineDynamicMaterialProperty({
    // 线的颜色,会和纹理的颜色做叠加。一般线贴图的纹理采用纯白色,这样可以直接设置各种颜色。注意此处透明度一定要设置0-1之间的一个值,代表支持透明纹理,具体值不起实际意义
    color: LSGlobe.Color.fromCssColorString("rgba(255,0,0,0.5)"),
    //速度,值越小速度越快,代表每多少帧,滚动一个纹理的宽度值textureSize。如果需要静止,就设置为1,1代表静态纹理。
    rate: 15,
    // 纹理显示在屏幕上的大小,可以理解为image纹理贴图,沿线的方向,多少个像素重复一次。相当于把纹理的宽度拉伸到这个值。
    textureSize: 200,
    // 线的纹理贴图路径
    // image: '../../images/arrowright5.png'
});
// 构建一个线类型的entity,并添加到drawDataSource
drawDataSource.entities.add({
    //特殊字段该字段会保存下来,可以是字符串也可以是个对象
    name: "北京到云南",
    //线的唯一标识会存储下来,再次加载也不改变,用于查找
    id: "bjtoynPositions",
    polyline: {
        //线点的集合
        positions: bjtoynPositions,
        //线宽,最终和纹理的对应关系,会把纹理的宽度压缩到这个值来显示
        width: 5,
        //线的材质---
        material: LineTypeDynamicMaterial,
        //空间线被遮挡部分样式,仅适用空间线PolylineStressRoadmaterialProperty
        depthFailMaterial: new LSGlobe.PolylineDashMaterialProperty({
            // 如果线被遮挡了之后显示的样式
            color: LSGlobe.Color.fromCssColorString("rgba(255,0,0,0.5)")
        }),
        //是否贴地(空间线必须为false,贴地形、贴模型、贴地表模型必须为true)
        clampToGround: false,
        //TERRAIN:贴地表,CESIUM_3D_TILE:贴模型,BOTH贴模型贴地表,undefined:空间线
        classificationType: undefined
    }
});

Released under the MIT License.