QuickStart 开发包下载

okay3d框架 API文档

在阅读API之前,您至少应该了解okay3d框架.


创建Map

框架的核心静态方法,它用来在页面中创建地图.

使用示例

okay3d.createMap({
    id: 'cesiumContainer',
    url: "config.json",
    success: function (viewer, jsondata) {//地图成功加载完成后执行
        
    }
});查看运行效果 » 

创建地图

创建示例 说明
okay3d.createMap(<okay3dMap options> options) 将地图部署在给定ID的DIV容器中,并设置地图的选项.

Options参数选项

Option参数 参数类型 默认值 说明
id String 必须传入 地图Div容器的id。
url String url或data参数必须有一个有值 框架规定规范的地图配置信息的Json文件url地址(该json文件中有map3d节点)
data Object url或data参数必须有一个有值 框架规定规范的地图配置信息的Json文件Object对象(只需要类似config.json中的map3d节点数据即可)
success function null

地图创建完成后的回调函数.

success: function (viewer, jsondata) {
    //viewer    为Cesium规范的viewer地图对象
    //gisdata   为地图创建完成后的一些有用的对象集合,如控件、图层、配置等信息
    //jsondata  为url或data参数传入后读取到的json数据对象
}
serverURL String 会替换图层中配置的url地址中的$serverURL$参数为该值,用于统一配置url中GIS服务器的ip和端口的变量,方便部署时修改ip。
* * * 支持所有config.json中可以配置的属性 ,此处优秀级高于config.josn,会覆盖config.json中的设置。
Option参数 参数类型 默认值 说明
* * * 支持所有Cesium.Viewer的参数,具体请参阅 Cesium API

ViewerEx扩展类

实例化完成viewer后,SDK自动会在viewer下扩展一个命名为okay3d的实例化的okay3d.ViewerEx实体类,可以直接按viewer.okay3d.*来使用。 该类包含了对viewer的一些扩展方法或处理,包含坐标转换、popup、tooltip、事件、定位等。 okay3d.ViewerEx 具有以下属性及方法:

属性

属性名 返回值 说明
config Object

获取createMap时传入的url或data中的相关参数属性值。

keyboardRoam keyboardRoam

键盘漫游对象。(详见后面keyboardRoam类介绍)

location location

下侧 鼠标位置信息状态栏 对象。(详见后面location类介绍)

popup popup

鼠标单击信息框处理类。(详见后面popup类介绍)

tooltip tooltip

鼠标悬浮提示信息框处理类。(详见后面tooltip类介绍)

contextmenu contextmenu

右键菜单管理类对象。(详见后面contextmenu类介绍)

contextmenuItems [Object]

右击地图时,右键菜单项 ,数组内部对应格式示例(children可以配置二级):

{
    text: '开启深度监测',
    iconCls: 'fa fa-eye-slash',
    visible: function () {//非必须,此属性回调来控制动态显示隐藏
        return !viewer.scene.globe.depthTestAgainstTerrain
    },
    callback: function (e) {//单击菜单后的事件回调
        viewer.scene.globe.depthTestAgainstTerrain = true;
    }
} 
defaultContextmenuItems 【只读】 [Object]

内部绑定的默认右键菜单

draw 【只读】 okay3d.Draw

内部绑定的内置已经实例化的Draw对象,方便简单场景下使用绘制矢量对象

方法

方法名 返回值 说明
addOperationalLayer(Object options) BaseLayer图层

绑定图层管理,添加内部封装的BaseLayer图层到OperationalLayer进行图层控制

removeOperationalLayer(Number id)

移除图层控制

getCenter(Boolean isToWgs?) Object

提取屏幕中心点坐标,返回值示例:{ "y": 31.787488, "x": 117.222228, "z": 229 }。ps:同point类方法。

当地球是高德等gcj坐标时,isToWgs设置是否转换为wgs84坐标

getExtent(Object opts?) Object

获取当前地球的视域边界{xmin: 113.23422, xmax: 125.23452, ymin: 30.23436, ymax: 33.234252}。ps:同point类方法。

支持opts:{scale:缩放比例}

getCameraView(Boolean isToWgs?) Object

获取当前相机视角范围参数坐标值,返回值示例:{ "y": 31.787488, "x": 117.222228, "z": 224, "heading": 56, "pitch": -29, "roll": 45 }。ps:同point类方法。

当地球是高德等gcj坐标时,isToWgs设置是否转换为wgs84坐标

getSurfaceHeight( Cartesian3 position, Object opts) Cartesian3

获取坐标的贴地(或贴模型)高度,ps:同point类方法。

opts支持: 是否在has3dtiles:true , 是否异步 asyn:true 异步回调方法calback

//点贴地或贴模型(异步) 
position = viewer.okay3d.getSurfaceHeight(position, {
    asyn: true,     //是否异步求准确高度
    has3dtiles: true,   //是否先求贴模型上(无模型时改为false,提高效率)
    callback: function (newHeight, cartOld) { 
       
    }
}); 
flyTo( Entity entity,Object options?)

视角飞行定位到entiy处

options支持:scale控制线面数据边界的放大比例,radius控制点数据视距距离
viewer.okay3d.flyTo(entity, { scale: 0.5, radius: 1000 });
centerAt(Object centeropt,Object/Number options?)

地球定位至指定区域,相机切换到centeropt指定的参数位置

options为数字时,代表播放动画时长(秒) options为对象时,支持viewer.camera.flyTo所有参数
viewer.mars.centerAt({ "y": 19.999609, "x": 117.579843, "z": 2709521.51, "heading": 354.1, "pitch": -70.1, "roll": 0.1 });
centerAtArr(Array arr,function enfun?)

按arr数组顺序播放地球定位至指定区域,地球定位至指定区域。arr数组中单个对象除了centerAt支持的参数外,还支持:

duration:3, //时长,
stop:1, //两个视角中间停留秒数(默认1秒)
onStart:function, //视角切换播放前回调方法
onEnd:function, //视角切换播放后回调方法
centerPoint( Cartesian3 position,Object options?)

地球定位至指定区域,定位至position设置的目标点位置

options支持viewer.camera.flyToBoundingSphere所有参数
 viewer.okay3d.centerPoint(position, {
    radius: 5000,   //距离目标点的距离
    pitch: -50,     //相机方向
    duration: 4,    //动画时长
    complete: function (e) {//飞行完成回调方法
        
    }
}); 
cancelCenterAt()

取消centerAt等执行的飞行,停止视角切换

getConfig() Object

返回构造地球时传入的config.json配置信息的克隆后值

getLayer(String key, String keyname?) BaseLayer

根据指定字段值(默认名称name)获取指定图层,keyname可以定义id等,为配置信息的字段名,默认是name

getBasemap() BaseLayer

获取当前显示的底图

changeBasemap(String idorname) BaseLayer

根据config配置的id或name属性,更新显示指定的地图底图

hasTerrain() Boolean

是否有地形数据

updateTerrainProvider(Boolean isStkTerrain)

更新地形,参数传入是否显示地形

openFlyAnimation(Function endfun,Object centeropt?)

开场动画,动画播放地球飞行定位指指定区域(默认为config.josn中配置的视域)

viewer.okay3d.openFlyAnimation(function () {
    //动画播放完成后回调       
}); 
isFlyAnimation() Boolean

是否在调用了openFlyAnimation正在进行飞行动画

rotateAnimation(Function endfun,Number duration)

旋转地球动画,可以指定旋转的时长duration秒


viewer.okay3d.rotateAnimation(function () {
//动画播放完成后回调
},3);
getCrs() String

获取当前地图坐标系,值为gcj时表示是国测局偏移坐标

point2map({x:经度,y:纬度}) {x:经度,y:纬度}

在不同坐标系情况下,转换“目标坐标值”至“地图坐标系”一致的坐标

point2wgs({x:经度,y:纬度}) {x:经度,y:纬度}

在不同坐标系情况下 ,获取地图上的坐标后,转为wgs标准坐标系坐标值

keyboard(Boolean value,object speedRatio) void

根据value设置开启或关闭键盘漫游,speedRatio对应支持以下属性:

moveStep: 10, //平移步长 (米)。
dirStep: 25, //相机原地旋转步长,值越大步长越小。
rotateStep: 1.0, //相机围绕目标点旋转速率,0.3 - 2.0
minPitch: 0.1, //最小仰角 0 - 1
maxPitch: 0.95, //最大仰角 0 - 1
keyboardAuto(object speedRatio) void 同keyboard,此方法按自动切换开启关闭键盘漫游
expImage(object opts) void 导出场景图片,截图
viewer.okay3d.expImage({
    type:'image/jpeg',//图片类型,可以指定为png
    height: 300, //指定 高度 或 宽度(指定1种就行,对应的自动缩放)
    download: true,//是否自动下载保存图片文件
    callback: function (base64, size) {//回调

    }
});
destroy() void 销毁释放对象

事件

使用对象的on方法绑定,off方法释放,调用方式示例:
xxx.on(okay3d.event.click, function (e) {
    console.log("执行了事件回调方法")
})
Event Data 说明
click Event 单击地图后触发,等同于Cesium.ScreenSpaceEventType.LEFT_CLICK
clickMap Event 单击地图空白(未单击到矢量或模型数据)时触发
mouseMove Event 鼠标在地图上移动后触发,等同于Cesium.ScreenSpaceEventType.MOUSE_MOVE

popup鼠标单击信息框

viewer.mars.popup该类是静态类。鼠标单击信息框处理类。

属性

属性 参数类型 说明
isOnly boolean

是否唯一弹窗模式,默认true,传入false可以启用多弹窗。

enable boolean

是否禁用。

方法

方法名 返回值 说明
show(Entity entity, Cartesian3 cartesian) void

弹出popup信息框(entity需要有popup属性,其信息为绑定信息框内容的html信息)

entity.popup = {
    html: 'html', //可以是任意html
    anchor: [0, -25]//定义偏移像素值 [x, y]
}; 
viewer.mars.popup.show(entity, entity.position._value);
close(String entityid) void

关闭popup信息框,多弹窗模式,关闭指定id的弹窗,默认关闭所有

setEnable(Boolean value)

禁用或启用 popup弹窗功能

getEnable() Boolean

获取当前禁用或启用状态

destroy() void

释放销毁对象

tooltip鼠标提示信息

viewer.okay3d.tooltip该类是静态类。鼠标悬浮提示信息框处理类。

属性

属性 参数类型 说明
enable boolean

是否禁用。

方法

方法名 返回值 说明
show(Entity entity, Cartesian3 cartesian)

弹出tooltip信息框(entity需要有tooltip对象,其信息为绑定信息框内容的html信息)

entity.tooltip = {
    html: 'html', //可以是任意html
    anchor: [0, -25]//定义偏移像素值 [x, y]
}; 
viewer.mars.popup.show(entity, entity.position._value);
close()

关闭tooltip信息框

destroy() void

释放销毁对象

keyboardRoam键盘漫游

viewer.okay3d.keyboardRoam该类是静态类。键盘漫游(快捷键)处理类。

属性

属性 参数类型 说明
enable boolean

是否禁用。

方法

方法名 返回值 说明
bind(Object opts?) void

启用键盘漫游,可以传参重置默认参数

unbind() void

关闭键盘漫游

startMoveForward() void

不按键一直自动往前走,调用stopMoveForward停止。

stopMoveForward() void

停止自动往前走

startMoveBackward() void

不按键一直自动往后退,调用stopMoveBackward停止。

stopMoveBackward() void

停止自动往后退

startMoveRight() void

不按键一直自动往右走,调用stopMoveRight停止。

stopMoveRight() void

停止自动往右走

startMoveLeft() void

不按键一直自动往往左,调用stopMoveLeft停止。

stopMoveLeft() void

停止自动往左走

moveCamera(okay3d.KeyboardType type) void

相对于屏幕中心点进行移动或旋转

type示例: okay3d.KeyboardType.LEFT_ROTATE

rotateCamera(okay3d.KeyboardType type) void

相对于相机本身进行旋转

type示例: okay3d.KeyboardType.LEFT_ROTATE

destroy() void

释放销毁对象

location位置信息状态栏

viewer.okay3d.location该类是静态类。下侧 鼠标位置信息状态栏 处理类。

属性

属性 参数类型 说明
show boolean

是否显示状态栏。

方法

方法名 返回值 说明
css(Object css) void

设置状态栏的css。类同jquery的 $(dom).css(style)方法

destroy() void

销毁释放对象

contextmenu右键菜单

viewer.okay3d.contextmenu该类是静态类。右键菜单管理 处理类。

var defaultContextmenuItems = [
{
    text: '显示此处经纬度',
    iconCls: 'fa fa-info-circle',
    callback: function (e) {
        var mpt = okay3d.point.formatPosition(e.position);

        var inhtml = "经度:" + mpt.x + " , 纬度:" + mpt.y + "高程:" + mpt.z;
        haoutil.alert(inhtml, '位置信息');
    }
},
{
    text: '开启深度监测',
    iconCls: 'fa fa-eye-slash',
    visible: function () {
        return !viewer.scene.globe.depthTestAgainstTerrain
    },
    callback: function (e) {
        viewer.scene.globe.depthTestAgainstTerrain = true;
    }
},
{
    text: '关闭深度监测',
    iconCls: 'fa fa-eye',
    visible: function () {
        return viewer.scene.globe.depthTestAgainstTerrain
    },
    callback: function (e) {
        viewer.scene.globe.depthTestAgainstTerrain = false;
    }
},
{
    text: '视角切换',
    iconCls: 'fa fa-street-view',
    children: [
        {
            text: '第一视角站到此处',
            iconCls: 'fa fa-street-view',
            callback: function (e) {

                viewer.camera.flyTo({
                    destination: okay3d.point.addPositionsHeight(e.position, 10), //升高10米
                    orientation: {
                        heading: Cesium.Math.toRadians(0),    //绕垂直于地心的轴旋转
                        pitch: Cesium.Math.toRadians(10),      //绕纬度线旋转
                        roll: Cesium.Math.toRadians(0)        //绕经度线旋转
                    },
                });
            }
        },
        {
            text: '开启键盘漫游',
            iconCls: 'fa fa-keyboard-o',
            visible: function (e) {
                return !viewer.okay3d.keyboardRoam.enable
            },
            callback: function (e) {
                viewer.okay3d.keyboardRoam.enable = true;
            }
        },
        {
            text: '关闭键盘漫游',
            iconCls: 'fa fa-keyboard-o',
            visible: function (e) {
                return viewer.okay3d.keyboardRoam.enable
            },
            callback: function (e) {
                viewer.okay3d.keyboardRoam.enable = false;
            }
        },
        {
            text: '取消锁定',
            iconCls: 'fa fa-unlock-alt',
            visible: function (e) {
                return viewer.trackedEntity != undefined
            },
            callback: function (e) {
                viewer.trackedEntity = undefined;
            }
        },
    ]
}
]  
viewer.okay3d.contextmenuItems = defaultContextmenuItems; 

属性

属性 参数类型 说明
enable boolean

是否禁用右键菜单

方法

方法名 返回值 说明
resetDefault() void

右键菜单还原为默认的defaultContextmenuItems

close() void

关闭右键菜单,等同于单击了地图空白处

destroy() void

销毁释放对象

layer图层处理类

okay3d.layer该类是静态类。创建图层和图层相关处理类。

方法

方法名 返回值 说明
createLayer(Viewer Viewer, Object item, String serverURL?) BaseLayer 平台内部创建图层,item为配置信息,具体参考配置信息手册 返回结果都是基于okay3d.layer.BaseLayer及其扩展的子类

通用属性

属性名 类型 说明
visible Boolean

设置显示或隐藏状态

opacity Number 设置图层透明度(需要对应图层支持)
layer Object 【只读】图层对应的原生对象
var layerWork = okay3d.layer.createLayer(viewer,{
    "type": "3dtiles",
    "name": "厂房",
    "url": "http://reparo147.okaygis.com:18012/mapdata/3dtiles/qx-changfang/tileset.json",
    "maximumScreenSpaceError": 3,  
    "maximumMemoryUsage": 1024,
    "offset": { "z": -4 },
    "visible": true
});
createImageryProvider(Object item, String serverURL?) ImageryProvider

创建底图瓦片图层,item为配置信息,具体参考配置信息手册

var imageryProvider = okay3d.layer.createImageryProvider({
    "type": "tile",
    "url": "wgs3857img/{z}/{x}/{y}.jpg",
    "maximumLevel": 18
});
var imagelayer = new Cesium.ImageryLayer(imageryProvider, { alpha: 1 })
viewer.imageryLayers.add(imagelayer);
regLayerForConfig(String type, BaseLayer layerClass)

向框架内部注册自定义type类型的图层处理类

//注册到okay3d内部图层管理中:type为s3m时,实例化S3MLayer
okay3d.layer.regLayerForConfig("s3m", S3MLayer);
hasTerrain() Boolean

是否有地形数据

getEllipsoidTerrain() EllipsoidTerrainProvider

获取无地形的标准椭球体对象

getTerrainProvider(Object config) CesiumTerrainProvider

根据配置获取地形对象

//获取Cesium官方地形服务
viewer.terrainProvider = okay3d.layer.getTerrainProvider({
    type: 'ion'
});

//获取自定义的地形服务
viewer.terrainProvider = okay3d.layer.getTerrainProvider({
    "url": "http://data.marsgis.cn/terrain"
});

//获取arcgis地形服务
viewer.terrainProvider = okay3d.layer.getTerrainProvider({
    "type": "arcgis",
    "url": 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer'
});

BaseLayer图层控制基类

okay3d.layer.BaseLayer是实体类,是所有图层控制处理类的基类。

//方式1:直接使用,方便进行图层控制,如基础项目的 bindToLayerControl
var layer = new okay3d.layer.BaseLayer(viewer,{
    pid: 30,
    name: '企业',
    mydata:null, //自行赋值
    visible: true,
    onAdd: function () {//显示回调
        //这里把数据this.mydata添加到地图上  
    },
    onRemove: function () {//隐藏回调
        //这里把数据this.mydata从地图上移除 
        
    },
    onCenterAt: function (duration) {//定位回调
        
    },
});

//方式2:继承后扩展使用,下面示例的是超图S3M 三维模型图层加载 
class S3MLayer extends okay3d.layer.BaseLayer {
    constructor(viewer, item) {
        super(viewer, item);
        this.hasOpacity = true;
    }
    //添加 
    add() {
         
    }
    remove () {
   
    }
}); 
//注册到okay3d内部图层管理中:type为s3m时,实例化S3MLayer
okay3d.layer.regLayerForConfig("supermap_s3m", S3MLayer);

Options参数选项

Option参数 参数类型 默认值 说明
*** 参考 配置项手册

属性

属性 参数类型 说明
options Object

config.json中对应的图层节点配置信息

viewer Viewer 地球对象
layer *

对应图层对应的内部原生Cesium对象,比如3dtiles返回Cesium3DTileset,geojson返回GeoJsonDataSource

visible boolean

设置图层是否可见,设置后内部自动调用add或remove方法

子类继承时应该重写的变量和方法

方法名 返回值 说明
hasOpacity Boolean属性

[属性]标识该图层是否可以设置透明度

hasZIndex Boolean属性

[属性]标识该图层是否可以调整层级顺序

create() Boolean

创建图层时会自动调用该方法

add() Boolean

将图层实例并添加到地图上

remove() Boolean

将图层实例从地图上移除

centerAt(Number duration)

定位至数据区域,duration参数为动画时间,默认3秒;0表示没有动画;

setOpacity(Number value)

hasOpacity为true时使用,设置透明度

setZIndex(Number value)

hasZIndex为true时使用,设置叠加顺序

外部可调用的方法

方法名 返回值 说明
destroy()

销毁对象

事件

