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);