EarthSDK CustomPrimitive

自定义图元

new CustomPrimitive()

Extends

Namespaces

Geometry

Members

autoRegisterEditing : boolean

是否自动注册编辑功能
Default Value: false

canvasHeight : number

画布高度,单位像素,为0时表示没有画布
Default Value: 0

canvasWidth : number

画布宽度,单位像素,为0时表示没有画布
Default Value: 0

color : Array.<number>

颜色叠加
Default Value: [1, 1, 1, 1]

colors : array

颜色数组,可选
Default Value: undefined

customParams : array

自定义参数
Default Value: [0, 0, 0, 0]

customProp : string

用来临时存储客户需要的一些信息,方便使用
Inherited From:
Default Value: ''

destroyEvalString : string

销毁时的执行语句,只有在对象销毁时才会执行,方便用来清理随该对象创建时附带创建的资源
有一个内置变量p,表示当前对象。 注意对象的销毁除了使用destroyEvalString,还可以使用 disposers 属性来销毁。
Inherited From:
Default Value: ''
See:

disposers

用来收集资源销毁函数,并在析构时自动调用!
Inherited From:
Example:
// 示例1:
myObject.disposers.push(() => {
    // 此处执行需要销毁的资源
});

// 示例2:
// XE.MVVM.bind的返回值是一个函数,作用是用来解除双向绑定,
// 把它的返回值放到disposer中,那么对象销毁时就会执行解绑操作。
myObject.disposers.push(XE.MVVM.bind(xxx));

// 示例3:
// XE.MVVM.watch的返回值是一个函数,作用是用来取消监视,
// 把它的返回值放到disposer中,那么对象销毁时就会执行取消监视的操作。
myObject.disposers.push(XE.MVVM.watch(xxx));

readonlyearth : Earth

返回该对象的所属earth实例
Inherited From:

enabled : boolean

是否启用
Inherited From:

evalString : string

设置执行语句,
内部有一个内置的变量p,用来指示当前对象。
注意evalString每次进行属性设置都会执行一遍,如果evalString中有创建资源,资源需要记录,避免再次执行后销毁不了。
Inherited From:
Default Value: ''
Example:
myObject.evalString = `
  // 技巧1:p是一个内置变量,可以直接使用
  if (p._div) { // 技巧2:evalString有可能执行多次,这个地方的判断是避免div重复创建!
      return;
  }
  // 创建div
  const div = document.createElement('div');
  p._div = div;

  // 技巧3:可以通过p.earth来获取earth变量
  const earth = p.earth;
  `;
See:

fragmentShaderSource : array

片元shader

readonlyguid : string

对象的唯一标识符
注意,对象一旦创建,guid不可更改!
Inherited From:

imageUrl : string

纹理对应的图像url, 可以是jpg/png/mp4/m3u8格式
警告:一旦imageUrl有值,会导致drawCanvas调用失效!因此使用imageUrl之后,就不要再调用drawCanvas了!
Default Value: ''

indices : array

索引数组,必选
Default Value: [0, 1, 2]

modelMatrix : array

姿态矩阵,可选,如果modelMatrix有值的话,将忽略position和rotation的设置
Default Value: undefined

normals : array

法向数组,可选
Default Value: undefined

objUrl : string

obj文件url,用来直接载入一个obj文件
警告:一旦赋值,positions/normals/sts等属性将不起作用!
Default Value: ''

pass : number

渲染顺次(Cesium.Pass.OPAQUE(7))
目前Cesium的渲染顺序有:
ENVIRONMENT : 0,
COMPUTE : 1,
GLOBE : 2,
TERRAIN_CLASSIFICATION : 3,
CESIUM_3D_TILE : 4,
CESIUM_3D_TILE_CLASSIFICATION : 5,
CESIUM_3D_TILE_CLASSIFICATION_IGNORE_SHOW : 6,
OPAQUE : 7,
TRANSLUCENT : 8,
OVERLAY : 9,
NUMBER_OF_PASSES : 10
Default Value: 7

position : array

位置数组 [经度、纬度、高度]
Default Value: [0, 0, 0]

positions : array

位置数组,必选
Default Value: [0, 0, 0, 1, 0, 0, 0, 0.5, 0]

preUpdateEvalString : string