使用对象的on方法绑定,off方法释放,调用方式示例:
xxx.on(okay3d.layer.BaseLayer.event.load, function (e) {
    console.log("执行了事件回调方法")
})
Event Data 说明
add Event 图层添加显示后的触发
remove Event 图层隐藏移除后的触发
load Event 图层数据加载成功后触发
click Event 单击图层中的矢量数据或动态服务后触发
mouseOver Event 鼠标移入图层中的矢量数据后触发
mouseOut Event 鼠标移出图层中的矢量数据后触发

TileLayer瓦片底图

okay3d.layer.TileLayer是实体类,瓦片图层处理类,继承自okay3d.layer.BaseLayer

Options参数选项

Option参数 参数类型 默认值 说明
其他 参考 配置项手册

属性

属性 参数类型 说明
layer ImageryLayer

图层,对应图层对应的内部原生Cesium对象

属性 参数类型 说明
options Object

config.json中对应的图层节点配置信息

viewer Viewer 地球对象
visible boolean

设置图层是否可见,设置后内部自动调用add或remove方法

hasOpacity Boolean属性

【只读】标识该图层是否可以设置透明度

hasZIndex Boolean属性

【只读】标识该图层是否可以调整层级顺序

方法

方法名 返回值 说明
add() Boolean

将图层实例并添加到地图上,不建议直接使用,建议使用visible=true属性控制

remove() Boolean

将图层实例从地图上移除,不建议直接使用,建议使用visible=false属性控制

centerAt(Number duration)

定位至数据区域,duration参数为动画时间,默认3秒;0表示没有动画;

setOpacity(Number value)

hasOpacity为true时使用,设置透明度

setZIndex(Number value)

hasZIndex为true时使用,设置叠加顺序

destroy()

销毁对象

事件

Event Data 说明
add Event 图层添加显示后的触发
remove Event 图层隐藏移除后的触发
load Event 图层数据加载成功后触发
click Event 单击图层中的矢量数据或动态服务后触发

GltfLayer小模型

okay3d.layer.GltfLayer是实体类, gltf三维模型处理图层,继承自okay3d.layer.BaseLayer

Options参数选项

Option参数 参数类型 默认值 说明
其他 参考 配置项手册

属性

属性 参数类型 说明
layer ModelGraphics

model entity对象

属性 参数类型 说明
options Object

config.json中对应的图层节点配置信息

viewer Viewer 地球对象
visible boolean

设置图层是否可见,设置后内部自动调用add或remove方法

hasOpacity Boolean属性

【只读】标识该图层是否可以设置透明度

hasZIndex Boolean属性

【只读】标识该图层是否可以调整层级顺序

方法

方法名 返回值 说明
add() Boolean

将图层实例并添加到地图上,不建议直接使用,建议使用visible=true属性控制

remove() Boolean

将图层实例从地图上移除,不建议直接使用,建议使用visible=false属性控制

centerAt(Number duration)

定位至数据区域,duration参数为动画时间,默认3秒;0表示没有动画;

setOpacity(Number value)

hasOpacity为true时使用,设置透明度

destroy()

销毁对象

事件

使用对象的on方法绑定,off方法释放,调用方式示例:
xxx.on(okay3d.layer.GltfLayer.event.load, function (e) {
    console.log("执行了事件回调方法")
})
Event Data 说明
loadBefore Event 图层添加显示后立即触发,该事件是add后立即触发,load是gltf异步加载完成后才触发。
Event Data 说明
add Event 图层添加显示后的触发
remove Event 图层隐藏移除后的触发
load Event 图层数据加载成功后触发
click Event 单击图层中的矢量数据或动态服务后触发
mouseOver Event 鼠标移入图层中的矢量数据后触发
mouseOut Event 鼠标移出图层中的矢量数据后触发

Tiles3dLayer三维模型

okay3d.layer.Tiles3dLayer是实体类, 3dtiles三维模型处理图层,继承自okay3d.layer.BaseLayer

Options参数选项

Option参数 参数类型 默认值 说明
其他 参考 配置项手册

属性

属性 参数类型 说明
layer Cesium3DTileset

Cesium3DTileset图层对象

originalCenter Object

中心位置

属性 参数类型 说明
options Object

config.json中对应的图层节点配置信息

viewer Viewer 地球对象
visible boolean

设置图层是否可见,设置后内部自动调用add或remove方法

hasOpacity Boolean属性

【只读】标识该图层是否可以设置透明度

hasZIndex Boolean属性

【只读】标识该图层是否可以调整层级顺序

方法

方法名 返回值 说明
add() Boolean

将图层实例并添加到地图上,不建议直接使用,建议使用visible=true属性控制

remove() Boolean

将图层实例从地图上移除,不建议直接使用,建议使用visible=false属性控制

centerAt(Number duration)

定位至数据区域,duration参数为动画时间,默认3秒;0表示没有动画;

setOpacity(Number value)

hasOpacity为true时使用,设置透明度

destroy()

销毁对象

事件

使用对象的on方法绑定,off方法释放,调用方式示例:
xxx.on(okay3d.layer.Tiles3dLayer.event.load, function (e) {
    console.log("执行了事件回调方法")
})
Event Data 说明
loadBefore Event 图层添加显示后立即触发,该事件与load区别在于readyPromise后立即触发,load是再根据传入的缩放移动等参数执行完成后触发。
initialTilesLoaded Event 对应Cesium3DTileset的同名事件,该回调只执行一次
allTilesLoaded Event 对应Cesium3DTileset的同名事件,该回调会执行多次,视角变化后重新加载一次完成后都会回调
Event Data 说明
add Event 图层添加显示后的触发
remove Event 图层隐藏移除后的触发
load Event 图层数据加载成功后触发
click Event 单击图层中的矢量数据或动态服务后触发
mouseOver Event 鼠标移入图层中的矢量数据后触发
mouseOut Event 鼠标移出图层中的矢量数据后触发

GeoJsonLayer GeoJson格式数据

okay3d.layer.GeoJsonLayer是实体类, GeoJson格式数据处理图层,继承自okay3d.layer.BaseLayer

Options参数选项

Option参数 参数类型 默认值 说明
其他 参考 配置项手册

属性

属性 参数类型 说明
layer GeoJsonDataSource

GeoJsonDataSource图层对象

属性 参数类型 说明
options Object

config.json中对应的图层节点配置信息

viewer Viewer 地球对象
visible boolean

设置图层是否可见,设置后内部自动调用add或remove方法

hasOpacity Boolean属性

【只读】标识该图层是否可以设置透明度

hasZIndex Boolean属性

【只读】标识该图层是否可以调整层级顺序

方法

方法名 返回值 说明
add() Boolean

将图层实例并添加到地图上,不建议直接使用,建议使用visible=true属性控制

remove() Boolean

将图层实例从地图上移除,不建议直接使用,建议使用visible=false属性控制

centerAt(Number duration)

定位至数据区域,duration参数为动画时间,默认3秒;0表示没有动画;

setOpacity(Number value)

设置透明度

setZIndex(Number value)

设置叠加顺序

destroy()

销毁对象

ArcFeatureLayer ArcGIS矢量服务

okay3d.layer.ArcFeatureLayer是实体类, arcgis 矢量数据服务 处理图层(一次性全部加载,适合少量数据时),继承自okay3d.layer.GeoJsonLayer

Options参数选项

Option参数 参数类型 默认值 说明
其他 参考 配置项手册

属性

属性 参数类型 说明
layer GeoJsonDataSource

GeoJsonDataSource图层对象

属性 参数类型 说明
options Object

config.json中对应的图层节点配置信息

viewer Viewer 地球对象
visible boolean

设置图层是否可见,设置后内部自动调用add或remove方法

hasOpacity Boolean属性

【只读】标识该图层是否可以设置透明度

hasZIndex Boolean属性

【只读】标识该图层是否可以调整层级顺序

方法

方法名 返回值 说明
add() Boolean

将图层实例并添加到地图上,不建议直接使用,建议使用visible=true属性控制

remove() Boolean

将图层实例从地图上移除,不建议直接使用,建议使用visible=false属性控制

centerAt(Number duration)

定位至数据区域,duration参数为动画时间,默认3秒;0表示没有动画;

setOpacity(Number value)

设置透明度

setZIndex(Number value)

设置叠加顺序

destroy()

销毁对象

KmlLayer KML格式数据

okay3d.layer.KmlLayer是实体类, KML格式数据处理图层 处理图层,继承自okay3d.layer.GeoJsonLayer

Options参数选项

Option参数 参数类型 默认值 说明
其他 参考 配置项手册

属性

属性 参数类型 说明
layer KmlDataSource

KmlDataSource图层对象

属性 参数类型 说明
options Object

config.json中对应的图层节点配置信息

viewer Viewer 地球对象
visible boolean

设置图层是否可见,设置后内部自动调用add或remove方法

hasOpacity Boolean属性

【只读】标识该图层是否可以设置透明度

hasZIndex Boolean属性

【只读】标识该图层是否可以调整层级顺序

方法

方法名 返回值 说明
add() Boolean

将图层实例并添加到地图上,不建议直接使用,建议使用visible=true属性控制

remove() Boolean

将图层实例从地图上移除,不建议直接使用,建议使用visible=false属性控制

centerAt(Number duration)

定位至数据区域,duration参数为动画时间,默认3秒;0表示没有动画;

setOpacity(Number value)

设置透明度

setZIndex(Number value)

设置叠加顺序

destroy()

销毁对象

CzmlLayer CZML格式数据

okay3d.layer.CzmlLayer是实体类, CZML格式数据处理图层 处理图层,继承自okay3d.layer.GeoJsonLayer

Options参数选项

Option参数 参数类型 默认值 说明
其他 参考 配置项手册

属性

属性 参数类型 说明
layer CzmlDataSource

CzmlDataSource图层对象

属性 参数类型 说明
options Object

config.json中对应的图层节点配置信息

viewer Viewer 地球对象
visible boolean

设置图层是否可见,设置后内部自动调用add或remove方法

hasOpacity Boolean属性

【只读】标识该图层是否可以设置透明度

hasZIndex Boolean属性

【只读】标识该图层是否可以调整层级顺序

方法

方法名 返回值 说明
add() Boolean

将图层实例并添加到地图上,不建议直接使用,建议使用visible=true属性控制

remove() Boolean

将图层实例从地图上移除,不建议直接使用,建议使用visible=false属性控制

centerAt(Number duration)

定位至数据区域,duration参数为动画时间,默认3秒;0表示没有动画;

setOpacity(Number value)

设置透明度

setZIndex(Number value)

设置叠加顺序

destroy()

销毁对象

TerrainLayer 地形图层

okay3d.layer.TerrainLayer是实体类, 地形管理(地球对象有且仅有一个地形图层),继承自okay3d.layer.BaseLayer

Options参数选项

Option参数 参数类型 默认值 说明
其他 参考 配置项手册

属性

属性 参数类型 说明
layer CesiumTerrainProvider

CesiumTerrainProvider图层对象

属性 参数类型 说明
options Object

config.json中对应的图层节点配置信息

viewer Viewer 地球对象
visible boolean

设置图层是否可见,设置后内部自动调用add或remove方法

hasOpacity Boolean属性

【只读】标识该图层是否可以设置透明度

hasZIndex Boolean属性

【只读】标识该图层是否可以调整层级顺序

方法

方法名 返回值 说明
add() Boolean

将图层实例并添加到地图上,不建议直接使用,建议使用visible=true属性控制

remove() Boolean

将图层实例从地图上移除,不建议直接使用,建议使用visible=false属性控制

centerAt(Number duration)

定位至数据区域,duration参数为动画时间,默认3秒;0表示没有动画;

destroy()

销毁对象

CustomFeatureGridLayer 分块加载图层基类

okay3d.layer.CustomFeatureGridLayer是实体类, 按类似瓦片规则动态分块加载视域内矢量数据,公共基类,继承自okay3d.layer.BaseLayer

Options参数选项

Option参数 参数类型 默认值 说明
其他 参考 配置项手册

属性

属性 参数类型 说明
layer CustomDataSource

用于存储管理图层内所有entity对象集合

primitives PrimitiveCollection

用于存储管理图层内所有primitive对象集合

属性 参数类型 说明
options Object

config.json中对应的图层节点配置信息

viewer Viewer 地球对象
visible boolean

设置图层是否可见,设置后内部自动调用add或remove方法

hasOpacity Boolean属性

【只读】标识该图层是否可以设置透明度

hasZIndex Boolean属性

【只读】标识该图层是否可以调整层级顺序

用于子类继承的方法

方法名 返回值 说明
getDataForGrid(Object opts,Function callback) void

获取网格内的数据(opts包含具体网格信息),calback为回调方法,calback参数传回数据数组

createEntity(Object opts,Object attributes,Function callback?) Entity

根据数据创造entity,opts为当前网格信息,attributes为getDataForGrid返回的数组中单个对象,calback在异步构造时,调用回调,返回entity

updateEntity(Entity entity,Object attributes) void

更新entity(动态数据时有用),entity为图层中对应id的历史对象,attributes为getDataForGrid返回的数组中单个对象

removeEntity(Entity entity) void

移除entity,需要特殊处理时可以重写。entity为图层中对应id的历史对象,attributes为getDataForGrid返回的数组中单个对象

方法

方法名 返回值 说明
reload() void

重新加载数据

getLength() Number

当前图层内所有矢量对象的数量

方法名 返回值 说明
add() Boolean

将图层实例并添加到地图上,不建议直接使用,建议使用visible=true属性控制

remove() Boolean

将图层实例从地图上移除,不建议直接使用,建议使用visible=false属性控制

centerAt(Number duration)

定位至数据区域,duration参数为动画时间,默认3秒;0表示没有动画;

setOpacity(Number value)

设置透明度

destroy()

销毁对象

ArcGIS矢量服务分块加载图层

该类在插件不在okay3d.js主库中,在单独的插件okay3d-esri.js文件内。

okay3d.layer.ArcFeatureGridLayer是实体类, arcgis 矢量数据服务分块加载处理图层(按瓦片加载当前视域内数据,适合大量数据时),继承自okay3d.layer.CustomFeatureGridLayer

Options参数选项

Option参数 参数类型 默认值 说明
其他 参考 配置项手册

属性

属性 参数类型 说明
layer CustomDataSource

用于存储管理图层内所有entity对象集合

primitives PrimitiveCollection

用于存储管理图层内所有primitive对象集合

属性 参数类型 说明
options Object

config.json中对应的图层节点配置信息

viewer Viewer 地球对象
visible boolean

设置图层是否可见,设置后内部自动调用add或remove方法

hasOpacity Boolean属性

【只读】标识该图层是否可以设置透明度

hasZIndex Boolean属性

【只读】标识该图层是否可以调整层级顺序

方法

方法名 返回值 说明
reload() void

重新加载数据

getLength() Number

当前图层内所有矢量对象的数量

方法名 返回值 说明
add() Boolean

将图层实例并添加到地图上,不建议直接使用,建议使用visible=true属性控制

remove() Boolean

将图层实例从地图上移除,不建议直接使用,建议使用visible=false属性控制

centerAt(Number duration)

定位至数据区域,duration参数为动画时间,默认3秒;0表示没有动画;

setOpacity(Number value)

设置透明度

destroy()

销毁对象

Draw标绘类

okay3d.Draw是实体类,标绘控制处理类,提供文字、点、线、面、立体、模型等各类entity对象的绘制。

使用示例


var drawControl = new okay3d.Draw({
    viewer: viewer,
    hasEdit: true 
});
//标绘文字
drawControl.startDraw({
    type: "label",
    style: {
        text: "天恒昕业okay3d",
        color: "#0081c2",
        font_size: 50,
        border: true,
        border_color: "#ffffff",
        border_width: 2
    },
    success: function (entity) {
        //简单绘制时,绘制完成后回调,更多复杂回调可以注册事件监听
    }
});

//事件监听(可以自行加相关代码实现业务需求,此处主要做示例)
drawControl.on(okay3d.Draw.event.drawStart, function (e) {
    console.log('开始绘制');
}); 
drawControl.on(okay3d.Draw.event.drawAddPoint, function (e) {
    console.log('绘制过程中增加了点');
});
drawControl.on(okay3d.Draw.event.drawRemovePoint, function (e) {
    console.log('绘制过程中删除了点');
});
drawControl.on(okay3d.Draw.event.drawCreated, function (e) {
    console.log('创建完成');
});
drawControl.on(okay3d.Draw.event.editStart, function (e) {
    console.log('开始编辑');
});
drawControl.on(okay3d.Draw.event.editMovePoint, function (e) {
    console.log('编辑修改了点');
});
drawControl.on(okay3d.Draw.event.editRemovePoint, function (e) {
    console.log('编辑删除了点');
});
drawControl.on(okay3d.Draw.event.editStop, function (e) {
    console.log('停止编辑');
}); 
drawControl.on(okay3d.Draw.event.delete, function (e) {  
    console.log('删除了对象');
});

创建对象

创建示例 说明
okay3d.Draw(Draw options> options) 根据相关参数创建一个标绘控制器

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
hasEdit Boolean false 是否可以编辑
isContinued Boolean false 是否连续标绘模式,连续标绘时需要手动调用stopDraw()才能停止,非连续标绘时每次标绘后自动结束。
isAutoEditing Boolean true 是否绘制完成后自动激活编辑
groupName String 默认分组 默认分组dataSource的名称
nameTooltip Boolean true 是否在不可编辑状态时将 name名称 属性 绑定到tooltip
popup 对标号的attr属性展示或编辑的popup弹窗的配置(如:我的标记)
popup: {
    enable: true,
    edit: true,
    title: "属性编辑",
    columns: [
        { "field": "name", "name": "名称", },
        { "field": "remark", "name": "备注", "type": "textarea" },
    ]
}
removeScreenSpaceEvent Boolean true 是否移除Cesium内部的双击事件,因为会影响标绘的事件交互。默认true,为true时,内部会执行:

viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

属性

属性名 类型 说明
visible Boolean

设置显示或隐藏状态

edit Boolean 设置是否可以编辑
drawing Boolean 【只读】是否正在绘制矢量对象(如绘制线面,尚未结束)
dataSources Array CustomDataSource 【只读】获取所有分组图层
dataSource CustomDataSource 当前激活状态的分组图层

startDraw Options参数选项

