@gridworld/te-cesium

v1.2.0

Published

10 months ago

北京网格天地股份有限公司基于cesium封装的可视化开发包

0High
0Medium
0Low

gridworld

te-cesium

介绍

北京网格天地软件技术股份有限公司基于cesium封装的可视化开发包

更新日志

2025-05-13 v1.2.0  1. entity图元增加动态和静态选项；
                   2. entity线、线拉伸、多边形、多边形拉伸、圆柱、球、管道增加闪烁接口；
                   3. primitive三角网增加切换双面绘制、法线反向接口
2025-04-18 v1.1.1  1. 优化了点、钻孔、矩形标注图元的绘制；
                   2. 优化了交互绘制线、多边形功能类
2025-04-07 v1.1.0  新增entity集合类
2025-04-01 v1.0.1  修复流动材质不支持最新版本cesium（v1.127.0, 对应webgl2.0）的问题

安装教程

yarn add @gridworld/te-cesium

使用说明

在导入te-cesium前，先导入Cesium，并将Cesium设置为window变量

/**
 * 点图元使用demo
 */
import * as TeCesium from "@gridworld/te-cesium";

// 定义点坐标
let position = Cesium.Cartesian3.fromDegrees(120, 30, 1000);
    
// 构建点entity的构造参数
let options = {
    id: "label-entity", // entity对象id，具有唯一性，必填
    name: "label-entity", // entity的名称，可选，默认为空
    show: true, // 是否显示，可选，默认显示
    position: position, // 图标位置，必填
    color: "rgba(255,0,0,1)", // 点的颜色，可选，默认为白色
    pixelSize: 10, // 
    clampToGround: true, // 是否贴地：true-贴地；false-不贴地，可选，默认为不地
    
    dynamicMode: true, // 是否动态绘制，时变的对象可设为true，开启时显示性能会降低，如果对象基本不变请设为false
    viewer: window.viewer // cesium视图对象，必填
};

// 构建点entity
window.entity = new TeCesium.PointEntity(options);

// 初始化
window.entity.init();

// 视角飞到entity
window.entity.flyTo();

// // 切换显隐
// window.entity.show = true;  // 显示
// window.entity.show = false; // 隐藏

// // 修改颜色
// window.entity.color = "rgba(255,255,0,1)";

// // 修改大小
// window.entity.pixelSize = 20;

// // 销毁entity
// window.entity.destroy();

/**
 * 线图元使用demo
 */
import * as TeCesium from "@gridworld/te-cesium";

// 定义点坐标
let positions = [
    Cesium.Cartesian3.fromDegrees(120, 30, 1000),
    Cesium.Cartesian3.fromDegrees(121, 30, 1000),
    Cesium.Cartesian3.fromDegrees(121, 31, 1000),
]
    
// 构建点entity的构造参数
let options = {
    id: "polyline-entity", // entity对象id，具有唯一性，必填
    name: "polyline-entity", // entity的名称，可选，默认为空
    show: true, // 是否显示，可选，默认显示
    positions: positions, // 位置，必填
    color: "rgba(255,0,0,1)", // 点的颜色，可选，默认为白色
    width: 10, // 线的宽度，可选，默认为5
    clampToGround: true, // 是否贴地：true-贴地；false-不贴地，可选，默认为不贴地
    
    texture: undefined, // 纹理链接，可选，默认为空
    textureRepeatX: 1.0, // 纹理横向重复次数，可选，默认为1
    textureRepeatY: 1.0, // 纹理纵向重复次数，可选，默认为1
    useFlowTexture: false, // 是否使用流动纹理，默认启用textureUrl，为空时将使系统生成的纹理，可选，默认为否
    flowTextureWidth: 1200, // 系统生成的纹理宽度，可选，默认为1200
    flowTextureHeight: 50, // 系统生成的纹理高度，可选，默认为50
    flowTextureLeftColor: "rgba(255, 0, 0, 0.2)", // 系统生成的纹理左侧颜色，选，默认为"rgba(255, 0, 0, 0.2)"
    flowTextureRightColor: "rgba(255, 0, 0, 1.0)", // 系统生成的纹理右侧颜色，选，默认为"rgba(255, 0, 0, 1.0)"
    flowTextureMultiply: 1.0, // 流动纹理流动倍速，可选，默认为1
    flowTextureTranslucent: true, // 流动纹理是否透明，可选，默认为true

    dynamicMode: true, // 是否动态绘制，时变的对象可设为true，开启时显示性能会降低，如果对象基本不变请设为false
    viewer: window.viewer // cesium视图对象，必填
};
// 构建entity
window.entity = new TeCesium.PolylineEntity(options);