设置每帧执行语句,和evalString的作用类似
它有三个内置变量,分别是p, scene, time,分别表示当前对象,Cesium的场景对象scene,Cesium的当前帧的时间time 需要注意的是它会每帧执行一次。
Inherited From:
Default Value: ‘’
Example:
myObject.preUpdateEvalString = `
  // 技巧1:p是一个内置变量,可以直接使用,还有scene,time都可以直接使用
     p._angle += 1;
     if (p._angle > 360.0) {
         p._angle = 0.0;
     }
     const angle = p._angle;
     // drawCanvas时使用angle来改变图像内容
     // ...
 `;
See:

primitiveType : number

绘制图元类型
WebGLRenderingContext.POINTS 0
WebGLRenderingContext.LINES 1
WebGLRenderingContext.LINE_LOOP 2
WebGLRenderingContext.LINE_STRIP 3
WebGLRenderingContext.TRIANGLES 4
WebGLRenderingContext.TRIANGLE_STRIP 5
WebGLRenderingContext.TRIANGLE_FAN 6
Default Value: 4

renderState : object

WebGL渲染状态
Default Value: defaultRenderState
Example:
// 默认的WebGL渲染状态如下:
 var defaults = {
     frontFace : WebGL2RenderingContext.CCW, // WindingOrder.COUNTER_CLOCKWISE,
     cull : {
         enabled : false,
         face : WebGL2RenderingContext.BACK, // CullFace.BACK
     },
     lineWidth : 1,
     polygonOffset : {
         enabled : false,
         factor : 0,
         units : 0
     },
     scissorTest : {
         enabled : false,
         rectangle : {
             x : 0,
             y : 0,
             width : 0,
             height : 0
         }
     },
     depthRange : {
         near : 0,
         far : 1
     },
     depthTest : {
         enabled : false,
         func : WebGL2RenderingContext.LESS, // DepthFunction.LESS
     },
     colorMask : {
         red : true,
         green : true,
         blue : true,
         alpha : true
     },
     depthMask : true,
     stencilMask : ~0,
     blending : {
         enabled : false,
         color : {
             red : 0.0,
             green : 0.0,
             blue : 0.0,
             alpha : 0.0
         },
         equationRgb : WebGL2RenderingContext.ADD, // BlendEquation.ADD,
         equationAlpha : WebGL2RenderingContext.ADD, // BlendEquation.ADD,
         functionSourceRgb : WebGL2RenderingContext.ONE, // BlendFunction.ONE,
         functionSourceAlpha : WebGL2RenderingContext.ONE, // BlendFunction.ONE,
         functionDestinationRgb : WebGL2RenderingContext.ZERO, // BlendFunction.ZERO,
         functionDestinationAlpha : WebGL2RenderingContext.ZERO, // BlendFunction.ZERO,
     },
     stencilTest : {
         enabled : false,
         frontFunction : WebGL2RenderingContext.ALWAYS, // StencilFunction.ALWAYS,
         backFunction : WebGL2RenderingContext.ALWAYS, // StencilFunction.ALWAYS,
         reference : 0,
         mask : ~0,
         frontOperation : {
             fail : WebGL2RenderingContext.KEEP, // StencilOperation.KEEP,
             zFail : WebGL2RenderingContext.KEEP, // StencilOperation.KEEP,
             zPass : WebGL2RenderingContext.KEEP, // StencilOperation.KEEP
         },
         backOperation : {
             fail : WebGL2RenderingContext.KEEP, // StencilOperation.KEEP,
             zFail : WebGL2RenderingContext.KEEP, // StencilOperation.KEEP,
             zPass : WebGL2RenderingContext.KEEP, // StencilOperation.KEEP
         }
     },
     sampleCoverage : {
         enabled : false,
         value : 1.0,
         invert : false
     }
 };

rotation : array

姿态数组 [偏航角、俯仰角、翻转角]
Default Value: [0, 0, 0]

scale : array

缩放数组 [x向缩放、y向缩放、z向缩放]
Default Value: [1, 1, 1]

show : boolean

是否在三维窗口中显示
Default Value: true

sts : array

纹理坐标数组,可选
Default Value: undefined

vertexShaderSource : array

顶点shader

xbsjGuid : string|undefined