startDraw方法内参数值attribute说明,主要设置有type和style属性。
支持success:function(entity){ }标绘完成后的回调方法,适用于一些简单场景下,复杂的可以执行on方法用事件去监听。
完整的Options参数请参考基础项目或okay3d示例的widgets\plotAttr\config\attr.json文件
名称 参数
文字
{
    "type": "label", 
    "style": {
        "text": "文字",      //内容   
        "color": "#ffffff",      //颜色   
        "opacity": 1,      //透明度   
        "font_family": "楷体",      //字体 ,可选项:微软雅黑,宋体,楷体,隶书,黑体,  
        "font_size": 30,      //字体大小   
        "border": true,      //是否衬色   
        "border_color": "#000000",      //衬色颜色   
        "border_width": 3,      //衬色宽度   
        "background": false,      //是否背景   
        "background_color": "#000000",      //背景颜色   
        "background_opacity": 0.5,      //背景透明度   
        "font_weight": "normal",      //是否加粗 ,可选项:bold(是),normal(否),  
        "font_style": "normal",      //是否斜体 ,可选项:italic(是),normal(否),  
        "pixelOffsetX": 0,      //横向偏移像素   
        "pixelOffsetY": 0,      //纵向偏移像素   
        "scaleByDistance": false,      //是否按视距缩放   
        "scaleByDistance_far": 1000000,      //上限   
        "scaleByDistance_farValue": 0.1,      //比例值   
        "scaleByDistance_near": 1000,      //下限   
        "scaleByDistance_nearValue": 1,      //比例值   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "clampToGround": false,      //是否贴地   
        "visibleDepth": true,      //是否被遮挡   
    }
}
点标记
{
    "type": "point", 
    "style": {
        "pixelSize": 10,      //像素大小   
        "color": "#3388ff",      //颜色   
        "opacity": 1,      //透明度   
        "outline": true,      //是否边框   
        "outlineColor": "#ffffff",      //边框颜色   
        "outlineOpacity": 0.6,      //边框透明度   
        "outlineWidth": 2,      //边框宽度   
        "scaleByDistance": false,      //是否按视距缩放   
        "scaleByDistance_far": 1000000,      //上限   
        "scaleByDistance_farValue": 0.1,      //比例值   
        "scaleByDistance_near": 1000,      //下限   
        "scaleByDistance_nearValue": 1,      //比例值   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 10000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "clampToGround": false,      //是否贴地   
        "visibleDepth": true,      //是否被遮挡   

    }
}
图标点标记
{
    "type": "billboard", 
    "style": {
        "image": "img/marker.png",      //图标  
        "opacity": 1,      //透明度   
        "scale": 1,      //大小比例   
        "rotation": 0,      //旋转角度   
        "horizontalOrigin": "CENTER",      //横向对齐 ,可选项:LEFT(左边),CENTER(居中),RIGHT(右边),  
        "verticalOrigin": "BOTTOM",      //垂直对齐 ,可选项:TOP(顶部),CENTER(居中),BOTTOM(底部),  
        "scaleByDistance": false,      //是否按视距缩放   
        "scaleByDistance_far": 1000000,      //上限   
        "scaleByDistance_farValue": 0.1,      //比例值   
        "scaleByDistance_near": 1000,      //下限   
        "scaleByDistance_nearValue": 1,      //比例值   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 10000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "clampToGround": false,      //是否贴地   
        "visibleDepth": true,      //是否被遮挡  

    }
}
字体点标记
{
    "type": "font-point", 
    "style": {
        "iconClass": "fa fa-automobile",      //字体样式   
        "iconSize": 50,      //字体大小   
        "color": "#00ffff",      //颜色   
        "opacity": 1,      //透明度   
        "horizontalOrigin": "CENTER",      //横向对齐 ,可选项:LEFT(左边),CENTER(居中),RIGHT(右边),  
        "verticalOrigin": "CENTER",      //垂直对齐 ,可选项:TOP(顶部),CENTER(居中),BOTTOM(底部),  
        "rotation": 0,      //旋转角度   
        "scaleByDistance": false,      //是否按视距缩放   
        "scaleByDistance_far": 1000000,      //上限   
        "scaleByDistance_farValue": 0.1,      //比例值   
        "scaleByDistance_near": 1000,      //下限   
        "scaleByDistance_nearValue": 1,      //比例值   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 10000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "clampToGround": false,      //是否贴地   
        "visibleDepth": true,      //是否被遮挡   

    }
}
模型
{
    "type": "model", 
    "style": {
        "modelUrl": "data/test.gltf",      //路径  
        "scale": 1,      //比例   
        "heading": 0,      //方向角   
        "pitch": 0,      //俯仰角   
        "roll": 0,      //翻滚角   
        "fill": false,      //是否填充   
        "color": "#3388ff",      //颜色   
        "opacity": 1,      //透明度   
        "silhouette": false,      //是否轮廓   
        "silhouetteColor": "#ffffff",      //轮廓颜色   
        "silhouetteSize": 2,      //轮廓宽度   
        "silhouetteAlpha": 0.8,      //轮廓透明度   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "hasShadows": true,      //是否阴影   
        "clampToGround": false,      //是否贴地   

    }
}
线
{
    "type": "polyline", 
    "style": {
        "lineType": "solid",      //线型 ,可选项:solid(实线),dash(虚线),glow(光晕),arrow(箭头),animation(动画),  
        "animationDuration": 1000,      //速度   
        "animationImage": "img/textures/lineClr.png",      //图片   
        "color": "#3388ff",      //颜色   
        "width": 4,      //线宽   
        "clampToGround": false,      //是否贴地   
        "dashLength": 16,      //虚线长度   
        "outline": false,      //是否衬色   
        "outlineColor": "#ffffff",      //衬色颜色   
        "outlineWidth": 2,      //衬色宽度   
        "depthFail": false,      //是否显示遮挡   
        "depthFailColor": "#ff0000",      //遮挡处颜色   
        "depthFailOpacity": 0.2,      //遮挡处透明度   
        "opacity": 1,      //透明度   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "zIndex": 0,      //层级顺序   

    }
}
管道线
{
    "type": "polylineVolume", 
    "style": {
        "color": "#00FF00",      //颜色   
        "radius": 10,      //半径   
        "shape": "pipeline",      //形状 ,可选项:pipeline(空心管),circle(实心管),star(星状管),  
        "outline": false,      //是否衬色   
        "outlineColor": "#ffffff",      //衬色颜色   
        "opacity": 1,      //透明度   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   

    }
}
墙体
{
    "type": "wall", 
    "style": {
        "extrudedHeight": 50,      //墙高   
        "fill": true,      //是否填充   
        "fillType": "color",      //填充类型 ,可选项:color(纯色),animationLine(动画),grid(网格),stripe(条纹),checkerboard(棋盘),  
        "animationDuration": 1000,      //速度   
        "animationImage": "img/textures/fence.png",      //图片   
        "animationRepeatX": 1,      //重复数量   
        "animationAxisY": false,      //竖直方向   
        "grid_lineCount": 8,      //网格数量   
        "grid_lineThickness": 2,      //网格宽度   
        "grid_cellAlpha": 0.1,      //填充透明度   
        "stripe_oddcolor": "#ffffff",      //条纹衬色   
        "stripe_repeat": 6,      //条纹数量   
        "checkerboard_oddcolor": "#ffffff",      //棋盘衬色   
        "checkerboard_repeat": 4,      //棋盘格数   
        "color": "#00FF00",      //颜色   
        "opacity": 0.6,      //透明度   
        "outline": true,      //是否边框   
        "outlineWidth": 1,      //边框宽度   
        "outlineColor": "#ffffff",      //边框颜色   
        "outlineOpacity": 0.6,      //边框透明度   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "hasShadows": false,      //是否阴影   
    }
}
走廊
{
    "type": "corridor", 
    "style": {
        "height": 0,      //高程   
        "extrudedHeight": 50,      //高度   
        "width": 100,      //走廊宽度   
        "cornerType": "ROUNDED",      //顶点样式 ,可选项:ROUNDED(圆滑),MITERED(斜接),BEVELED(斜切),  
        "fillType": "color",      //填充类型 ,可选项:color(纯色),grid(网格),  
        "grid_lineCount": 8,      //网格数量   
        "grid_lineThickness": 2,      //网格宽度   
        "grid_cellAlpha": 0.1,      //填充透明度   
        "color": "#00FF00",      //颜色   
        "opacity": 0.6,      //透明度   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "clampToGround": false,      //是否贴地   
        "zIndex": 0,      //层级顺序   
    }
}
{
    "type": "polygon", 
    "style": {
        "fill": true,      //是否填充   
        "fillType": "color",      //填充类型 ,可选项:color(纯色),grid(网格),stripe(条纹),checkerboard(棋盘),  
        "grid_lineCount": 8,      //网格数量   
        "grid_lineThickness": 2,      //网格宽度   
        "grid_cellAlpha": 0.1,      //填充透明度   
        "stripe_oddcolor": "#ffffff",      //条纹衬色   
        "stripe_repeat": 6,      //条纹数量   
        "checkerboard_oddcolor": "#ffffff",      //棋盘衬色   
        "checkerboard_repeat": 4,      //棋盘格数   
        "color": "#3388ff",      //颜色   
        "opacity": 0.6,      //透明度   
        "stRotation": 0,      //填充方向   
        "outline": true,      //是否边框   
        "outlineWidth": 1,      //边框宽度   
        "outlineColor": "#ffffff",      //边框颜色   
        "outlineOpacity": 0.6,      //边框透明度   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "clampToGround": false,      //是否贴地   
        "zIndex": 0,      //层级顺序   

        "extrudedHeight": 100,      //拉伸高度 (立体拉伸时传入)  
    }
}
矩形
{
    "type": "rectangle", 
    "style": {
        "height": 0,      //高程   
        "fill": true,      //是否填充   
        "fillType": "color",      //填充类型 ,可选项:color(纯色),grid(网格),stripe(条纹),checkerboard(棋盘),  
        "grid_lineCount": 8,      //网格数量   
        "grid_lineThickness": 2,      //网格宽度   
        "grid_cellAlpha": 0.1,      //填充透明度   
        "stripe_oddcolor": "#ffffff",      //条纹衬色   
        "stripe_repeat": 6,      //条纹数量   
        "checkerboard_oddcolor": "#ffffff",      //棋盘衬色   
        "checkerboard_repeat": 4,      //棋盘格数   
        "color": "#3388ff",      //颜色   
        "opacity": 0.6,      //透明度   
        "outline": true,      //是否边框   
        "outlineWidth": 1,      //边框宽度   
        "outlineColor": "#ffffff",      //边框颜色   
        "outlineOpacity": 0.6,      //边框透明度   
        "rotation": 0,      //旋转角度   
        "stRotation": 0,      //材质角度   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "clampToGround": false,      //是否贴地   
        "zIndex": 0,      //层级顺序  

        "extrudedHeight": 100,      //拉伸高度 (立体拉伸时传入)  
    }
}
{
    "type": "circle", 
    "style": {
        "radius": 100,      //半径           
        "height": 0,      //高程   
        "fill": true,      //是否填充   
        "fillType": "color",      //填充类型 ,可选项:color(纯色),animationCircle(动画),grid(网格),stripe(条纹),checkerboard(棋盘),  
        "animationDuration": 1000,      //速度   
        "animationCount": 1,      //圈数   
        "animationGradient": 0.1,      //圈间系数   
        "grid_lineCount": 8,      //网格数量   
        "grid_lineThickness": 2,      //网格宽度   
        "grid_cellAlpha": 0.1,      //填充透明度   
        "stripe_oddcolor": "#ffffff",      //条纹衬色   
        "stripe_repeat": 6,      //条纹数量   
        "checkerboard_oddcolor": "#ffffff",      //棋盘衬色   
        "checkerboard_repeat": 4,      //棋盘格数   
        "color": "#3388ff",      //填充颜色   
        "opacity": 0.6,      //透明度   
        "stRotation": 0,      //填充方向   
        "outline": true,      //是否边框   
        "outlineWidth": 1,      //边框宽度   
        "outlineColor": "#ffffff",      //边框颜色   
        "outlineOpacity": 0.6,      //边框透明度   
        "rotation": 0,      //旋转角度   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "clampToGround": false,      //是否贴地   
        "zIndex": 0,      //层级顺序   

        "extrudedHeight": 100,      //拉伸高度 (立体拉伸时传入)  

    }
}
椭圆
{
    "type": "ellipse", 
    "style": {
        "semiMinorAxis": 100,      //短半径   
        "semiMajorAxis": 100,      //长半径   
        "height": 0,      //高程   
        "fill": true,      //是否填充   
        "fillType": "color",      //填充类型 ,可选项:color(纯色),animationCircle(动画),grid(网格),stripe(条纹),checkerboard(棋盘),  
        "animationDuration": 1000,      //速度   
        "animationCount": 1,      //圈数   
        "animationGradient": 0.1,      //圈间系数   
        "grid_lineCount": 8,      //网格数量   
        "grid_lineThickness": 2,      //网格宽度   
        "grid_cellAlpha": 0.1,      //填充透明度   
        "stripe_oddcolor": "#ffffff",      //条纹衬色   
        "stripe_repeat": 6,      //条纹数量   
        "checkerboard_oddcolor": "#ffffff",      //棋盘衬色   
        "checkerboard_repeat": 4,      //棋盘格数   
        "color": "#3388ff",      //填充颜色   
        "opacity": 0.6,      //透明度   
        "stRotation": 0,      //填充方向   
        "outline": true,      //是否边框   
        "outlineWidth": 1,      //边框宽度   
        "outlineColor": "#ffffff",      //边框颜色   
        "outlineOpacity": 0.6,      //边框透明度   
        "rotation": 0,      //旋转角度   
        "clampToGround": false,      //是否贴地   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "zIndex": 0,      //层级顺序   

        "extrudedHeight": 100,      //拉伸高度 (立体拉伸时传入)  
    }
}
圆锥体
{
    "type": "cylinder", 
    "style": {
        "topRadius": 0,      //顶部半径   
        "bottomRadius": 100,      //底部半径   
        "length": 100,      //高度   
        "fill": true,      //是否填充   
        "fillType": "color",      //填充类型 ,可选项:color(纯色),animationCircle(动画),  
        "animationDuration": 1000,      //速度   
        "animationCount": 1,      //圈数   
        "animationGradient": 0.1,      //圈间系数   
        "color": "#00FF00",      //填充颜色   
        "opacity": 0.6,      //透明度   
        "outline": false,      //是否边框   
        "outlineWidth": 1,      //边框宽度   
        "outlineColor": "#ffffff",      //边框颜色   
        "outlineOpacity": 0.6,      //边框透明度   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "hasShadows": false,      //是否阴影   
    }
}
球体
{
    "type": "ellipsoid", 
    "style": {
        "extentRadii": 100,      //长半径   
        "widthRadii": 100,      //宽半径   
        "heightRadii": 100,      //高半径   
        "fill": true,      //是否填充   
        "fillType": "color",      //填充类型 ,可选项:color(纯色),grid(网格),stripe(条纹),checkerboard(棋盘),  
        "grid_lineCount": 8,      //网格数量   
        "grid_lineThickness": 2,      //网格宽度   
        "grid_cellAlpha": 0.1,      //填充透明度   
        "stripe_oddcolor": "#ffffff",      //条纹衬色   
        "stripe_repeat": 6,      //条纹数量   
        "checkerboard_oddcolor": "#ffffff",      //棋盘衬色   
        "checkerboard_repeat": 4,      //棋盘格数   
        "color": "#00FF00",      //颜色   
        "opacity": 0.6,      //透明度   
        "outline": true,      //是否边框   
        "outlineWidth": 1,      //边框宽度   
        "outlineColor": "#ffffff",      //边框颜色   
        "outlineOpacity": 0.6,      //边框透明度 
    }
}
平面
{
    "type": "plane", 
    "style": {
        "dimensionsX": 100,      //长度   
        "dimensionsY": 100,      //宽度   
        "plane_normal": "z",      //方向 ,可选项:x(X轴),y(Y轴),z(Z轴),  
        "plane_distance": 0,      //偏移距离   
        "fill": true,      //是否填充   
        "fillType": "color",      //填充类型 ,可选项:color(纯色),grid(网格),stripe(条纹),checkerboard(棋盘),  
        "grid_lineCount": 8,      //网格数量   
        "grid_lineThickness": 2,      //网格宽度   
        "grid_cellAlpha": 0.1,      //填充透明度   
        "stripe_oddcolor": "#ffffff",      //条纹衬色   
        "stripe_repeat": 6,      //条纹数量   
        "checkerboard_oddcolor": "#ffffff",      //棋盘衬色   
        "checkerboard_repeat": 4,      //棋盘格数   
        "color": "#00FF00",      //颜色   
        "opacity": 0.6,      //透明度   
        "outline": true,      //是否边框   
        "outlineWidth": 1,      //边框宽度   
        "outlineColor": "#ffffff",      //边框颜色   
        "outlineOpacity": 0.6,      //边框透明度   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "hasShadows": false,      //是否阴影   
    }
}
盒子
{
    "type": "box", 
    "style": {
        "dimensionsX": 100,      //盒子长度   
        "dimensionsY": 100,      //盒子宽度   
        "dimensionsZ": 100,      //盒子高度   
        "fill": true,      //是否填充   
        "fillType": "color",      //填充类型 ,可选项:color(纯色),grid(网格),stripe(条纹),checkerboard(棋盘),  
        "grid_lineCount": 8,      //网格数量   
        "grid_lineThickness": 2,      //网格宽度   
        "grid_cellAlpha": 0.1,      //填充透明度   
        "stripe_oddcolor": "#ffffff",      //条纹衬色   
        "stripe_repeat": 6,      //条纹数量   
        "checkerboard_oddcolor": "#ffffff",      //棋盘衬色   
        "checkerboard_repeat": 4,      //棋盘格数   
        "color": "#00FF00",      //颜色   
        "opacity": 0.6,      //透明度   
        "outline": true,      //是否边框   
        "outlineWidth": 1,      //边框宽度   
        "outlineColor": "#ffffff",      //边框颜色   
        "outlineOpacity": 0.6,      //边框透明度   
        "distanceDisplayCondition": false,      //是否按视距显示   
        "distanceDisplayCondition_far": 100000,      //最大距离   
        "distanceDisplayCondition_near": 0,      //最小距离   
        "clampToGround": false,      //是否贴地   
    }
}

方法

方法名 返回值 说明
startDraw(DrawStyle-option option) Entity

激活开始绘制

endDraw() this

外部控制,完成绘制,比如手机端无法双击结束

stopDraw() this

停止绘制

clearDraw() this

清除所有绘制,等同deleteAll

getCurrentEntity() Entity

获取当前编辑的要素

hasEdit(Boolean value)

设置是否在绘制完成后可以编辑修改entity

startEditing(Entity entity)

激活编辑entity

stopEditing()

停止编辑entity

updateAttribute(Object attribute,Entity entity?) Entity

修改的Entity的属性,entit为空时为当前正在编辑的对象

setPositions(Array positions,Entity entity?) Entity

修改Entity的坐标、高程,entit为空时为当前正在编辑的对象

deleteEntity(Entity entity?)

删除单个entity,entit为空时为当前正在编辑的对象。兼容remove方法名

deleteAll()

删除所有entity。 兼容removeAll方法名

toGeoJSON() String

转换所有标绘的Entity为geojson标准格式,用于保存

loadJson(GeoJson Object json,Object options) Entity[]

转换保存过的geojson数据为entity,并添加到Draw进行控制