// 初始化
window.entity.init();

// 视角飞到entity
window.entity.flyTo();

// // 切换显隐
// window.entity.show = true;  // 显示
// window.entity.show = false; // 隐藏

// // 修改颜色
// window.entity.color = "rgba(255,255,0,1)";

// // 修改宽度
// window.entity.width = 20;

// // 切换使用流动纹理
// window.entity.useFlowTexture = true;

// // 流动纹理使用渐变色
// window.entity.texture = "";

// // 修改渐变色左侧颜色
// window.entity.flowTextureLeftColor = "rgba(255, 0, 255, 0.1)";

// // 修改渐变色右侧颜色
// window.entity.flowTextureRightColor = "rgba(255, 255, 0, 1)";

// // 修改纹理重复次数
// window.entity.textureRepeatX = 10;
// window.entity.textureRepeatY = 2;

// // 修改纹理流动倍速
// window.entity.flowTextureMultiply = 5;


// /**
//  * 使entity闪烁
//  * @param {String} targetColor 目标颜色
//  * @param {Boolean} translucent 是否透明，truetargetColor无效，管道使用自身颜色进行透明度变化false：管道在自身颜色和targetColor之间变化
//  * @param {Number} multiply 闪烁倍速，大于0的小数，大越快
//  * @param {Number} specular 高光值，取值0-1，越大亮
//  * @returns true: 设置成功；false: 设置失败
//  */
// window.entity.applyFlicker("rgba(0,255,0,1)", false, 1.0, 0.8);

// // 取消闪烁
// window.entity.removeFlicker();

// // 销毁entity
// window.entity.destroy();

/**
 * 多边形图元使用demo
 */
import * as TeCesium from "@gridworld/te-cesium";

let positions = [
    Cesium.Cartesian3.fromDegrees(120, 30, 1000),
    Cesium.Cartesian3.fromDegrees(121, 30, 1000),
    Cesium.Cartesian3.fromDegrees(121, 31, 1000),
    Cesium.Cartesian3.fromDegrees(120, 31, 1000)
];

let options = {
    id: "polygon-entity", // ID，具有唯一性，必须
    name: "polygon-entity", // 名称集，可选，默认为空
    clampToGround: false, // 是否贴地，可选，默认为false
    color: "rgba(255, 255, 255, 1)", // 多边形颜色，跟纹理混合，可选，认为白色
    texture: "", // 纹理链接，可选，默认为空
    textureRepeatX: 1, // 纹理横向重复次数，可选，默认为1
    textureRepeatY: 1, // 纹理纵向重复次数，可选，默认为1
    positions: positions, // 坐标集，必填
    
    dynamicMode: true, // 是否动态绘制，时变的对象可设为true，开启时显示能会降低，如果对象基本不变请设为false，默认为true
    viewer: window.viewer // cesium视图对象，必填
}

// 构建entity
window.entity = new PolygonEntity(options);

// 初始化
window.entity.init();

// 视角飞到entity
window.entity.flyTo();

// 切换贴地: 删除entity重新创建

// // 修改颜色
// window.entity.color = "rgba(255, 0, 0, 0.5)";

// // 修改纹理链接
// window.entity.texture = "https://hz.gridworld.com.cn:50443/te3/di/get_file/metal.jpg/";

// // 修改纹理横向重复次数
// window.entity.textureRepeatX = 2;

// // 修改纹理链接
// window.entity.textureRepeatY = 2;


// // 开启闪烁，具体参数参考线图元
// window.entity.applyFlicker("rgba(0,255,0,1)", false, 1.0, 0.8);

// // 取消闪烁
// window.entity.removeFlicker();

// // 销毁entity
// window.entity.destroy();

/**
 * 管道图元使用demo
 */
import * as TeCesium from "@gridworld/te-cesium";