对象的唯一标识符
警告:该属性已废弃,请不要使用属性,且禁止修改此属性。
如果需要获取guid,请通过guid属性来获取。
Inherited From:

Deprecated: true

readonlyxbsjType : string

获取对象的类型信息
Inherited From:

Methods

staticObj.CustomPrimitive.getRenderState(translucent, closed)

用来获得一个renderState
Name Type Description
translucent boolean 是否透明(是否开启融合)
closed boolean 是否封闭(是否不绘制背面)

destroy()undefined

销毁对象
警告:对象一旦销毁不可再次使用!
警告:挂在场景树上的对象禁止调用destroy方法,只要通过数组函数将其从场景树中移除,就会自动销毁!
Returns:
返回undefined
Inherited From:
Example:
// 使用范例
// 这样写的好处是,一旦对象销毁,会同时将引用该对象的变量同时置为undefined,防止再次使用。
this._myObject = this._myObject && this._myObject.destroy();

drawCanvas(drawFun)

自定义图元会自带一张画布(Canvas),如果需要使用纹理,则可以在这张画布上进行绘制
画布的绘制方法参见:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
Name Type Description
drawFun function 这是一个回调函数,只有一个参数ctx,指示画布的2DContext
Example:
// 示例1:在画布上绘制几何图形
p.canvasWidth = 512;
p.canvasHeight = 512;
p.drawCanvas(ctx => {
    var gradient = ctx.createRadialGradient(256, 256, 0, 256, 256, 256);
    gradient.addColorStop(0.1, "rgba(255, 255, 255, 1.0)");
    gradient.addColorStop(0.2, "rgba(255, 255, 255, 0.0)");
    gradient.addColorStop(0.3, "rgba(255, 255, 255, 0.9)");
    gradient.addColorStop(0.5, "rgba(255, 255, 255, 0.0)");
    gradient.addColorStop(0.9, "rgba(255, 255, 255, 0.2)");
    gradient.addColorStop(1.0, "rgba(255, 255, 255, 1.0)");
    ctx.clearRect(0, 0, 512, 512);
    ctx.beginPath();
    ctx.arc(256, 256, 256, 0, Math.PI * 2, true);
    // ctx.fillStyle = "rgb(0, 155, 255)";
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.restore();
});

// 示例2:加载图像,并绘制到Canvas上
Cesium.Resource.createIfNeeded('./images/city/billboard.png').fetchImage().then(function(image) {
    console.log('image loaded!');
    p.canvasWidth = image.naturalWidth;
    p.canvasHeight = image.naturalHeight;
    p.drawCanvas(ctx => {
        ctx.clearRect(0, 0, 512, 256);
        ctx.drawImage(image, 0, 0);
    });
});

flyTo()

飞入该对象
Inherited From:

isDestroyed()boolean

检查对象是否已被销毁
警告:对象一旦销毁不可再次使用!仅此函数可以调用!
Returns:
对象是否已销毁
Inherited From:

registerEditing()

注册编辑状态,自定义图元初始创建时,不具有creating/positionEditing/rotationEditing属性,不能进行交互操作。如果需要此功能,则需要在创建之后调用此方法。 注意:registerEditing调用之前,对象本身不能有creating/positionEditing/rotationEditing属性,如果之前进行了 xxx.positionEditing = true 等操作,需要先删掉!

toAllJSON()object

数据整个JSOn对象,包括默认值
Returns:
创建的JSON数据对象
Inherited From:

toAllJSONStr()string

转化成JSON字符串,输出全部元素
Returns:
JSON格式化好的字符串
Inherited From:

toJSON()object

转化成一个JSON数据对象
注意:每次都会创建一个新对象!
Returns:
创建的JSON数据对象
Inherited From:

toJSONStr()string

转化成JSON字符串,默认元素不输出
Returns:
JSON格式化好的字符串
Inherited From:

xbsjFromJSON(jsonObject)

通过JSON数据对象来设置属性
Name Type Description
jsonObject *
Inherited From:
Example:
// 创建一个pin对象
const objConfig = {
    "name": 'Pin1',
    "xbsjType": "Pin",
    "position": [1.9017005694855162, 0.5972477268978722, 488.7695178987821],
    "near": 300,
    "show": false,
    evalString,
};
const pin = new XE.Obj.Pin(earth);  
pin.xbsjFromJSON(objConfig);