options参数支持:{ clear: true, //是否清除, flyTo: true, //是否定位至数据所在视域 style: objcet //默认样式 }

addFeature(String type,Object geojson) Entity

外部添加数据,支持所有类型

var entity = viewer.okay3d.Draw.addFeature('point', {
    type: "Feature",
    properties: { style: {"color": "#00ff00"} },
    geometry: { type: "Point", coordinates: [112.145,31.346] }
}); 
addBillboard(Array point,DrawStyle-option style) Entity

外部添加 billboard图标点 数据

var entity = viewer.okay3d.Draw.addBillboard([112.145,31.346], {
    "image": "img/marker.png",      //图标  
    "opacity": 1,      //透明度  
}); 
addPoint(Array point,DrawStyle-option style) Entity

外部添加 point点 数据

var entity = viewer.okay3d.Draw.addPoint([112.145,31.346], {
    "color": "#00ff00" 
    "opacity": 1,      //透明度  
}); 
addPolyline(Array coords,DrawStyle-option style) Entity

外部添加 线 数据

//线坐标
var coordinates = [
    [116.069898, 31.303655],
    [116.098708, 31.322126]
];
var entity = viewer.okay3d.Draw.addPolyline(coordinates, { "width": 3, "color": "#00ff00" });
                        
addPolygon(Array coords,DrawStyle-option style) Entity

外部添加 面 数据

//面坐标
var coordinates = [
    [116.069898, 31.303655],
    [116.098708, 31.322126],
    [116.108063, 31.311256],
    [116.079317, 31.292959]
];
var entity = viewer.okay3d.Draw.addPolygon(coordinates, { "color": "#00ff00" });
                        
attributeToEntity(DrawStyle-option attribute,<Cartesian3 []> positions) Entity

通过属性和坐标,代码控制来生成entity(不是通过图上绘制的方式)

bindExtraEntity(<Entity> entity,DrawStyle-option attribute) Entity

绑定外部非Draw产生的entity到标绘进行编辑

addGroup(String name) CustomDataSource

新增添加分组

checkGroupName(String name,CustomDataSource thisLayer) boolean

校验是否有同名分组,避免同名

getGroup(String name) CustomDataSource

根据name获取分组

addOrGetGroup(String name) CustomDataSource

新增或获取已有分组

removeGroup(String name) boolean

根据name删除分组

removeNullGroup() boolean

删除所有非空数组

activateGroup(String name) boolean

激活图层,新增的标绘是加到当前激活的图层中。

moveEntityGroup(Entity entity, CustomDataSource/String group/groupName) boolean

移动标号到新分组

setVisible(Boolean value)

设置所有绘制数据的可见性

hasDraw() Boolean

是否存在有绘制的entity

getEntityById(String id) Entity

获取指定id的实体对象(根据entity.attribute.attr.id校验)

getEntitys() Entity[]

获取所有绘制的实体对象列表

getDataSource() DataSource[]

获取内部保存绘制Entity的DataSource对象。

getCoordinates(Entity entity) []

获取实体的经纬度坐标数组

getPositions(Entity entity) []

获取实体的笛卡尔坐标数组

flyTo( Entity entity,Object options?)

视角飞行定位到entiy处

options支持:scale控制线面数据边界的放大比例,radius控制点数据视距距离
destroy() 销毁释放对象
方法名 返回值 说明
on(<String> type, <Function> fn, <Object> context?) this

将一个监听器函数(fn)添加到对象的特定事件类型。您可以选择指定侦听器的context(该事件方法内的this关键字将指向的对象)。您还可以传递几个空格分隔的类型(例如'click dblclick')。

on(<Object> eventMap) this

添加一组类型/侦听器对,例如 {click: onClick, mousemove: onMouseMove}

off(<String> type, <Function> fn?, <Object> context?) this

删除以前添加的监听器功能。如果没有指定函数,它将从对象中删除该特定事件的所有侦听器。请注意,如果您传递了一个自定义context参数进行on,则必须传递相同的context参数off才能删除该侦听器。

off(<Object> eventMap) this

删除一组类型/侦听器对。

off() this

删除绑定到对象上的所有事件。

fire(<String> type, <Object> data?, <Boolean> propagate?) this

触发指定类型的事件。您可以选择提供数据对象 - 监听器函数的第一个参数将包含其属性。该事件可以可选地传播到事件的父级。

listens(<String> type) Boolean

如果特定事件类型具有附加的侦听器,则返回true。

once() this

on(…)类似,区别在于监听器只执行1次,并且执行后自动释放。

addEventParent(<okay3dClass> obj) this

添加一个它的父级将接收传播的事件

removeEventParent(<okay3dClass> obj) this

删除一个绑定的addEventParent事件,删除后它将停止接收传播的事件

addEventListener() this

on(…)的别名,兼容不同用户的命名习惯

removeEventListener() this

off(…)的别名,兼容不同用户的命名习惯

clearAllEventListeners() this

off()的别名,兼容不同用户的命名习惯

addOneTimeEventListener() this

once(…)的别名,兼容不同用户的命名习惯

fireEvent() this

fire(…)的别名,兼容不同用户的命名习惯

hasEventListeners() Boolean

listens(…)的别名,兼容不同用户的命名习惯

Draw类中支持的事件类型常量

Event名称 说明
*.event.DrawStart 当 开始绘制 时触发。
DrawAddPoint 当 绘制过程中增加了点 时触发。
DrawRemovePoint 当 绘制过程中删除了点 时触发。
DrawMouseMove 当 绘制过程中鼠标移动了点 时触发。
DrawCreated 当 绘制结束创建完成 时触发。
EditStart 当 开始编辑 时触发。
EditMovePoint 当 编辑修改了点 时触发。
EditRemovePoint 当 编辑删除了点 时触发。
EditStop 当 停止编辑 时触发。
Delete 当 删除了对象 时触发。

tooltip标绘鼠标提示

okay3d.Draw.tooltip 该类是静态类。主要是Draw标绘过程中的鼠标提示信息,可以赋值后自定义设置提示文本。

提示信息 自定义设置

okay3d.Draw.tooltip.draw.point.start = '单击 完成绘制';
okay3d.Draw.tooltip.draw.polyline.start = '单击 开始绘制';
okay3d.Draw.tooltip.draw.polyline.cont = '单击增加点,右击删除点';
okay3d.Draw.tooltip.draw.polyline.end = '单击增加点,右击删除点<br />双击完成绘制';
okay3d.Draw.tooltip.draw.polyline.end2 = '单击完成绘制';  //已到达最大点数时提示

okay3d.Draw.tooltip.edit.start = '单击后 激活编辑';
okay3d.Draw.tooltip.edit.end = '释放后 完成修改';

okay3d.Draw.tooltip.dragger.def = '拖动 修改位置'; //默认拖拽时提示
okay3d.Draw.tooltip.dragger.addMidPoint = '拖动 增加点';
okay3d.Draw.tooltip.dragger.moveHeight = '拖动 修改高度';
okay3d.Draw.tooltip.dragger.editRadius = '拖动 修改半径';
okay3d.Draw.tooltip.dragger.editHeading = '拖动 修改方向';
okay3d.Draw.tooltip.dragger.editScale = '拖动 修改缩放比例';

okay3d.Draw.tooltip.del.def = '<br />右击 删除该点';
okay3d.Draw.tooltip.del.min = '无法删除,点数量不能少于';

dragger拖拽点控制类

okay3d.Draw.dragger 该类是静态类。主要是拖拽点控制处理。可以重新设置编辑时拖拽点颜色等。

编辑时拖拽点颜色 自定义设置

okay3d.Draw.dragger.PointColor.Control = Cesium.Color.fromCssColorString("#1c197d");          //位置控制拖拽点
okay3d.Draw.dragger.PointColor.MoveHeight = Cesium.Color.fromCssColorString("#9500eb");       //上下移动高度的拖拽点
okay3d.Draw.dragger.PointColor.EditAttr = Cesium.Color.fromCssColorString("#f73163");         //辅助修改属性(如半径)的拖拽点
okay3d.Draw.dragger.PointColor.AddMidPoint = Cesium.Color.fromCssColorString("#04c2c9").withAlpha(0.3);     //增加新点,辅助拖拽点

方法

方法名 返回值 说明
createDragger(CustomDataSource dataSource<Objcet> options) Point Entity

创建Dragger拖动点的公共方法

attr属性统一处理类

okay3d.Draw.attr 该类是静态类。用于entity通用相关属性处理,不用判断entity类型,内部自动处理,是对后续其他单个指定类型entity的属性处理的进一步便捷封装。

方法

方法名 返回值 说明
getPositions(Entity entity) Cartesian3 []

获取entity的坐标

getCenterPosition(Entity entity) Cartesian3

获取entity的的中心点坐标

getCoordinates(Entity entity) Array []

获取entity的坐标(geojson规范的格式)

toGeoJSON(Entity entity) JSON Object

将entity转换为GeoJSON对象,用于保存

style2Entity(<Objcet> style <Entity.billboard> entityattr?) Entity.billboard

将style属性配置信息更新至entity对象中

//创建entity时
var addattr = okay3d.Draw.attr.billboard.style2Entity({image: "img/mark.png"});
var entity = viewer.entities.add(addattr);

//更新entity时
okay3d.Draw.attr.billboard.style2Entity({image: "img/mark2.png"}, entity.billboard);
getDefStyle(<String> type, <Object> style?) Object 获取指定type的默认的标绘样式。

label对象属性处理类

okay3d.Draw.attr.label 该类是静态类。用于label entity相关属性处理。

方法

方法名 返回值 说明
style2Entity(<Objcet> style <Entity.label> entityattr?) Entity.label

将style属性配置信息更新至entity对象中

//创建entity时
var addattr = okay3d.Draw.attr.label.style2Entity({text: "天恒昕业三维地球"});
var entity = viewer.entities.add(addattr);

//更新entity时
okay3d.Draw.attr.label.style2Entity({text: "okay3d三维地球"}, entity.label);
getPositions(Entity entity) Cartesian3 []

获取label entity的坐标

getCoordinates(Entity entity) Array []

获取label entity的坐标(geojson规范的格式)

toGeoJSON(Entity entity) JSON Object

将label entity转换为GeoJSON对象,用于保存

point对象属性处理类

okay3d.Draw.attr.point 该类是静态类。用于point entity相关属性处理。

方法

方法名 返回值 说明
style2Entity(<Objcet> style <Entity.point> entityattr?) Entity.point

将style属性配置信息更新至entity对象中

//创建entity时
var addattr = okay3d.Draw.attr.point.style2Entity({color: "#ff0000"});
var entity = viewer.entities.add(addattr);

//更新entity时
okay3d.Draw.attr.point.style2Entity({color: "#0000ff"}, entity.point);
getPositions(Entity entity) Cartesian3 []

获取point entity的坐标

getCoordinates(Entity entity) Array []

获取point entity的坐标(geojson规范的格式)

toGeoJSON(Entity entity) JSON Object

将point entity转换为GeoJSON对象,用于保存

billboard对象属性处理类

okay3d.Draw.attr.billboard 该类是静态类。用于billboard entity相关属性处理。

方法

方法名 返回值 说明
style2Entity(<Objcet> style <Entity.billboard> entityattr?) Entity.billboard

将style属性配置信息更新至entity对象中

//创建entity时
var addattr = okay3d.Draw.attr.billboard.style2Entity({image: "img/mark.png"});
var entity = viewer.entities.add(addattr);

//更新entity时
okay3d.Draw.attr.billboard.style2Entity({image: "img/mark2.png"}, entity.billboard);
getPositions(Entity entity) Cartesian3 []

获取billboard entity的坐标

getCoordinates(Entity entity) Array []

获取billboard entity的坐标(geojson规范的格式)

toGeoJSON(Entity entity) JSON Object

将billboard entity转换为GeoJSON对象,用于保存

model对象属性处理类

okay3d.Draw.attr.model 该类是静态类。用于model entity相关属性处理。

方法

方法名 返回值 说明
style2Entity(<Objcet> style <Entity.model> entityattr?) Entity.model

将style属性配置信息更新至entity对象中

//创建entity时
var addattr = okay3d.Draw.attr.model.style2Entity({scale: 1});
var entity = viewer.entities.add(addattr);

//更新entity时
okay3d.Draw.attr.model.style2Entity({scale: 3}, entity.model);
getPositions(Entity entity) Cartesian3 []

获取model entity的坐标

getCoordinates(Entity entity) Array []

获取model entity的坐标(geojson规范的格式)

toGeoJSON(Entity entity) JSON Object

将model entity转换为GeoJSON对象,用于保存

polyline对象属性处理类

okay3d.Draw.attr.polyline 该类是静态类。用于polyline entity相关属性处理。

方法

方法名 返回值 说明
style2Entity(<Objcet> style <Entity.polyline> entityattr?) Entity.polyline

将style属性配置信息更新至entity对象中

//创建entity时
var addattr = okay3d.Draw.attr.polyline.style2Entity({color: "#ff0000"});
var entity = viewer.entities.add(addattr);

//更新entity时
okay3d.Draw.attr.polyline.style2Entity({color: "#0000ff"}, entity.polyline);
getPositions(Entity entity) Cartesian3 []

获取polyline entity的坐标

getCoordinates(Entity entity) Array []

获取polyline entity的坐标(geojson规范的格式)

toGeoJSON(Entity entity) JSON Object

将polyline entity转换为GeoJSON对象,用于保存

line2curve(Cartesian3 [] positions_draw) Cartesian3 []

坐标点数组 转为 贝塞尔曲线坐标点数组

polygon对象属性处理类

okay3d.Draw.attr.polygon 该类是静态类。用于polygon entity相关属性处理。

方法

方法名 返回值 说明
style2Entity(<Objcet> style <Entity.polygon> entityattr?) Entity.polygon

将style属性配置信息更新至entity对象中

//创建entity时
var addattr = okay3d.Draw.attr.polygon.style2Entity({color: "#ff0000"});
var entity = viewer.entities.add(addattr);

//更新entity时
okay3d.Draw.attr.polygon.style2Entity({color: "#0000ff"}, entity.polygon);
getPositions(Entity entity) Cartesian3 []

获取polygon entity的坐标

getCoordinates(Entity entity) Array []

获取polygon entity的坐标(geojson规范的格式)

toGeoJSON(Entity entity) JSON Object

将polygon entity转换为GeoJSON对象,用于保存

ellipse对象属性处理类

okay3d.Draw.attr.ellipse 该类是静态类。用于 圆及椭圆 ellipse entity相关属性处理。

方法

方法名 返回值 说明
style2Entity(<Objcet> style <Entity.ellipse> entityattr?) Entity.ellipse

将style属性配置信息更新至entity对象中

//创建entity时
var addattr = okay3d.Draw.attr.ellipse.style2Entity({color: "#ff0000"});
var entity = viewer.entities.add(addattr);

//更新entity时
okay3d.Draw.attr.ellipse.style2Entity({color: "#0000ff"}, entity.ellipse);
getPositions(Entity entity) Cartesian3 []

获取ellipse entity的坐标

getCoordinates(Entity entity) Array []

获取ellipse entity的坐标(geojson规范的格式)

toGeoJSON(Entity entity) JSON Object

将ellipse entity转换为GeoJSON对象,用于保存

getOutlinePositions(Entity entity<boolean> noAdd? <Number> count?) Cartesian3 []

获取圆对应的 边界 的坐标,noAdd标识是否闭合

count控制返回的点数量, 传入参数后共返回coutn*4个点,默认360个点

getOutlineCoordinates(Entity entity<boolean> noAdd? <Number> count?) Array []

获取圆对应的 边界 的坐标(geojson规范的格式),noAdd标识是否闭合

count控制返回的点数量, 传入参数后共返回coutn*4个点,默认360个点

rectangle对象属性处理类

okay3d.Draw.attr.rectangle 该类是静态类。用于rectangle entity相关属性处理。

方法

方法名 返回值 说明
style2Entity(<Objcet> style <Entity.rectangle> entityattr?) Entity.rectangle

将style属性配置信息更新至entity对象中

//创建entity时
var addattr = okay3d.Draw.attr.rectangle.style2Entity({color: "#ff0000"});
var entity = viewer.entities.add(addattr);

//更新entity时
okay3d.Draw.attr.rectangle.style2Entity({color: "#0000ff"}, entity.rectangle);
getPositions(Entity entity) Cartesian3 []

获取rectangle entity的坐标

getCoordinates(Entity entity) Array []

获取rectangle entity的坐标(geojson规范的格式)

toGeoJSON(Entity entity) JSON Object

将rectangle entity转换为GeoJSON对象,用于保存

getOutlinePositions(Entity entity<boolean> noAdd?) Cartesian3 []

获取矩形对应的 四个顶点边界 的坐标 ,noAdd标识是否闭合

getOutlineCoordinates(Entity entity<boolean> noAdd?) Array []

获取矩形对应的 四个顶点边界 的坐标(geojson规范的格式),noAdd标识是否闭合

其他对象属性处理类

okay3d.Draw.attr.**** 除了上面列举的外,其他entity均有对应的相关属性处理类,名称与entity对象相同。

雷达Entity

okay3d.RectangularSensorGraphics是实体类,提供自定义雷达效果的Entity对象展示。

使用示例

varsensorEntity = viewer.entities.add({
    position: position,
    orientation: Cesium.Transforms.headingPitchRollQuaternion(position, hpr), //同gltf的一样,设置方向
    rectangularSensor: new okay3d.RectangularSensorGraphics({
        radius: radius, //传感器的半径
        xHalfAngle: Cesium.Math.toRadians(xHalfAngle),  //传感器水平半角
        yHalfAngle: Cesium.Math.toRadians(yHalfAngle), //传感器垂直半角

        material: new Cesium.Color(0.0, 1.0, 1.0, 0.4),  //目前用的统一材质
        lineColor: new Cesium.Color(0.0, 1.0, 1.0, 1.0), //线的颜色

        showScanPlane: showScanPlane,  //是否显示扫描面
        scanPlaneColor: new Cesium.Color(0.0, 1.0, 1.0, 1.0), //扫描面颜色
        scanPlaneMode: 'vertical',  // 扫描面模式 垂直vertical/水平horizontal
        scanPlaneRate: 3,           //扫描速率,
        showThroughEllipsoid: false //此参数控制深度检测
    })
})

Options及属性选项

Option参数 参数类型 默认值 说明
show boolean true 是否显示
radius Number 传感器的半径
xHalfAngle Number 传感器水平半角
yHalfAngle Number 传感器垂直半角
material Color 材质,一般传颜色
lineColor Color 框线颜色
showScanPlane boolean true 是否显示扫描面
scanPlaneColor Color 扫描面颜色
scanPlaneMode String vertical 扫描面模式 垂直vertical/水平horizontal
scanPlaneRate Number 扫描速率
showThroughEllipsoid boolean true 此参数控制深度检测,为false启用深度检测,可以解决雷达一半在地球背面时显示的问题
slice Number 32 切分程度
showSectorLines boolean true 是否显示扇面的线
showSectorSegmentLines boolean true 是否显示扇面和圆顶面连接的线
showLateralSurfaces boolean true 是否显示侧面
lateralSurfaceMaterial Color undefined 侧面材质(Material)
showDomeSurfaces boolean true 是否显示圆顶表面
domeSurfaceMaterial Color undefined 圆顶表面材质(Material)
showDomeLines boolean true 是否显示圆顶面线
showIntersection boolean true 是否显示与地球相交的线
intersectionColor Color Color.WHITE 与地球相交的线的颜色
intersectionWidth Number 5.0 与地球相交的线的宽度(像素)

Div点

okay3d.DivPoint是实体类,提供div点,用于自定义动态效果的点对象展示,div中可以绑定任意html。

使用示例

var divpoint = new okay3d.DivPoint(viewer, {
    html: "任意html",
    position: Cesium.Cartesian3.fromDegrees(118.810112, 31.231319),
    anchor: [0, 0],
    data: item, //item为需要绑定的数据
    click: function (e) {//单击后的回调 

    }
});

Options参数选项

Option参数 参数类型 默认值 说明
html String 绑定的html代码,一般为div
position Cartesian3 坐标
anchor [Number,Number] [0,0] 展示位置的横、纵偏移量
click function 绑定的单击事件回调
popup html 绑定框架支持的popup鼠标单击信息提示
tooltip html 绑定框架支持的tootip鼠标移入信息提示
distanceDisplayCondition DistanceDisplayCondition 在指定的相机视距范围内显示
scaleByDistance NearFarScalar 按指定缩放规则进行缩放处理
heightReference HeightReference 高度模式,主要用于无高度值时可以指定贴地
depthTest boolean true 是否进行深度检测,false时地球遮挡等情况下一直可见

属性

属性名 类型 说明
dom DOM对象(只读)

该html对应的DOM对象,可以进行其他自定义操作

visible Boolean

设置点的显示或隐藏状态

html String 绑定的html代码,一般为div
popup html 绑定框架支持的popup鼠标单击信息提示
tooltip html 绑定框架支持的tootip鼠标移入信息提示
depthTest boolean 是否进行深度检测,false时地球遮挡等情况下一直可见

方法

方法名 返回值 说明
showPopup() void

如有绑定popup时,将popup弹出显示

closePopup() void

如有绑定popup时,将popup关闭

destroy() void

释放销毁对象

动态河流

okay3d.DynamicRiver是实体类,提供动态河流效果的矢量对象展示。

使用示例

var river = new okay3d.DynamicRiver(viewer, {
    image: './img/textures/movingRiver.png',
    positions: pots,
    width: 200,
    height: 10,
    speed: 10, 
});

Options参数选项

Option参数 参数类型 默认值 说明
position Cartesian3 坐标
image String 材质图片url路径
flipY boolean false 是否Y方向,用于控制图片横纵方向
width Number 10 河宽度
height Number 0 高程高度值
alpha Number 0.5 透明度
move boolean true 是否流动
speed Number 1.0 流动时的流速
moveDir boolean true 控制流速的方向
moveVar Cartesian3 Cesium.Cartesian3(50, 1, 100) 控制流速的水面动画

属性

属性名 类型 说明
flipY boolean 是否Y方向,用于控制图片横纵方向
width Number 河宽度
height Number 高程高度值
alpha Number 透明度
move boolean 是否流动
speed Number 流动时的流速
moveDir boolean 控制流速的方向
moveVar Cartesian3 控制流速的水面动画

方法

方法名 返回值 说明
setPositions( Cartesian3 [] positions) void

初始化没传坐标时,可后续设置坐标

destroy() void

释放销毁对象

粒子效果扩展

okay3d.ParticleSystemEx是实体类,提供对Cesium原生的ParticleSystem进一步封装,达到简化使用的目的。

使用示例

var particleSystemEx = new okay3d.ParticleSystemEx(viewer, {
    //ParticleSystem原生属性
    image: './img/particle/smoke.png',
    startColor: Cesium.Color.LIGHTCYAN.withAlpha(0.3),    //粒子出生时的颜色
    endColor: Cesium.Color.WHITE.withAlpha(0.0),   //当粒子死亡时的颜色

    particleSize: 20,  //粒子图片的Size大小(单位:像素)
    startScale: 2.0, //粒子在出生时的比例(单位:相对于imageSize大小的倍数)
    endScale: 4.0,   //粒子在死亡时的比例(单位:相对于imageSize大小的倍数)

    minimumParticleLife: 1.0,//粒子可能存在的最短寿命时间,实际寿命将随机生成(单位:秒)
    maximumParticleLife: 3.0,//粒子可能存在的最长寿命时间,实际寿命将随机生成(单位:秒)

    emissionRate: 200, //粒子发射器的发射速率 (单位:次/秒)

    //扩展的属性
    position: Cesium.Cartesian3.fromDegrees(117.221844, 31.813857, 28.5), //位置
    gravity: -11,  //重力因子,会修改速度矢量以改变方向或速度(基于物理的效果)
    target: new Cesium.Cartesian3(-0.151, 0.294, 0.225), // 粒子的方向 
    maxHeight: 5000,  //超出该高度后不显示粒子效果 
})

Options参数选项

Option参数 参数类型 默认值 说明
image String 粒子对象的图片url路径
particleSize Number 25 粒子对象的大小(像素值)
其他ParticleSystem原生属性 Cesium.ParticleSystem原生所有属性均支持
position Cartesian3 当粒子是固定位置时,传入的具体坐标
modelMatrix function 当粒子是基于运动的对象时,可以传入modelMatrix来控制粒子的实时运动位置
modelMatrix(time) { 
    //entity是运动的小汽车对象
    return entity.computeModelMatrix(time, new Cesium.Matrix4());
}
gravity Number 0 重力因子,会修改速度矢量以改变方向或速度(基于物理的效果)
target Cesium.Cartesian3 Cesium.Cartesian3(0, 0, 0) 粒子的运动方向
maxHeight Number 5000 超出该高度后不显示粒子效果,因为超出一定高度后粒子都拥挤在一起,很不美观。
transX Number 0 在粒子系统本地坐标系中转换粒子系统发射器时的x方向值
transY Number 0 在粒子系统本地坐标系中转换粒子系统发射器时的y方向值
transZ Number 0 在粒子系统本地坐标系中转换粒子系统发射器时的z方向值
hasDefUpdate boolean true 控制内部是否进行 updateCallback 回调处理

属性

属性名 类型 说明
particleSystem Cesium.ParticleSystem Cesium原生的粒子对象
show boolean 粒子对象的显示隐藏状态
particleSize Number 粒子对象的大小(像素值)
position Cartesian3 当粒子是固定位置时,传入的具体坐标
modelMatrix function 当粒子是基于运动的对象时,可以传入modelMatrix来控制粒子的实时运动位置
modelMatrix(time) { 
    //entity是运动的小汽车对象
    return entity.computeModelMatrix(time, new Cesium.Matrix4());
}
target Cesium.Cartesian3 粒子的运动方向

方法

方法名 返回值 说明
destroy() void

释放销毁对象

水面对象

okay3d.water.createWaterPrimitive是一个创建动态水面primitive对象的方法

使用示例

//水效果
var polygon = new Cesium.PolygonGeometry({
    height: height,  //水面高
    perPositionHeight: true,
    extrudedHeight: height, //底部高
    polygonHierarchy: new Cesium.PolygonHierarchy(positions),
});
var primitive = okay3d.water.createWaterPrimitive(polygon, {
    normalMap: './img/textures/waterNormals.jpg', //水正常扰动的法线图 
    frequency: 9000.0,     //控制波数的数字。
    animationSpeed: 0.03,   //控制水的动画速度的数字。
    amplitude: 5.0,         //控制水波振幅的数字。
    specularIntensity: 0.2,  //控制镜面反射强度的数字。  
    baseWaterColor: "#123e59", //rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
    blendColor: "#123e59"     //从水中混合到非水域时使用的rgba颜色对象。
})
viewer.scene.primitives.add(primitive);

Options参数选项

Option参数 参数类型 默认值 说明
normalMap String 水正常扰动的法线图url路径
frequency Number 8000 控制波数的数字。
animationSpeed Number 0.03 控制水的动画速度的数字。
amplitude Number 5.0 控制水波振幅的数字。
specularIntensity Number 0.8 控制镜面反射强度的数字。
baseWaterColor String #123e59 rgba颜色对象基础颜色的水。
blendColor String #123e59 从水中混合到非水域时使用的rgba颜色对象。
clampToGround boolean false 是否贴地

动画线材质

okay3d.LineFlowMaterial是实体类,提供动画线材质扩展,可以用于polyline、wall等Etnity的material绑定。

使用示例

//示例:箭头动态特效
viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            117.150141, 31.833051, 33.9,
            117.166225, 31.819655, 44.6,
            117.195088, 31.807772, 42.3
        ]),
        width: 5,
        material: new okay3d.LineFlowMaterial({//动画线材质
            color: Cesium.Color.CHARTREUSE,
            duration: 1000, //时长,控制速度
            url: 'img/textures/ArrowOpacity.png'
        }),
    }
});