let positions = [
    Cesium.Cartesian3.fromDegrees(120, 30, 1000),
    Cesium.Cartesian3.fromDegrees(121, 30, 1000),
    Cesium.Cartesian3.fromDegrees(120, 31, 1000)
];
let options = {
    id: "pip-entity", // ID，具有唯一性，必须
    name: "pip-entity", // 名称集，可选
    positions, // 坐标集，必填
    shape: "circle", // 截面类型: rectangle矩形；circle圆；arch拱形；three-centered-arch三心拱;special-shape异形，可选，默认为circle
    circleRadius: 1000, // 截面为circle时的半径，单位米，可选，默认为10
    rectLength: 100, // 截面为rectangle时的长度，单位米，可选，默认为100
    rectWidth: 100, // 截面为rectangle时的宽度，单位米，可选，默认为100
    archWidth: 40, // 截面为three-centered-arch时的拱高，单位米，可选，默认为40
    rectLeftWidth: 100, // 截面为special-shape时的左侧宽度，单位米，可选，默认为100
    rectRightWidth: 100, // 截面为special-shape时的右侧宽度，单位米，可选，默认为100
    color: "rgba(255,255,255,1)", // 管道的颜色，可选，默认为白色
    texture: "https://hz.gridworld.com.cn:50443/te3/di/get_file/arrow.png/", // 纹理图片的链接，可选，默认为空
    textureRepeatX: 100, // 纹理横向重复次数，可选，默认为1
    textureRepeatY: 1, // 纹理纵向重复次数，可选，默认为1
    useFlowTexture: true, // 是否使用流动纹理，默认启用texture，为空时将使用系统生成的纹理，可选，默认为否
    flowTextureWidth: 1200, // 系统生成的纹理宽度，可选，默认为1200
    flowTextureHeight: 5, // 系统生成的纹理高度，可选，默认为50
    flowTextureLeftColor: "rgba(255, 255, 0, 0.1)", // 系统生成的纹理左侧颜色，可选，默认为"rgba(255, 0, 0, 0.2)"
    flowTextureRightColor: "rgba(255, 0, 0, 1)", // 系统生成的纹理右侧颜色，可选，默认为"rgba(255, 0, 0, 1.0)"
    flowTextureMultiply: 1, // 流动纹理流动倍速，可选，默认为1
    flowTextureTranslucent: false, // 流动纹理是否透明，可选，默认为true
    viewer: window.viewer // 视图对象，必填
}

// 构建entity
window.entity = new TeCesium.PipEntity(options);

// 初始化
window.entity.init();

// 视角飞到entity
window.entity.flyTo();

// // 修改管道半径
// window.entity.circleRadius = 500;

// // 切换管道横截面类型
// window.entity.shape = "rectangle";

// // 流动纹理使用渐变色
// window.entity.texture = "";

// // 修改渐变色左侧颜色
// window.entity.flowTextureLeftColor = "rgba(255, 0, 255, 0.1)";

// // 修改渐变色右侧颜色
// window.entity.flowTextureRightColor = "rgba(255, 255, 0, 1)";

// // 修改纹理重复次数
// window.entity.textureRepeatX = 10;
// window.entity.textureRepeatY = 2;

// // 流动纹理流动倍速
// window.entity.flowTextureMultiply = 5;


// // 开启闪烁，具体参数参考线图元
// window.entity.applyFlicker("rgba(0,255,0,1)", false, 1.0, 0.8);

// // 取消闪烁
// window.entity.removeFlicker();

// // 销毁entity
// window.entity.destroy();

/**
 * 圆柱图元使用demo
 */
import * as TeCesium from "@gridworld/te-cesium";

let options = {
    id: "cylinder-entity", // entity对象id，具有唯一性，必填
    name: "cylinder-entity", // entity的名称，可选，默认为空
    position: Cesium.Cartesian3.fromDegrees(120, 30, 0), // 位置，必填
    radius: 20,  // 半径，单位米，可选，默认为10
    top: 200, // 顶面高程，单位米，可选，默认为100
    bottom: 100, // 底面高程，单位米，可选，默认为0
    color: "rgba(255,0,0,1)", // 圆柱的颜色，可选，默认为白色
   
    dynamicMode: false, // 是否动态绘制，时变的对象可设为true，开启时显
    viewer: window.viewer // cesium视图对象，必填
}
// 构建entity
window.entity = new TeCesium.CylinderEntity(options);

// 初始化
window.entity.init();

// 视角飞到entity
window.entity.flyTo();

// 修改圆柱位置
// window.entity.position = Cesium.Cartesian3.fromDegrees(120, 31, 0);
// window.entity.flyTo();

// 修改圆柱半径
// window.entity.radius = 10;

// 修改圆柱顶面高程
// window.entity.top = 300;

// 修改圆柱底面高程
// window.entity.bottom = 200;

// 修改圆柱颜色
// window.entity.color = "rgba(255,255,0,0.5)";

// 切换圆柱显隐
// window.entity.show = false;
// window.entity.show = true;

// 销毁圆柱
// window.entity.destroy();

// 开启闪烁，具体参数参考线图元
// window.entity.applyFlicker("rgba(0,255,0,1)", true, 1.0, 0.8);

// 关闭闪烁
// window.entity.removeFlicker();

// 获取圆柱外表面三角网
// window.entity.getTin(); 平常使用

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

te-cesium

介绍

更新日志

安装教程

使用说明