Options参数选项

Option参数 参数类型 默认值 说明
color Color new Cesium.Color(0, 0, 0, 0) 颜色
duration Number 1000 动画时长,单位:毫秒
url String 贴图url地址
repeat Cesium.Cartesian2 new Cesium.Cartesian2(1.0, 1.0) 横纵方向的贴图,重复次数
axisY Boolean false 是否为Y轴方向,用于指定横纵方向

动态波纹材质

okay3d.CircleFadeMaterial是实体类,提供动态波纹效果材质扩展,可以用于ellipse Etnity的material绑定,模拟动态点波纹。

使用示例

var center = Cesium.Cartesian3.fromDegrees(117.29, 32.0581, 1); 
viewer.entities.add({
    position: center,
    ellipse: {
        height: 0.0,
        semiMinorAxis: 80000.0,
        semiMajorAxis: 80000.0,
        material: new okay3d.CircleFadeMaterial({
            color: new Cesium.Color(77 / 255, 201 / 255, 255 / 255, 0.9)
        }),
    }
});

Options参数选项

Option参数 参数类型 默认值 说明
color Color 颜色
duration Number 1000 动画时长,单位:毫秒

多圈动态波纹材质

okay3d.CircleWaveMaterial是实体类,提供动态波纹效果材质扩展,可以用于ellipse Etnity的material绑定,模拟动态点波纹(多个圈)。

使用示例

var center = Cesium.Cartesian3.fromDegrees(117.29, 32.0581, 1); 
viewer.entities.add({
    position: center,
    ellipse: {
        height: 0.0,
        semiMinorAxis: 500.0,
        semiMajorAxis: 500.0,
        material: new okay3d.CircleWaveMaterial({
            duration:2000,//动画时长,单位:毫秒
            color: Cesium.Color.CHARTREUSE,
            gradient:0,
            count:3
        }),
    }
});

Options参数选项

Option参数 参数类型 默认值 说明
color Color 颜色
duration Number 1000 动画时长,单位:毫秒
count Number 2 圆圈个数
gradient Number 0.1 透明度的幂方(0-1),0表示无虚化效果,1表示虚化成均匀渐变

文字贴图材质

okay3d.TextMaterial是实体类,提供文字贴图材质扩展,可以用于面状Etnity的material绑定,模拟不同文字效果。

使用示例

  viewer.entities.add({
    name: '路面文字',
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(121.479989, 29.791162, 121.480114, 29.791201),
        classificationType: Cesium.ClassificationType.BOTH,
        material: new okay3d.TextMaterial({
            text: '火 星 路',
            textStyles: {
                font: '50px 楷体',
                fill: true,
                fillColor: Cesium.Color.DARKGREEN,
                stroke: true,
                strokeWidth: 3,
                strokeColor: Cesium.Color.WHITE,
                backgroundColor: new Cesium.Color(0.0, 0.0, 0.0, 0),
            },
        }),
        rotation: Cesium.Math.toRadians(163),
        stRotation: Cesium.Math.toRadians(163),
    }
});

Options参数选项

Option参数 参数类型 默认值 说明
color Color 颜色
text String 显示的文本
textStyles Object
{
    font: '50px 楷体',
    fill: true,
    fillColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
    stroke: true,
    strokeWidth: 2,
    strokeColor: new Cesium.Color(1.0, 1.0, 1.0, 0.8),
    backgroundColor: new Cesium.Color(1.0, 1.0, 1.0, 0.1),
    textBaseline: 'top',
    padding: 40,
}
设置文本的相关配置及样式,具体参数参考 writeTextToCanvas

Measure量算类

okay3d.analysi.Measure是实体类,提供测量长度、面积、高度等处理类。

创建对象

创建示例 说明
okay3d.analysi.Measure(<measure options> options) 根据相关参数创建一个量算控制器

使用示例

var measure = new okay3d.analysi.Measure({
    viewer: viewer,
    removeScreenSpaceEvent: true,
    label: {//设置文本样式
        "color": "#ffffff",
        "font_family": "楷体",
        "font_size": 20,
        "background": false,
    }
});
measureSurface.length();//测量长度
measureSurface.area();//测量面积                                 
measureSurface.height();//测量高度
measureSurface.clear();//清除

Options参数选项

Option参数 参数类型 默认值 说明
viewer viewer 必须传入 当前的地球对象viewer
label Object {"color": "#ffffff","font_size": 20} 显示测量结果文本的字体样式,支持Draw类的lable所有style
*** Draw类支持的所有options

测量方法中 Options参数选项

measureLength、measureHeight、measureArea方法参数值,可选Options参数选项
Option参数 参数类型 默认值 说明
unit String null 指定显示测试结果的的计量单位,未指定时内部会自动处理显示。
长度高度可选值有:km(公里)、mile(海里)、m(米)、zhang(丈)
面积可选值有: m(平方米)、km(平方公里)、mu(亩)、ha(公顷)
splitNum Number 贴地线面的step插值分割的个数(控制精度),个数越多分析越慢
style Object null 支持对应类型的Draw类所有styel设置

属性

属性名 类型 说明
draw Draw 内部生成的Draw类标绘对象
dataSource CustomDataSource

图层对象,存储了标绘及量算结果内所有entity对象集合

方法

方法名 返回值 说明
length(MeasureFun Options options) void

长度测量

surfaceLength(MeasureFun Options options) void

贴地长度测量

section(MeasureFun Options options) void

剖面分析

area(MeasureFun Options options) void

面积测量

surfaceeArea(MeasureFun Options options) void

贴地面积测量

height(MeasureFun Options options) void

高度测量

triangleHeight(MeasureFun Options options) void

三角高度测量

angle(MeasureFun Options options) void

角度测量

point(MeasureFun Options options) void

坐标测量

updateUnit(String unit) void

更新单位

clear() void

清除所有测量结果

stopDraw() void

停止绘制,但不清除已有的绘制。

endDraw() void

外部控制,等价于双击完成绘制,比如手机端无法双击结束

formatArea(<Number> val,<String> unit?) String

进行单位换算,格式化显示面积

unit可选值有: m(平方米)、km(平方公里)、mu(亩)、ha(公顷)
formatLength(<Number> val, <String> unit?) String

进行单位换算,格式化显示长度

unit可选值有: km(公里)、mile(海里)、m(米)、zhang(丈)

事件

使用对象的on方法绑定,off方法释放,调用方式示例:
xxx.on(okay3d.analysi.Measure.event.end, function (e) {
    console.log("执行了事件回调方法")
})
Event Data 说明
start Event 开始异步分析时(如贴地长度、贴地面积等)触发。
change Event 当分析中高度发送变化时触发。
end Event 结束分析后触发。
delete Event 删除了测量结果后触发

方量分析

okay3d.analysi.MeasureVolume是实体类,提供基于方量分析测量填挖方体积的计算。

对绘制面(墙)内的进行以下计算。 1. 挖方量: 计算“基准面”到地表之间的凸出部分进行挖掉的体积。 2. 填方量:计算“基准面”与“墙底部”之间的缺少部分进行填平的体积。

使用示例

var measureObj = new okay3d.analysi.MeasureVolume({
    viewer: viewer,
    removeScreenSpaceEvent: true,
    label: {//【计算结果】文本样式
        "color": "#ffffff",
        "font_family": "楷体",
        "font_size": 20,
    }
}); 

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
heightLabel boolean true 是否显示各绘制点的海拔高度值
offsetLabel boolean false 是否显示绘制点的离基准面高度值
label Object { "color": "#ffffff", "font_size": 20, "pixelOffset": [0, -15], "visibleDepth": false } 测量结果文本的字体样式,支持Draw类的lable所有style
labelHeight Object { "color": "#ffffff", "font_size": 20, "pixelOffset": [0, -15], "visibleDepth": false } 各坐标点的海拔文本样式,支持Draw类的lable所有style
polygon Object { "color": "#00fff2", "opacity": 0.3, } 绘制的面的样式,支持Draw类的polygon所有style
polygonJzm Object { "color": "#00fff2", "opacity": 0.3, } 基准面的样式,支持Draw类的polygon所有style

属性

属性名 类型 说明
height Number 基准面高度,默认为最低点的高度值
maxHeight Number 最大高度,主要用于显示墙高度
minHeight Number 最低高度,墙底部高度
polygonMaxHeight Number 【只读】面内的最高地表高度
interPolygonObj Object 【只读】内部插值的三角面对象

startDraw方法Options参数选项

Option参数 参数类型 默认值 说明
splitNum Number 10 面内插值次数,控制精度[注意精度越大,分析时间越长]
has3dtiles boolean false 是否再3dtiles模型上分析,如果是改为true

方法

方法名 返回值 说明
startDraw(Object options) void

激活绘制面,进行分析绘制区域结果的体积

start( Cartesian3 [] positions) void

通过传入坐标进行分析

selecteHeight() void

激活图上绘制,点选基准面

clear() void

清除分析

destroy() void

销毁释放对象

事件

使用对象的on方法绑定,off方法释放,调用方式示例:
xxx.on(okay3d.analysi.MeasureVolume.event.end, function (e) {
        console.log("执行了事件回调方法")
    })
    
Event Data 说明
start Event 开始分析时触发。
change Event 当修改变量,分析结果发生变化时触发。
end Event 结束分析后触发。

坡度坡向分析

okay3d.analysi.Slope是实体类,提供基于计算绘制的范围内的插值点的坡度坡向值。

使用示例

var slope = new okay3d.analysi.Slope({
    viewer: viewer,
    point: {
        show: true,
        pixelSize: 9,
        color: Cesium.Color.RED.withAlpha(0.5),
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
    },
    arrow: {
        show: true,
        scale: 0.3, //箭头长度的比例(范围0.1-0.9)
        width: 15,  //箭头宽度
        color: Cesium.Color.YELLOW
    },
    tooltip: function (entity) {//自定义tooltip显示内容
        var attr = entity.properties;
        return `坡度: ${attr.slopeStr1}  (${attr.slopeStr2}) 坡向: ${attr.direction}°`
    }, 
}) 

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
arrow Object {show:true, scale:0.3, width:1.5, color:Cesium.Color.YELLOW} 箭头的显示对象相关属性
point Object {show:true, pixelSize:9, width:1.5, color:Cesium.Color.RED.withAlpha(0.5)} 坡度点的显示对象相关属性
tooltip String/function 绑定的tooltip显示对象,格式参考tooltip示例规范
positions Cartesian3 [] positions) null 需要分析的面的边界点

方法

方法名 返回值 说明
add( Cartesian3 [] positions, Object options) void

通过传入坐标进行分析

options支出下面参数:
slope.add(positions, {
    splitNum: splitNum,  //splitNum插值分割的个数
    radius: 1, //缓冲半径(影响精度)
    count: 4   //缓冲的数量,会求周边(count*4)个点(影响精度)
});
clear() void

清除分析

destroy() void

销毁释放对象

事件

使用对象的on方法绑定,off方法释放,调用方式示例:
xxx.on(okay3d.analysi.Slope.event.end, function (e) {
    console.log("执行了事件回调方法")
})
Event Data 说明
endItem Event 每分析完成一个点后触发
end Event 完成所有分析后触发。
click Event 单击分析结果对象后触发
mouseOver Event 鼠标分析结果对象后触发
mouseOut Event 鼠标移出分析结果对象后触发

地下模式

okay3d.analysi.Underground是实体类,提供开启地下模式浏览方式。

使用示例

var underObj = new okay3d.analysi.Underground({
    viewer: viewer,
    alpha: 0.5,
    enable: true,
}); 

start方法Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
alpha Number 0.5 地表透明度 0-1
enable boolean false 是否开启地表透明

属性

属性名 类型 说明
depth Number 允许相机地下深度(相对于地表海拔)
alpha Number 地表透明度 0-1
enable boolean 是否开启地表透明

淹没分析(Entity)

okay3d.analysi.FloodByEntity是实体类,提供polygon Entity模拟的平面 淹没分析效果。

使用示例

var floodByEntity  = new okay3d.analysi.FloodByEntity({viewer:viewer});
//开始分析
floodByEntity.start(drawEntity, {
    height: minValue,
    maxHeight: maxValue,
    speed: speed,
});  

start方法Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
height Number 当前海拔高度,一般为分析的最低点高程
maxHeight Number 分析的最高点高程
speed Number 淹没速度 ,单位 :米/秒

属性

属性名 类型 说明
height Number

当前淹没到的海拔高度

方法

方法名 返回值 说明
start(Entity entity, Object options) void

开始分析

clear() void

停止并清除分析结果

事件

使用对象的on方法绑定,off方法释放,调用方式示例:
floodByEntity.on(okay3d.analysi.FloodByEntity.event.start, function (e) {
    console.log("执行了事件回调方法")
})
Event Data 说明
start Event 开始分析时触发。
change Event 当分析中高度发送变化时触发。
end Event 结束分析后触发。

淹没分析(Terrain)

okay3d.analysi.FloodByTerrain是实体类,提供基于Globel材质处理的淹没分析效果。

使用示例

var floodObj = new okay3d.analysi.FloodByTerrain({
    viewer:viewer,
    positions: positions,
    minHeight: minValue,
    maxHeight: maxValue,
    speed: speed,
    visibleOutArea: visibleOutArea
});;  

start方法Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
height Number 当前海拔高度,一般为分析的最低点高程
minHeight Number 分析的最低点高程
maxHeight Number 分析的最高点高程
speed Number 淹没速度 ,单位 :米/秒
visibleOutArea boolean 非淹没区域显示

属性

属性名 类型 说明
show boolean 显示隐藏
speed Number 淹没速度 ,单位 :米/秒
visibleOutArea boolean 非淹没区域显示

方法

方法名 返回值 说明
start( Cartesian3 [] positions) void

开始淹没

stop() void

暂停淹没动画

restart() void

重新淹没

destroy() void

销毁释放对象

事件

使用对象的on方法绑定,off方法释放,调用方式示例:
floodObj.on(okay3d.analysi.FloodByTerrain.event.start, function (e) {
    console.log("执行了事件回调方法")
})
Event Data 说明
start Event 开始分析时触发。
change Event 当分析中高度发送变化时触发。
end Event 结束分析后触发。

地形开挖(平面)

okay3d.analysi.TerrainClipPlan是实体类,提供基于ClippingPlane裁剪地形的开挖分析效果。

使用示例

var terrainClip = new okay3d.analysi.TerrainClipPlan({
    viewer: viewer,
    positions: positions,
    height: height, //高度
    splitNum: 50, //wall边界插值数
    wallImg: './img/textures/excavate_side_min.jpg', //边界墙材质
    bottomImg: './img/textures/excavate_bottom_min.jpg'//底部区域材质
});  

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
height Number 当前海拔高度,一般为分析的最低点高程
positions Cartesian3 [] 挖地区域边界坐标数组
splitNum Number 边界墙 插值个数
wallImg String 边界墙材质 图片url
bottomImg String 底部区域材质 图片url

属性

属性名 类型 说明
show Boolean

显示隐藏开挖区域

height Number

当前淹没到的海拔高度

方法

方法名 返回值 说明
updateData( Cartesian3 [] positions) void

更新开挖区域

clear() void

清除开挖区域结果

地形开挖(材质)

okay3d.analysi.TerrainClip是实体类,提供基于Globe材质的裁剪地形的开挖分析效果。

使用示例

  var terrainExcavate = new okay3d.analysi.TerrainClip({
    viewer: viewer,
    positions: positions,
    height: height, 
    splitNum: 50, //wall边界插值数
    wallImg: './img/textures/excavate_side_min.jpg',
    bottomImg: './img/textures/excavate_bottom_min.jpg'
}); 

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
height Number 当前海拔高度,一般为分析的最低点高程
positions Cartesian3 [] 挖地区域边界坐标数组
splitNum Number 边界墙 插值个数
wallImg String 边界墙材质 图片url
bottomImg String 底部区域材质 图片url

属性

属性名 类型 说明
show Boolean

显示隐藏开挖区域

showSelfOnly Boolean

仅显示自己

height Number

当前淹没到的海拔高度

boundingSwell Number

点集合的包围盒膨胀数值

方法

方法名 返回值 说明
setPositions( Cartesian3 [] positions) void

初始化没传区域坐标时,可后续设置区域坐标

destroy() void

释放清除开挖区域结果

等高线

okay3d.analysi.ContourLine是实体类,提供基于Globe材质的等高线限定范围分析效果。

使用示例

var contourLine =  new okay3d.analysi.ContourLine({
    viewer:viewer,
    positions: positions
});

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
positions Cartesian3 [] 等高线区域边界坐标数组,默认可以不传入,后续更新
shadingType String 'none' 地表渲染效果类型:无nono, 高程 elevation, 坡度slope, 坡向aspect
width Number 1.5 等高线 线宽 ,单位:像素
spacing Number 100 等高线 间隔,单位:米
color Cesium.Color Cesium.Color.RED 等高线 颜色

属性

属性名 类型 说明
positions Cartesian3 [] 等高线区域边界坐标数组
shadingType String 地表渲染效果类型:无nono, 高程 elevation, 坡度slope, 坡向aspect
show Boolean

显示隐藏等高线

width Number 等高线 线宽 ,单位:像素
spacing Number 等高线 间隔,单位:米
color Cesium.Color 等高线 颜色

方法

方法名 返回值 说明
setPositions( Cartesian3 [] positions) void

初始化没传区域坐标时,可后续设置区域坐标

destroy() void

释放清除结果

模型剖切

okay3d.tiles.TilesClipPlan是实体类,提供基于ClippingPlane裁剪模型的剖切分析效果。

使用示例

 var clipTileset = new okay3d.tiles.TilesClipPlan({
    tileset:tileset,
    type:okay3d.tiles.TilesClipPlan.Type.Z,//切顶部
    distance:10//裁剪距离
});  

Options参数选项

Option参数 参数类型 默认值 说明
tileset Cesium3DTileset 3dtiles模型对象
type okay3d.tiles.TilesClipPlan.Type 剖切方向
distance Number 剖切距离 ,离模型中心原点的距离,单位:米

属性

属性名 类型 说明
type okay3d.tiles.TilesClipPlan.Type

剖切方向

distance Number

剖切距离 ,离模型中心原点的距离,单位:米

方法

方法名 返回值 说明
clear() void

清除剖切结果

建筑物混合遮挡

okay3d.tiles.MixedOcclusion是实体类,提供建筑物混合遮挡效果。 1.楼块不能遮挡道路、水系、绿地和标注等地图元素; 2.楼快之间,需要实现不透明的实际遮挡效果。

使用示例

 var fuseTileAndBG = new okay3d.tiles.MixedOcclusion( {
    viewer: viewer,
    alpha: 0.5
}); 

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
enabled Boolean true 是否启用
alpha Number 0.5 透明度

属性

属性名 类型 说明
enabled Boolean 是否启用
alpha Number 透明度

方法

方法名 返回值 说明
destroy() void

清除销毁对象

模型裁剪

okay3d.tiles.TilesClip是实体类,提供倾斜摄影模型的模型裁剪功能。该功能对3dtiles数据有要求,仅适用于无自带着色器的模型。

使用示例

 var  tilesetClip = new okay3d.tiles.TilesClip({
    viewer: viewer,
    tileset: tileset,
    positions: positions,
    clipOutSide: false
}); 

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
tileset Cesium3DTileset 3dtiles模型对象
positions Cartesian3 [] 裁剪模型的区域边界坐标
clipOutSide boolean false true裁剪区域外部部分,false裁剪区域内部部分

属性

属性名 类型 说明
tileset Cesium3DTileset 3dtiles模型对象
clipOutSide boolean true裁剪区域外部部分,false裁剪区域内部部分

方法

方法名 返回值 说明
destroy() void

清除销毁对象

模型压平

okay3d.tiles.TilesFlat是实体类,提供倾斜摄影模型的模型压平功能。该功能对3dtiles数据有要求,仅适用于无自带着色器的模型。

使用示例

 var  tilesetClip = new okay3d.tiles.TilesFlat({
    viewer: viewer,
    tileset: tileset,
    positions: positions,
    flatHeight: 0
}); 

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
tileset Cesium3DTileset 3dtiles模型对象
positions Cartesian3 [] 压平模型的区域边界坐标
flatHeight Number 0 压平区高度

属性

属性名 类型 说明
tileset Cesium3DTileset 3dtiles模型对象
flatHeight Number 压平区高度

方法

方法名 返回值 说明
destroy() void

清除销毁对象

模型淹没

okay3d.tiles.TilesFlood是实体类,提供倾斜摄影模型的模型模型淹没功能。该功能对3dtiles数据有要求,仅适用于无自带着色器的模型。

使用示例

 var  tilesetClip = new okay3d.tiles.TilesFlood({
    viewer: viewer,
    tileset: tileset,
    positions: positions,
    floodAll: false
}); 

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
tileset Cesium3DTileset 3dtiles模型对象
positions Cartesian3 [] 淹没分析的区域边界坐标
floodAll Boolean false 是否模型全局淹没
floodSpeed Number 5.5 淹没速度,米/秒(默认刷新频率为55Hz)
floodColor array [0.15, 0.7, 0.95, 0.5] 淹没颜色数组

属性

属性名 类型 说明
tileset Cesium3DTileset 3dtiles模型对象
floodAll Boolean 是否模型全局淹没

方法

方法名 返回值 说明
destroy() void

清除销毁对象

视频投射Video2D

okay3d.video.Video2D是实体类,提供html5 video视频源投射到三维场景中。

使用示例

var selectedView = new okay3d.video.Video2D(viewer, {                            
    dom: videoElement,
    aspectRatio: viewer.scene.camera.frustum.aspectRatio,
    fov: viewer.scene.camera.frustum.fov,
    dis: 2000
}); 

Options参数选项

Option参数 参数类型 默认值 说明
dom HTMLElement/DOM 视频播放的Html video对象
aspectRatio Number 宽高比
fov Number 相机水平张角
dis Number 10 视角距离
stRotation Number 0 材质方向 0-360
showFrustum Boolean true 投射的视椎体是否显示
camera 相机位置等参数

属性

属性名 类型 说明
play Boolean 视频播放机暂停
aspectRatio Number 宽高比
fov Number 相机水平张角
dis Number 视角距离
stRotation Number 材质方向 0-360
showFrustum Boolean 投射的视椎体是否显示
params object 只读 所有相机的参数

方法

方法名 返回值 说明
locate() void

切换相机到 呈现投影相机的第一视角

rotateCamera(String axis, Number deg) void

往axis方向旋转相机deg步长

destroy() void

释放销毁资源

事件

使用对象的on方法绑定,off方法释放,调用方式示例:
xxx.on(okay3d.video.Video2D.event.click, function (e) {
    console.log("执行了事件回调方法")
})
Event Data 说明
click Event 单击视频对象后触发
mouseOver Event 鼠标视频对象后触发
mouseOut Event 鼠标移出视频对象后触发

视频投射Video3D

okay3d.video.Video3D是实体类,提供html5 video视频源投射到三维场景中,同时也支持投射图片或颜色对象。

使用示例

 var selectedView = new okay3d.video.Video3D(viewer, {
    type: okay3d.video.Video3D.Type.Video,
    url: "http://reparo147.okaygis.com:18012/mapdata/video/lukou.mp4",
    cameraPosition: cameraPosition,
    position: position,
    alpha: alpha, 
});  

Options参数选项

Option参数 参数类型 默认值 说明
type okay3d.video.Video3D.Type *.Type.Video 类型,视频、图片、颜色
cameraPosition Cartesian3 相机位置
position Cartesian3 目标视点位置
alpha Number 1.0 透明度 0 - 1
url String 视频或图片的url地址
color Color 颜色投放时的,颜色值
showFrustum Boolean true 投射的视椎体是否显示
aspectRatio Number 宽高比
fov Number 相机水平张角

属性

属性名 类型 说明
cameraPosition Cartesian3 相机位置
position Cartesian3 目标视点位置
alpha Number 透明度 0 - 1
showFrustum Boolean 投射的视椎体是否显示
aspectRatio Number 宽高比
fov Number 相机水平张角
show Boolean 显示和隐藏
videoPlay Boolean 切换视频 播放/暂停

方法

方法名 返回值 说明
locate() void

切换相机到 呈现投影相机的第一视角

destroy() void

释放销毁资源

通视分析

okay3d.analysi.Sightline是实体类,提供通视分析功能。

使用示例

var sightline = new okay3d.analysi.Sightline({viewer:viewer});
sightline.add(positions1, positions2);//添加需要分析的起止点 

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
originPoint Cartesian3 通视分析 起始点位置
targetPoint Cartesian3 通视分析 目标点位置
visibleAreaColor Color 可视区域颜色
hiddenAreaColor Color 不可视区域颜色

属性

属性名 类型 说明
visibleAreaColor Color 可视区域颜色
hiddenAreaColor Color 不可视区域颜色

方法

方法名 返回值 说明
add( Cartesian3 origin, Cartesian3 target) void

添加分析

clear() void

清除所有分析结果

destroy() void

释放销毁资源

事件

使用对象的on方法绑定,off方法释放,调用方式示例:
xxx.on(okay3d.analysi.Sightline.event.end, function (e) {
    console.log("执行了事件回调方法")
})
Event Data 说明
end Event 完成分析后触发。

可视域分析

okay3d.analysi.ViewShed3D是实体类,提供可视域分析功能。

使用示例

 var selectedView = new okay3d.analysi.ViewShed3D({                        
        viewer: viewer,
        horizontalAngle: horizontalAngle,
        verticalAngle: verticalAngle,
        distance: distance, 
    })  

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
cameraPosition Cartesian3 相机位置 ,无值时通过鼠标绘制获取
viewPosition Cartesian3 目标视点位置,无值时通过鼠标绘制获取
alpha Number 0.5 透明度 0 - 1
horizontalAngle Number 水平张角
verticalAngle Number 垂直张角
showFrustum Boolean true 投射的视椎体是否显示
distance Number 可视距离 , 已传viewPosition值时,该参数无效
visibleAreaColor Color new Cesium.Color(0, 1, 0) 可视区域颜色
hiddenAreaColor Color new Cesium.Color(1, 0, 0) 不可视区域颜色

属性

属性名 类型 说明
cameraPosition Cartesian3 相机位置 ,无值时通过鼠标绘制获取
viewPosition Cartesian3 目标视点位置,无值时通过鼠标绘制获取
alpha Number 透明度 0 - 1
horizontalAngle Number 水平张角
verticalAngle Number 垂直张角
showFrustum Boolean 投射的视椎体是否显示
distance Number 可视距离
visibleAreaColor Color 可视区域颜色
hiddenAreaColor Color 不可视区域颜色
show Boolean 显示和隐藏

方法

方法名 返回值 说明
destroy() void

释放销毁资源

飞行漫游路线

okay3d.FlyLine是实体类,提供飞行漫游路线控制。参数建议从“基础项目” 的“飞行漫游”功能界面操作后保存JSON后拷贝传入。

使用示例

//flydata数据值可以从“基础项目” 的“飞行漫游”功能界面操作后保存JSON
var flydata = {
    "viewer": viewer, 
    "name": "城市飞行",
    "points": [
        [117.245989, 31.852285, 100],
        [117.246347, 31.834418, 300],
        [117.246703, 31.816635, 500]
    ],
    "speed": 100,
    "camera": { "type": "gs", "followedX": 50, "followedZ": 10 },
    "model": {
        "show": true,
        "uri": "http://reparo147.okaygis.com:18012/mapdata/gltf/mars/zhanji.glb",
        "scale": 0.01,
        "minimumPixelSize": 100
    },
    "path": { "show": true, "color": "#ffff00", "opacity": 0.5, "width": 1,"isAll":false },
    "interpolation": false,  //setInterpolationOptions插值 
    "shadow": [{ "show": true, "type": "wall" }]
};
flyLine = new okay3d.FlyLine(viewer,flydata);
flyLine.start();

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
id String 0 标识路线唯一值,无特殊意义
name String 路线名称,无特殊意义
points [[x, y, z],[x, y, z]…] 路线坐标数组,按坐标路线进行漫游
speed Number/Array 飞行速度 ,km/h
camera Object { "type": "gs", "followedX": 50, "followedZ": 10 } 对漫游时空中飞行时的相机视角进行设置,可以设置跟随视角、锁定第一视角等效果
shadow [Object] 对一些辅助的漫游效果的额外entity对象的控制配置,如空中飞行时的对地投影显示效果进行配置,支持墙和圆锥
interpolation boolean false 是否对路线进行setInterpolationOptions插值
interpolationDegree Number 2 对路线进行插值时的interpolationDegree参数设置
clockRange Cesium.ClockRange Cesium.ClockRange.UNBOUNDED 赋值给viewer.clock.clockRange ,控制播放结束后的行为。如:
Cesium.ClockRange.CLAMPED, // 到达终点后停止
Cesium.ClockRange.LOOP_STOP, //到达终止时间后 循环从头播放  
clockLoop boolean false 是否结束后继续循环漫游路线,等价于clockRange:Cesium.ClockRange.LOOP_STOP
autoStop boolean false 到达结束时间后,是否自动stop ,仅限在clockRange:Cesium.ClockRange.UNBOUNDED
showGroundHeight boolean false 是否在label中显示离地高度
model Object { "show": false, "scale": 1, "minimumPixelSize": 50 } 对漫游时显示的gltf模型进行配置,支持Draw中的所有可配置属性
label Object { "show": false, "color": "#ffffff", "font_family": "楷体", "font_size": 20 } 对漫游时显示的文字注记进行配置,支持Draw中的所有可配置属性
path Object { "show": false, "lineType": "solid", "color": "#3388ff", "opacity": 0.5, "width": 1 } 对漫游时显示的轨迹路线进行配置,支持Draw中的所有可配置属性
pauseTime Number/function 在漫游到各点时暂停的时间(单位:秒)
onStep function 播放到每一个坐标时的回调方法
"onStep": function (currIndex, allCount) {
    console.log('已漫游过点:' + currIndex);
}

属性

属性名 类型 说明
popup 设置或获取漫游的模型关联的popup弹窗配置
info objcet 只读 获取实时的漫游点信息,包含:已飞行时间time,已飞行距离len,所在坐标x、y、z
position Cartesian3 只读 当前实时坐标位置
hdr HeadingPitchRoll 获取当前实时hdr方向信息
orientation Quaternion 获取当前实时orientation方向信息
matrix Matrix4 获取当前实时矩阵信息

方法

方法名 返回值 说明
start(function onEnd ) void

开始漫游

pause() void

暂停漫游

proceed() void

继续漫游

stop() void

停止漫游

centerAt(Object opts?) void

相机视角定位至 路线全视角的 矩形范围内

flyTo(Object opts?) void

相机视角定位至移动的目标点当前位置

clampToGround(function onEnd,Object opts? ) void

贴地漫游时,计算并生成贴地路线

opts控制参数:has3dtiles是否贴模型,splitNum插值次数

//贴地时,异步计算完成后开始
flyLine.clampToGround(function () {//异步计算完成贴地后再启动
    flyLine.start();

}, { has3dtiles: true }); //has3dtiles为true时贴模型表面
updateConfig(FlyLine Options params) void

更新参数,支持Options所有值 ,兼容历史版本命名updateStyle

updateAngle( boolean isAuto, object opts) void

更新角度(opts支持heading, pitch, roll),isAuto时基于移动位置自动计算方位

toGeoJSON() Object

生成json格式规范的路线数据,与传入Flyline时的options是一致的。

toCZML() Object

生成CZML格式规范的路线数据。

destroy() void

释放所有资源

事件

使用对象的on方法绑定,off方法释放,调用方式示例:
xxx.on(okay3d.FlyLine.event.end, function (e) {
    console.log("执行了事件回调方法")
})
Event Data 说明
start Event 开始漫游时触发。
endItem Event 每经过一个传入的路线坐标点时触发。
end Event 完成漫游后触发。

场景雾效果

okay3d.scene.FogEffect是实体类,提供场景雾效果。

使用示例

var fogEffect = new okay3d.scene.FogEffect({
    viewer: viewer,
    color: new Cesium.Color(0.8, 0.8, 0.8, 0.5)
});

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
show boolean true 是否开启效果
fogByDistance Cesium.Cartesian4 new Cesium.Cartesian4(10, 0.0, 1000, 0.9) 雾强度
color Color new Cesium.Color(0.8,0.8,0.8,0.5) 颜色
maxHeight Number 9000 大于此高度时不显示效果

属性

属性名 类型 说明
show boolean 是否开启效果
fogByDistance Cesium.Cartesian4 雾强度
color Color 颜色

方法

方法名 返回值 说明
destroy() void

释放销毁对象

倒影效果

okay3d.scene.InvertedScene是实体类,提供倒影效果。

使用示例

var inverted = new okay3d.scene.InvertedScene({ viewer: viewer });

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
show boolean true 是否开启效果

属性

属性名 类型 说明
show boolean 是否开启效果

方法

方法名 返回值 说明
destroy() void

释放销毁对象

雪覆盖效果

okay3d.scene.SnowCover是实体类,提供雪覆盖效果。

使用示例

 var snowCover = new okay3d.scene.SnowCover({
    viewer: viewer,
    alpha:0.5
});

Options参数选项

Option参数 参数类型 默认值 说明
viewer Viewer 地球对象
show boolean true 是否开启效果
alpha Number 1.0 雪覆盖强度

属性

属性名 类型 说明
show boolean 是否开启效果
alpha Number 雪覆盖强度

方法

方法名 返回值 说明
destroy() void

释放销毁对象

地图放大缩小控制

okay3d.ZoomNavigation是实体类,提供地图放大或缩小的控制。

使用示例

//放大
var zoomIn = new okay3d.ZoomNavigation(viewer, true);
$("#btn-zommIn").click(function () {
    zoomIn.activate();
});

//缩小
var zoomOut = new okay3d.ZoomNavigation(viewer, false);
$("#btn-ZoomOut").click(function () {
    zoomOut.activate();
}); 

方法

方法名 返回值 说明
activate() void

放大或缩小地图

point坐标处理类

okay3d.point 该类是静态类。坐标转换处理类。

方法

方法名 返回值 说明
formatNum( Number num,Int digits) Number

格式化数字,返回指定digits长度的小数位数,比如经纬度通常6位小数

formatPositon( Cartesian3 position) Object

格式化坐标点为可显示的可理解格式,返回值示例:{ "x": 117.222228,"y": 31.787488, "z": 224 }。

getPositionValue( Cartesian3 position) Cartesian3

获取position的最终value值,因为cesium经常属性或绑定一层,通过该方法可以内部去判断是否有getValue或_value进行取最终value值。

formatRectangle( Rectangle position) Object

格式化Rectangle为可显示的可理解格式,返回值示例:{ "xmin": 115.123456,"xmax": 119.222228,"ymin": 30.123456,"ymax": 33.787488}。

getMaxHeight( Cartesian3 [] positions, Number defaultVal?) Number

获取坐标数组中最高高程值,defaultVal为默认高度值,没有传入时为0。

addPositionsHeight( Cartesian3 [] positions, Number addHeight) Cartesian3 []

在坐标基础海拔上增加指定的addHeight海拔高度值

setPositionsHeight( Cartesian3 [] positions, Number height) Cartesian3 []

设置坐标中海拔高度为指定的height高度值

getSurfaceHeight(Scene scene, Cartesian3 position, Object opts) Cartesian3

获取坐标的贴地(或贴模型)高度

opts支持: 是否在has3dtiles:true , 是否异步 asyn:true 异步回调方法calback

//点贴地或贴模型(异步)
var position = entity.position.getValue();
position = okay3d.point.getSurfaceHeight(viewer.scene, position, {
    asyn: true,     //是否异步求准确高度
    has3dtiles: true,   //是否先求贴模型上(无模型时改为false,提高效率)
    callback: function (newHeight, cartOld) { 
        console.log("原始高度为:" + cartOld.height.toFixed(2) + ",贴地高度:" + newHeight.toFixed(2)) 
        var positionNew = Cesium.Cartesian3.fromRadians(cartOld.longitude, cartOld.latitude, newHeight);
        entity.position.setValue(positionNew)
    }
}); 
getSurface3DTilesHeight(Scene scene, Cartesian3 position, Object opts) Cartesian3

获取坐标的贴地高度 ,与getSurfaceHeight的has3dtiles:true相同

opts支持: 是否异步 asyn:true 异步回调方法calback

getSurfaceTerrainHeight(Scene scene, Cartesian3 position, Object opts) Cartesian3

获取坐标的贴模型高度 ,与getSurfaceHeight的has3dtiles:true相同

opts支持: 是否异步 asyn:true 异步回调方法calback

//求地面海拔 (异步) 
okay3d.point.getSurfaceTerrainHeight(viewer.scene, position, {
    asyn: true,     //是否异步求准确高度 
    callback: function (newHeight, cartOld) {
        if (newHeight == null) return; 
        console.log("地面海拔:" + newHeight.toFixed(2)) 

    }
});
setPositionSurfaceHeight(Scene scene, Cartesian3 position, Object opts) Cartesian3

设置坐标中海拔高度为贴地或贴模型的高度,(同步时需要数据在视域内),内部逻辑是先getSurfaceHeight求高度后更新position的

opts支持: 是否异步 asyn:true 异步回调方法calback

getCurrentMousePosition(Scene scene, Cartesian2 position, Entity noPickEntity? ) Cartesian3

获取鼠标当前位置,返回Cartesian3类型的笛卡尔坐标(可拾取模型,地形高度),常用于ScreenSpaceEventType事件处理中,noPickEntity为可选参数,表示不在noPickEntity表面拾取。示例代码见表格后面!

getCenter(Viewer viewer, Boolean isToWgs?) Object

提取屏幕中心点坐标,返回值示例:{ "y": 31.787488, "x": 117.222228, "z": 229 }。

当地球是高德等gcj坐标时,isToWgs设置是否转换为wgs84坐标

pickCenterPoint(Scene scene) Cartesian3

提取屏幕中心点坐标,返回Cartesian3值

getExtent(Viewer/Entity target , Object opts?) Object

获取当前地球或Entity的视域边界{xmin: 113.23422, xmax: 125.23452, ymin: 30.23436, ymax: 33.234252}。

支持opts:{scale:缩放比例}

getCameraView(Viewer viewer, Boolean isToWgs?) Object

获取当前相机视角范围参数坐标值,返回值示例:{ "y": 31.787488, "x": 117.222228, "z": 224, "heading": 56, "pitch": -29, "roll": 45 }。

当地球是高德等gcj坐标时,isToWgs设置是否转换为wgs84坐标

centerOfMass(Cartesian3[] positions, Number height) Cartesian3

求面的中心点,基于Turf

isInPoly(Cartesian3 position, Entity entity) boolean

点是否在Entity内(面、圆、矩形)

使用示例 getCurrentMousePosition

//单击地图事件
viewer.okay3d.on(okay3d.event.click, function (event) {
    var cartesian = okay3d.point.getCurrentMousePosition(viewer.scene, event.position);
    if (cartesian) {
    	//将笛卡尔坐标转为地理坐标
    	var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
    	var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
    	var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
    	var height = Math.ceil(cartographic.height);
    	//输出地理坐标值
    	console.log("经度:" + longitudeString + "纬度:" + latitudeString + "高度:" + height);
    }
});

//或者Cesium原生写法:
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (event) {
	//通过鼠标当前的二维屏幕坐标获取椭球笛卡尔坐标
    var cartesian = okay3d.point.getCurrentMousePosition(viewer.scene, event.position);
    if (cartesian) {
    	//与上面使用方式一致
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

类名 说明 方法
windingPoint

绕点 环绕飞行

okay3d.point.windingPoint.start(viewer,point);//开始飞行
okay3d.point.windingPoint.stop();//停止飞行
aroundPoint

固定点 向四周旋转

okay3d.point.aroundPoint.start(viewer,point?);//开始飞行 ,point未传入时默认当前点
okay3d.point.aroundPoint.stop();//停止飞行

polyline线相关处理类

okay3d.polyline该类是静态类。线相关的处理类。

方法

方法名 返回值 说明
interPolyline(Object params) Cartesian3 []

对线进行插值

var arrLine = okay3d.polyline.interPolyline({
    scene: viewer.scene,
    positions: positions,//原始路线坐标
    splitNum: 100, // 插值分割的个数
}); 
computeSurfaceLine(Object params) Cartesian3 []

计算贴地路线

okay3d.polyline.computeSurfaceLine({
    viewer: viewer,
    positions: positions,//需要计算的源路线坐标数组
    splitNum: 100, // 插值分割的个数
    callback: function (raisedPositions, noHeight) {
        //raisedPositions为含高程信息的新坐标数组,noHeight为标识是否存在无地形数据。
                      
    }
});
computeSurfacePoints(Object params) Cartesian3 []

求多个点的的贴地新坐标(不插值)

okay3d.polyline.computeSurfacePoints({
    viewer: viewer,
    positions: positions,//需要计算的源路线坐标数组
    callback: function (raisedPositions, noHeight) {
        //raisedPositions为含高程信息的新坐标数组,noHeight为标识是否存在无地形数据。
                      
    }
});
computeStepSurfaceLine(Object params) void

按2个坐标点分段计算 求路线的贴地线

okay3d.polyline.computeStepSurfaceLine({
    viewer: viewer,
    positions: positions,
    has3dtiles: false, //是否只在3dtiles模型上计算
    splitNum: 10,  //插值次数
    //计算每个分段后的回调方法
    endItem: function (raisedPositions, noHeight, index) {

    },
    //计算全部完成的回调方法
    calbakEnd: function () {
    
    }
});
getLinkedPointList( Cartesian3 startPoint, Cartesian3 endPoint,Number angularityFactor,Number numOfSingleLine) void

计算曲线链路的点集(a点到b点的,空中曲线)

startPoint 开始节点,endPoint 结束节点, angularityFactor 曲率,numOfSingleLine 点集数量

var startPoint = Cesium.Cartesian3.fromDegrees(117.169804, 31.842798, 211.9);
    var endPoint = Cesium.Cartesian3.fromDegrees(117.327325, 31.869438, 31.8);
    var positions = okay3d.polyline.getLinkedPointList(startPoint, endPoint, 20000, 50);//计算曲线点

polygon面相关处理类

okay3d.polygon该类是静态类。面相关的处理类。

方法

方法名 返回值 说明
interPolygon(Object params) Object

面内进行贴地(或贴模型)插值, 返回三角网等计算结果

var resultInter = okay3d.polygon.interPolygon({
    scene: viewer.scene,
    positions: positions, //原始面边界坐标
    splitNum: 9, //splitNum 插值分割的格数
}); 
getHeightRange( Cartesian3[] positions, Scene scene) Object

计算面内最大、最小高度值。

computeVolume(Object params) Object

计算 体积(挖方方量) ,返回单位是立方米

var resultInter = okay3d.polygon.computeVolume({
    scene: viewer.scene,
    positions: positions, //原始面边界坐标
    splitNum: 9, //splitNum 插值分割的格数
}); 
var volume = resultInter.totalVolume //总体积 
updateVolumeByMinHeight(Object resultInter) Object

根据minHeight最低底面高度, 重新计算填挖方体积

resultInter为computeVolume初始计算完成的结果对象

updateVolume(Object resultInter,Number cutHeight) Object

根据cutHeight基准面高度, 重新计算填挖方体积

resultInter为computeVolume初始计算完成的结果对象

getEllipseOuterPositions(Object opts) [position]

获取圆(或椭圆)边线上的坐标点数组

var outerPositions = okay3d.polygon.getEllipseOuterPositions({
    position: position, //圆中心点
    semiMajorAxis: semiMajorAxis, //长半轴
    semiMinorAxis: semiMajorAxis, //短半轴
    rotation:0, //旋转的方向
    count: 90    //共返回360(count*4)个点
});  

pointconvert 坐标转换

okay3d.pointconvert 该类是静态类,提供Cesium内部不同坐标系之间的坐标转换算法。
也提供百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、WGS84坐标系、Web墨卡托 等坐标之间的转换算法,所有方法的“传入参数”和“返回结果”均是数组:[经度,纬度]

方法

方法名 返回值 说明
cartesian2lonlat(<Cartesian3> position) Array

将 笛卡尔空间坐标 转换为 经纬度值,主要用于转geojson(返回数组:[longitude,latitude,height])

cartesians2lonlats([<Cartesian3> positions]) Array Array

【数组】将 笛卡尔空间坐标数组 转换为 经纬度值数组,主要用于转geojson(返回数组:[[longitude,latitude,height],...,[longitude,latitude,height]])

cartesian2mercator(<Cartesian3> position) Array

cesium笛卡尔空间坐标 转 web mercator投影坐标(返回数组:[x,y,z])

cartesians2mercators([<Cartesian3> positions]) Array Array

【数组】cesium笛卡尔空间坐标 转 web mercator投影坐标(返回数组:[[x,y,z],...,[x,y,z]])

lonlat2cartesian(Array [longitude,latitude,height]) Cartesian3

将 GeoJSON中的geometry格式的坐标 转换为 笛卡尔空间坐标

lonlats2cartesians(Array Array coordinates) [Cartesian3]

【数组】将 GeoJSON中的geometry格式的坐标数组 转换为 笛卡尔空间坐标数组

lonlat2mercator(Array [longitude,latitude,height]) Array

地理坐标 转 投影坐标

lonlats2mercators(Array Array coordinates) Array Array

【数组】地理坐标 转 投影坐标数组

mercator2cartesian(Array [longitude,latitude,height]) Cartesian3

将 投影坐标 转 cesium笛卡尔空间坐标

mercators2cartesians(Array Array coordinates) [Cartesian3]

【数组】将 投影坐标数组 转 cesium笛卡尔空间坐标数组

mercator2lonlat(Array [x,y,z]) Array

投影坐标 转 地理坐标

mercators2lonlats(Array Array coordinates) Array Array

【数组】投影坐标数组 转 地理坐标数组

wgs2gcj([Number longitude,Number latitude]) [longitude,latitude]

加偏:标准WGS84坐标 转 国测局偏移坐标

gcj2wgs([Number longitude,Number latitude]) [longitude,latitude]

纠偏:国测局偏移坐标 转 标准WGS84坐标

gcj2bd([Number longitude,Number latitude]) [longitude,latitude]

国测局偏移坐标 转 百度经纬度坐标

bd2gcj([Number longitude,Number latitude]) [longitude,latitude]

百度经纬度坐标 转 国测局偏移坐标

wgs2bd([Number longitude,Number latitude]) [longitude,latitude]

标准WGS84坐标 转 百度经纬度坐标

bd2wgs([Number longitude,Number latitude]) [longitude,latitude]

百度经纬度坐标 转 标准WGS84坐标

jwd2mct([Number longitude,Number latitude]) [longitude,latitude]

经纬度坐标 转为 Web墨卡托坐标

mct2jwd([Number longitude,Number latitude]) [longitude,latitude]

Web墨卡托坐标 转为 经纬度坐标

matrix矩阵计算类

okay3d.matrix 该类是静态类。矩阵换算转换处理类。

方法

方法名 返回值 说明
getHeadingPitchRollByOrientation( Cartesian3 position, VelocityOrientationProperty orientation, Ellipsoid ellipsoid?, Transforms function fixedFrameTransform?) HeadingPitchRoll

根据位置和当前Orientation求HeadingPitchRoll方向,用于模型反求其方向值

getHeadingPitchRollByMatrix( Matrix4 matrix, Ellipsoid ellipsoid?, Transforms function fixedFrameTransform?, HeadingPitchRoll result?) HeadingPitchRoll

根据位置和矩阵求HeadingPitchRoll方向

getHeadingPitchRollForLine( Cartesian3 localStart, Cartesian3 localEnd, Ellipsoid ellipsoid?, Transforms function fixedFrameTransform?) HeadingPitchRoll

求localStart点到localEnd点的方向

getRotateCenterPoint( Cartesian3 center, Cartesian3 point, Number angle) Cartesian3

获取点point绕点center的地面法向量旋转顺时针angle角度后新坐标

getOnLinePointByLen( Cartesian3 p1, Cartesian3 p2, Number len, addBS,boolean addBS?) Cartesian3

求p1指向p2方向线上,距离p1指定len长度的新的点 ,addBS:true时为距离p2

getPositionTranslation( Cartesian3 position, Object offest, Number degree?, String type?, Transforms function fixedFrameTransform?) Cartesian3

获取点的offest平移矩阵后点

var position = Cesium.Cartesian3.fromDegrees(113.158,31.15,100);
var newPoint = okay3d.matrix.getPositionTranslation(position, { x: 100, y: 10, z: 0 }, 0, "z");
getOffsetLine( Cartesian3[] positions, Number offest) Cartesian3 []

计算平行线,offset正负决定方向(单位米)

gltf小模型相关

okay3d.model 该类是静态类。Gltf小模型相关处理类。

方法

方法名 返回值 说明
move( Entity entity, Object options Cartesian3

移动模型

    okay3d.model.move(entity, {
    viewer:viewer,
    position: new Cesium.Cartesian3.fromDegrees(125.134654, 43.826725, 0.26),
    time: 3,
    onEnd: function () {
     
    }
});

类名 说明 方法
rotate

自旋转效果

okay3d.model.rotate.start(entity, { viewer: viewer });//开始
okay3d.model.rotate.stop();//停止

3dtiles模型相关

okay3d.tileset 该类是静态类。3dtiles模型相关处理类。

方法

方法名 返回值 说明
getCenter(Cesium3DTileset tileset,Booean transform) Model Entity

获取模型的(0,0,0)原点坐标位置

updateMatrix( Cesium3DTileset tileset, Object options Cartesian3

修改模型位置

var originalCenter = okay3d.tileset.getCenter(tileset);

originalCenter.z = -originalCenter.z + 10; 
okay3d.tileset.updateMatrix(tileset, originalCenter);
pick3DTileset( Scene scene, Cartesian3[] positions Cesium3DTileset

拾取positions坐标点处的3dtiles对象,一般用于判断该坐标是否有模型,因为和当前视角有关系,判断不一定精确

measure类

okay3d.measure 该类是一些测量量算相关的常用通用静态方法

方法

方法名 返回值 说明
getLength( Cartesian3 [] positions) Number

计算长度,单位:米

getClampLength( Cartesian3 [] positions, Object options) void

计算贴地线的长度距离,单位:米

okay3d.measure.getClampLength(positions, {
    scene: viewer.scene,
    splitNum: 30, //插值次数,
    endItem:function(result){
        //计算每个分段后的回调方法(可选)
        
    },
    callback: function (all_distance, arrDistance) {
        //回调方法,返回长度值
    }
});
getArea( Cartesian3 [] positions) Number

计算地表投影平面面积,单位:平方米

getClampArea( Cartesian3 [] positions, Object options) Number

计算贴地面积,单位:平方米

okay3d.measure.getClampArea(positions, {
    scene: viewer.scene,
    splitNum: 10, //插值次数,
    asyn: true,   //求准确的高度(异步)
    callback: function (area) {
        //回调方法,返回面积值
    }
});
getAreaOfTriangle( Cartesian3 position1, Cartesian3 position2, Cartesian3 position3) Number

计算三角形空间面积

getAngle( Cartesian3 firstPoint, Cartesian3 endPoints) Number

求地表方位角,返回:0-360度

getSlope( Object options) Number

求地面点的坡度坡向值,是对Slope类的简化调用

okay3d.measure.getSlope({
    positions:positions, //需要分析的点位数组
    viewer: viewer,
    callback: function (arr) {//返回的计算值,按传入的数组顺序

    }
});

util类

okay3d.util 该类是一些常用通用静态方法

方法

方法名 返回值 说明
webglreport() Boolean

检测浏览器是否支持webgl

formatDegree(Number value) String

格式化经度/纬度,返回度分秒字符串

formatLength( Number val, String unit?) String

计算长度后格式化显示长度值, 可指定单位。unit支持:m、km、mile、zhang 默认自动判断km或m

formatArea( Number val, String unit?) String

计算面积后,格式化显示面积值, 可指定单位 unit支持:m、km、mu、ha 默认自动判断 m 或 km

buffer( GeoJSON Object geojson, Number width) GeoJSON Object

缓冲分析,求GeoJSON对象缓冲width米后的面

getAttrVal( Object attr) Object

简化Cesium内的属性,去掉getValue等,取最简的键值对。方便popup、tooltip等使用

getPopupForConfig( Object config, Object attr) Html String

根据config配置规则获取popup使用的html字符串

getTooltipForConfig( Object config, Object attr) Html String

根据config配置规则获取tooltip使用的html字符串

getPopup(Object cfgObject attr String title) Html String

根据cfg配置信息(可以是数组、字符串等)和attr属性,显示标题title构造html的通用处理方法。该html可以用于popup和tooltip的绑定显示

//方式1:数组配置
 var html = viewer.mars.popup.getPopup([
    { "field": "roadName", "name": "所属线路" },
    { "field": "towerId", "name": "杆塔编号" }
    ], {roadName:'okay3d 线路',towerId:1987}, "塔杆");

//方式2:格式字符串配置
var html = viewer.mars.popup.getPopup("名称:{NAME}
层数:{floor}", {NAME:'楼1',floor:5}, "建筑物"); //方式3:回调处理 var html = viewer.mars.popup.getPopup({"type":"javascript","callback":"funname"}, {NAME:'楼2',floor:8}, "建筑物");//js中需定义命名为funname的方法 //方式4:显示所有,常用于测试时 var html = viewer.mars.popup.getPopup("all", {NAME:'楼3',floor:5,height:87}, "建筑物");
highlightEntity( Entity entitys, Object opts) Object

定时闪烁高亮Entity(点、线、面)

var flashingEntity = okay3d.util.highlightEntity(gonEntity, {
    time: 8,  //闪烁时长(秒)
    onEnd: function () {//结束后回调方法

    }
});
unHighlightEntity( FlashingEntity object) Object

取消定时闪烁高亮Entity(点、线、面)

okay3d.util.highlightEntity(flashingEntity);

BaseWidget 模块基础类

okay3d.widget.BaseWidget 类是平台所有widget功能模块的基础类,开发widget时需要继承该类。 该类不是直接new实例化使用的,是新建一个类继承该类后使用。

使用示例

var MyWidget = okay3d.widget.BaseWidget.extend({
    options: {                         
        resources: ['style.css'],
        view: { 
            type: "window",
            url: "view.html",
            windowOptions: {width: 250, height: 300}
        },
    },
    //初始化[仅执行1次]
    create: function () {
    },
    viewWindow:null,
    //每个窗口创建完成后调用
    winCreateOK: function (opt, result) {
        this.viewWindow = result; 
    },
    //打开激活
    activate: function () {        
    },
    //关闭释放
    disable: function () {
    }
})

Options参数选项

Option参数 参数类型 默认值 说明
resources String[] null 该模块依赖的外部js、css资源文件,会在实例化之前加入的页面中。 默认引用是当前widget所在目录的资源,相当于页面的资源或外部资源请以 “/” 或 “.” 或 “http” 开始命名
view Object null 定义模块的view页面配置信息,为空时表示当前模块无关联页面, 其中url地址规则,参考resources说明

方法

包括模块初始化、激活、释放时相关方法。
方法名 返回值 说明
init() void

模块初始化之前触发该方法,仅首次初始化执行1次

create() void

模块初始化,仅首次初始化执行1次

activateBase() void

激活模块初始方法,基类内部使用

beforeActivate() void

activate激活模块之前调用,基类内部使用

activate() void

打开激活模块

winCreateOK(<String> opt,<String> result) void

每个view窗口或页面创建完成后调用

disableBase() void

释放模块初始方法,基类内部使用

beforeDisable() void

disable释放模块之前调用,基类内部使用

disable() void

关闭释放模块

winFull() void

窗口最大化后触发

winMin() void

窗口最小化后触发

winRestore() void

窗口最大、小化后,被还原时触发

getHtml(<String> url,<function> callback) void

获取指定url的html信息

resetConfig() void

还原配置为config.json的初始状态

setViewVisible(<Boolean> visible) void

设置view弹窗或div的显示影藏,非释放方式

setViewCss(<Object> style) void

设置view弹窗的css,类同jquery的 $(dom).css(style)方法

widget 模块管理类

okay3d.widget 类是静态类,是平台widget模块统一管理维护的类

使用示例

var jsondata= {
    "debugger": true,
    "version": "time",
    "defaultOptions": {
        "windowOptions": {
            "position": "r",
            "maxmin": false,
            "resize": true
        },
        "autoDisable": true,
        "disableOther": true
    },
    "widgetsAtStart": [
        {
            "name": "左上角工具栏",
            "uri": "widgets/toolBar/widget.js",
            "visible": true
        }
    ],
    "widgets": [ 
        {
            "name": "图层管理",
            "uri": "widgets/manageLayers/widget.js",
            "windowOptions": {
                "position": {"top": 1,"bottom": 1,"right": 1}
            },
            "disableOther": false
        },
        {
            "name": "图上量算",
            "uri": "widgets/measure/widget.js"
        }  
    ]
};
okay3d.widget.init(viewer, jsondata);

方法

包括模块初始化,激活释放指定模块等方法
方法名 返回值 说明
init(<Viewer> viewer,<Object> jsondata, <String> basePath)

按配置信息初始化widget管理类

如果widgets目录不在当前页面的同级目录,在其他处时可以传入basePath参数,参数值为:widgets目录相对于当前页面的路径

activate(<Object> item,<Boolean> noDisableOther)

激活指定的模块,item可以是id或者uri或模块配置信息对象

//常用方式,直接使用uri
okay3d.widget.activate("widgets/bookmark/widget.js");
//widget中配置有id时
okay3d.widget.activate("bookmark");		
//使用对象,可以传入更多参数,具体参数参看配置项手册,。
okay3d.widget.activate({
    uri: "widgets/bookmark/widget.js",
    testdata:"widget内部使用this.config获取到这些参数",
    success:function(thisWidget){ //激活后回调方法
    }
});
                              
disable(<String> id或uri)

释放指定id或uri的widget

disableAll(<String> nodisableid?)

释放所有Widget,可以指定id或uri的widget不释放

disableGroup(<String> groupname, <String> nodisableid?)

释放释放同组widget,可以指定id或uri的widget不释放

getWidget(<String> id或uri) Object

获取指定id或uri的widget配置信息

getClass(<String> id或uri) BaseWidget

获取指定id或uri的widget的对应的实例化BaseWidget类

bindClass(<BaseWidget> class) 实例化后的对象

绑定继承BaseWidget类的类到当前对应js的widget中

removeDebugeBar()

移除Widget测试栏

getDefWindowOptions() Objcet

获取全局默认的view配置信息

getCacheVersion() String

获取当前配置的版本信息,用于清除浏览器缓存

Echarts支持

该类在插件不在okay3d.js主库中,在单独的插件okay3d-visual.js文件内。

okay3d.FlowEcharts是实体类,提供对Echarts接入cesium的相关支持。

使用示例

var  option = {//参考Echarts API,支持大部分相关参数,必须传入或不同的地方看下面注释。
animation: false, //必须
GLMap: { },//必须
series: [{
    type: 'lines',
    coordinateSystem: 'GLMap',  //必须
    polyline: true,
    silent: true,
    data: busLines,     //busLines是示例数据
}]
}                 
var layerWork = new okay3d.FlowEcharts(viewer, option);

//layerWork.updateOverlay(option); //更新
                

方法

方法名 返回值 说明
updateOverlay(Echarts Options options) void

更新Echarts Options

show() void

显示图层

hide() void

影藏图层

destroy() void

销毁图层 ,兼容dispose方法名

MapV支持

该类在插件不在okay3d.js主库中,在单独的插件okay3d-visual.js文件内。

okay3d.MapVLayer是实体类,提供对MapV接入cesium的相关支持。

使用示例

var dataSet = new mapv.DataSet(textData);//mapv相关规范DataSet
var options = {  }//mapv相关规范Options
var layer = new okay3d.MapVLayer(viewer, dataSet, options);

方法

方法名 返回值 说明
updateData(MapV DataSet dataSet,MapV Options options) void

更新MapV Options

show() void

显示图层

hide() void

影藏图层

destroy() void

销毁图层

双曲面拱形雷达矢量对象

该类在插件不在okay3d.js主库中,在单独的插件okay3d-space.js文件内。

okay3d.space.CamberRadarPrimitive 是实体类,双曲面拱形雷达矢量对象展示。

使用示例

var primitive = viewer.scene.primitives.add(new okay3d.space.CamberRadarPrimitive({
    modelMatrix: modelMatrix,
    faceColor: new Cesium.Color(0.0, 1.0, 0.0, 0.5),
    lineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
    startRadius: item.startRadius,  //内曲面半径
    radius: item.radius,            //外曲面半径
    startFovH: Cesium.Math.toRadians(item.startFovH),   //左横截面角度,起始角度
    endFovH: Cesium.Math.toRadians(item.endFovH),       //右横截面角度,结束角度
    startFovV: Cesium.Math.toRadians(item.startFovV),   //垂直方向张角,起始角度
    endFovV: Cesium.Math.toRadians(item.endFovV),       //垂直方向张角,结束角度
    show: true,
}));

Options参数选项

Option参数 参数类型 默认值 说明
modelMatrix Matrix4 所在的位置,矩阵对象
faceColor Color new Cesium.Color(1.0, 1.0, 0.0, 0.5) 曲面表面颜色
lineColor Color new Cesium.Color(1.0, 0.0, 0.0) 边线颜色
startRadius Number 内曲面半径
radius Number 外曲面半径
startFovH Number 左横截面角度,起始角度
endFovH Number 右横截面角度,结束角度
startFovV Number 垂直方向张角,起始角度
show Boolean true 是否显示

属性

属性名 类型 说明
modelMatrix Matrix4 所在的位置,矩阵对象
faceColor Color 曲面表面颜色
lineColor Color 边线颜色
startRadius Number 内曲面半径
radius Number 外曲面半径
startFovH Number 左横截面角度,起始角度
endFovH Number 右横截面角度,结束角度
startFovV Number 垂直方向张角,起始角度
show Boolean 是否显示

方法

方法名 返回值 说明
destroy() void

销毁释放对象

圆锥雷达矢量对象

该类在插件不在okay3d.js主库中,在单独的插件okay3d-space.js文件内。

okay3d.space.RadarPrimitive 是实体类,圆锥雷达矢量对象矢量对象展示。

使用示例

var radarEntity = new okay3d.space.RadarPrimitive(viewer, {
    position: position,
    angle: angle, //雷达最小扫描仰角
    radius: radius,
    rotation: {
        heading: Cesium.Math.toRadians(heading),
        pitch: Cesium.Math.toRadians(pitch),
        roll: Cesium.Math.toRadians(roll)
    },
    color: Cesium.Color.fromCssColorString("#ff0000").withAlpha(0.4),
    lineColor: Cesium.Color.fromCssColorString("#ffffff").withAlpha(0.9),
})

Options参数选项

Option参数 参数类型 默认值 说明
position Cartesian3 所在的位置坐标
angle Number 仰角, 单位是角度
radius Number 5 半径
rotation Object { heading: 0, pitch: 0, roll: 0 } 方向
color Color Cesium.Color.YELLOW 颜色
lineColor Color Cesium.Color.YELLOW 线颜色
top Boolean true 顶是否显示
topOutline Boolean true 顶部线是否显示
fixedFrameTransform Transforms.LocalFrameToFixedFrame Cesium.Transforms.eastNorthUpToFixedFrame 参考系
show Boolean true 是否显示

属性

属性名 类型 说明
position Cartesian3 所在的位置坐标
rotation Object 方向 { heading: 0, pitch: 0, roll: 0 }
heading Number 方向heading
pitch Number 方向pitch
roll Number 方向roll
color Color 颜色
lineColor Color 线颜色
angle Number 仰角, 单位是角度
radius Number 半径
top Boolean 顶是否显示
topOutline Boolean 顶部线是否显示
show Boolean 是否显示
lookAt Cartesian3 追踪的目标位置,视锥体的方向旋转跟随追踪的位置
groundArea boolean 是否显示地面投影

方法

方法名 返回值 说明
destroy() void

销毁释放对象

四棱锥地面站矢量对象

该类在插件不在okay3d.js主库中,在单独的插件okay3d-space.js文件内。

okay3d.space.FourPrismPrimitive 是实体类,四棱锥地面站矢量对象展示。

使用示例

var smt = new okay3d.space.FourPrismPrimitive(viewer, {
    angle1: angle1,
    angle2: angle2,
    radius: radius,
    rotation: {
        heading: Cesium.Math.toRadians(heading),
        pitch: Cesium.Math.toRadians(pitch),
        roll: Cesium.Math.toRadians(roll)
    },
    color: Cesium.Color.fromCssColorString("#00ff00").withAlpha(0.4),
    position: new Cesium.Cartesian3.fromDegrees(point.x, point.y, point.z),
    outline: true,
    topShow: true,
    topSteps: 2
});

Options参数选项

Option参数 参数类型 默认值 说明
position Cartesian3 所在的位置坐标
angle1 Number 10 四棱锥的第一个角度
angle2 Number 10 四棱锥的第二个角度
radius Number 5 半径
rotation Object { heading: 0, pitch: 0, roll: 0 } 方向
color Color Cesium.Color.YELLOW 颜色
outline Boolean true 是否显示边线
lineColor Color Cesium.Color.YELLOW 线颜色
top Boolean true 顶是否显示
topOutline Boolean true 顶部线是否显示
topSteps Number 8 顶部切分步长
fixedFrameTransform Transforms.LocalFrameToFixedFrame Cesium.Transforms.eastNorthUpToFixedFrame 参考系
reverse boolean true 是否反转朝向,在非卫星应用时,可以不反转方向
show Boolean true 是否显示

属性

属性名 类型 说明
position Cartesian3 所在的位置坐标
rotation Object 方向 { heading: 0, pitch: 0, roll: 0 }
heading Number 方向heading
pitch Number 方向pitch
roll Number 方向roll
color Color 颜色
lineColor Color 线颜色
angle1 Number 四棱锥的第一个角度
angle2 Number 四棱锥的第二个角度
radius Number 半径
color Color 颜色
outline Boolean 是否显示边线
lineColor Color 线颜色
top Boolean 顶是否显示
topOutline Boolean 顶部线是否显示
show Boolean 是否显示
lookAt Cartesian3 追踪的目标位置,视锥体的方向旋转跟随追踪的位置
groundArea boolean 是否显示地面投影

方法

方法名 返回值 说明
destroy() void

销毁释放对象

卫星视锥体矢量对象

该类在插件不在okay3d.js主库中,在单独的插件okay3d-space.js文件内。

okay3d.space.FrustumPrimitive 是实体类,提供四凌锥或圆锥体的视锥体对象展示。 老版本中该类命名为 SatelliteCoverageSimulation

使用示例

var coneEntity = new okay3d.space.FrustumPrimitive(viewer, {
    position: position,
    areaType: okay3d.space.FrustumPrimitive.AreaType.FourPrism,//四棱锥
    angle1: angle1,
    angle2: angle2,
    rotation: {//传入弧度值
        heading: heading,
        pitch: pitch,
        roll: roll
    },
    color: Cesium.Color.fromCssColorString("#00ffff").withAlpha(0.7)
});

椎体类型

枚举名称 说明
okay3d.space.FrustumPrimitive.AreaType.Cone 圆锥
okay3d.space.FrustumPrimitive.AreaType.FourPrism 四棱锥

Options参数选项

Option参数 参数类型 默认值 说明
position Cartesian3 所在的位置坐标
color Color Cesium.Color.YELLOW 颜色
areaType AreaType AreaType.FourPrism 椎体类型(圆锥或四棱锥),默认:四棱锥体
angle1 Number 10 圆锥的角度 或者 四棱锥的第一个角度
angle2 Number 10 四棱锥的第二个角度
rotation Object { heading: 0, pitch: 0, roll: 0 } 方向
reverse boolean false 是否反转朝向
rayEllipsoid boolean false 是否求交地球,在高轨全球视角时,效果的控制参数
fixedFrameTransform Transforms.LocalFrameToFixedFrame Cesium.Transforms.eastNorthUpToFixedFrame 参考系
show boolean true 是否显示

属性

属性名 类型 说明
position Cartesian3 所在的位置坐标
color Color 颜色
areaType AreaType 椎体类型(圆锥或四棱锥),默认:四棱锥体
angle1 Number 圆锥的角度 或者 四棱锥的第一个角度
angle2 Number 四棱锥的第二个角度
heading Number 方向heading
pitch Number 方向pitch
roll Number 方向roll
rotation Object 方向 { heading: 0, pitch: 0, roll: 0 }
reverse boolean 是否反转朝向,在非卫星应用时,可以不反转方向
rayEllipsoid boolean 是否求交地球,在高轨全球视角时,效果的控制参数
fixedFrameTransform function 参考系
show boolean 是否显示
trackedEntity Entity 跟随卫星的对象,视锥体的方向和位置跟随卫星entity
lookAt Cartesian3 追踪的目标位置,视锥体的方向旋转跟随追踪的位置
groundPosition Cartesian3【只读】 求与卫星中心射线与地球地面相交点

方法

方法名 返回值 说明
exportImagingArea(Number fractionDigits) void

导出成像区边界坐标(经度、纬度)数组,保留fractionDigits小数位数

destroy() void

销毁释放对象

卫星综合体

该类在插件不在okay3d.js主库中,在单独的插件okay3d-space.js文件内。

okay3d.space.Satellite 是实体类,卫星综合体对象类【统一管理卫星模型、轨道、视锥体】。

使用示例

var  weixin = new okay3d.space.Satellite(viewer, {
    "name": "GAOFEN 1",
    "tle1": "1 39150U 13018A   18309.20646405  .00000034  00000-0  12253-4 0  9993",
    "tle2": "2 39150  97.9189  29.2064 0018076 220.9170 139.0692 14.76532215297913",
    "model": { "uri": "/okay3d/weixin.gltf", "heading": 0, "pitch": 0, "roll": 0 },
    "label": { "show": true, "color": "#ffffff", "opacity": 1, "font_family": "楷体", "font_size": 30 },
    "cone": { "show": true, "areaType": true, "angle1": 30, "angle2": 20, "color": "#00ffff", "opacity": 0.7 },
    "path": { "show": true, "lineType": "solid", "color": "#00ff00", "opacity": 0.5, "width": 1},
});

Options参数选项

Option参数 参数类型 默认值 说明
id或norad String 卫星唯一编号
name String 卫星 卫星名称
tle1 String [必须]卫星星历的TLE参数的tle1
tle2 String [必须]卫星星历的TLE参数的tle2
model Object 模型对象样式,参数参考Draw的model支持的style
label Object 卫星名称对象样式,参数参考Draw的label支持的style
path Object 卫星轨迹路径样式,参数参考Draw的polyline支持的style
额外参数:
closure:true //是否自动闭合圆轨道
shadingLine Object 卫星星下投影线样式,参数参考Draw的polyline支持的style
cone Object 卫星视锥体样式,参数参考FrustumPrimitive支持的部分参数。
额外参数:
"areaType": true标识FourPrism,false为Cone "list": []可以支持多个视锥体,参考 73_satellite2.html 示例
fixedFrameTransform Transforms.LocalFrameToFixedFrame 参考系,默认为Cesium.Transforms.eastNorthUpToFixedFrame
interval bollean true 是否自动定时更新数据,多个卫星时可以false后外部去手动更新
intervalTime Number 1 自动定时更新数据时,定时去更新的时长,单位:秒
popup String/Object 鼠标单击后的popup弹窗配置
tooltip String/Object 鼠标移入后的tooltip弹窗配置
click function 鼠标单击卫星后的回调方法
visible boolean 是否显示卫星

属性

属性名 类型 说明
【只读】entity entity 卫星对象,包含模型model、label、path等的一个Entity对象
【只读】position Cartesian3 卫星当前位置
【只读】matrix Matrix4 获取当前实时矩阵信息
【只读】groundPosition Cartesian3 求与卫星中心射线与地球相交点
【只读】timeRange object 获取当前卫星的起止时间
config Object 支持对一些options参数中样式或效果的参数的更新,参数格式与options一致
visible boolean 是否显示卫星
angle1 Number 视锥体的第一个角度
angle2 Number 视锥体的四棱锥的第二个角度
heading Number 模型的heading方向
pitch Number 模型的pitch方向
roll Number 模型的roll方向
debugAxis boolean 是否显示坐标系3个轴,目的用于显示对比

方法

方法名 返回值 说明
updateConfig(Object params) void

支持对一些options参数中样式或效果的参数的更新,参数格式与options一致

setConeVisible(boolean show) void

视锥体显示状态切换

flyTo(Object options?)

视角飞行定位到卫星处

options支持:radius控制点数据视距距离
update() void 更新卫星对象,内部进行计算实时坐标等,interval属性为false时,可以手动调用此方法
destroy() void

销毁释放对象

space.util类

该类在插件不在okay3d.js主库中,在单独的插件okay3d-space.js文件内。

okay3d.space.util 该类是一些卫星中常用通用静态方法

方法

方法名 返回值 说明
getPeriod( String tle2) Object

获取目标的运行周期, 输入:TLE的第二行, 输出:周期(分钟单位)

getSatellitePosition(String tle1,String tle2,Date datetime) Object

根据TLE参数和时间,计算卫星当前的位置

输出示例:{"x":-3200,"y":5396,"z":-2917,"longitude":171.987788,"latitude":-25.072267,"height":544}