Wish3DEarth 应用文档

Appearance

Focused Pragmatic

ZhongKeTuXin

Open Innovate

标绘 ​

标绘功能包含标绘点、标绘线、标绘面。这些标绘信息统一保存在一个 drawDataSource 对象中，保存时数据可转换为 json 文件，加载时获取到之前保存的 json，可以统一一次将各种标绘数据加载到场景中并与保存前的显示效果一致。

为了更好的绘制体验，标绘线面的绘制可以应用现在封装好的线面绘制插件来绘制。而标注的绘制需要在事件句柄中点击绘制添加

初始化标绘存储对象 ​

JavaScript
var drawDataSource;
//标绘存储对象绘制的标绘要素（线或者面）会保存到该对象中
var promise = viewer.dataSources.add(new LSGlobe.GeoJsonDataSource("drawDataSource"));
promise.then(function(dataSource) {
    drawDataSource = dataSource;
}).otherwise(function(error) {

});

标绘绘制 ​

一、绘制点 ​

-- 1.1 添加至场景 ​

JavaScript
//第一步新加事件句柄
var handler = new LSGlobe.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
    //获取的坐标上添加标绘点，具体的坐标获取参照坐标转换
    var Pos = scene.pickGlobe(movement.position);
},
LSGlobe.ScreenSpaceEventType.LEFT_CLICK);

//第二部将标注添加到球上
//drawDataSource 保存标绘集合的对象，标绘初始化定义的
var NewPoint = drawDataSource.entities.add({
    //标注的坐标 x,y,z 经度纬度和高度的值
    position: new LSGlobe.Cartesian3(Pos.x, Pos.y, Pos.z),
    label: {
        text: name,
        //标注文字描述
        font: "32px Microsoft YaHei",
        //标注文字大小、字体
        style: LSGlobe.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 6,
        translucencyByDistance: new LSGlobe.NearFarScalar(1.5e2, 1.0, 1.5e5, 0.0),
        //根据告诉改变透明度
        horizontalOrigin: LSGlobe.HorizontalOrigin.LEFT,
        pixelOffset: new LSGlobe.Cartesian2(15, -15),
        disableDepthTestDistance: 0,
        //标注的遮挡距离设置为100则视角与标注的距离大于100米时会有遮挡
        scale: 0.5
    },
    billboard: {
        image: iconPath,
        //标注图标路径
        width: 64,
        height: 64,
        disableDepthTestDistance: 1000000000,
        //标注的遮挡距离设置为100则视角与标注的距离大于100米时会有遮挡
        scale: 0.5,
        translucencyByDistance: new LSGlobe.NearFarScalar(1.5e2, 1.0, 1.5e5, 0.0),
    },
    id: id,
    //标注唯一标识
    show: true //标绘点对象的true显示,false隐藏属性
});

NewPoint.properties.addProperty(des, description);
//使用该方法加入单个自定义属性  des自定义属性名 description自定义属性值
//NewPoint刚刚添加的标绘点对象
NewPoint.properties = new LSGlobe.PropertyBag({
    des: description
});
//使用该方法加入多个自定义属性  des自定义属性名 description自定义属性值
//NewPoint刚刚添加的标绘点对象
//标绘点自定义属性中一般需要有标绘点的图片地址信息和相机位置信息 这些信息需要添加到自定义的属性中用于再次加载时使用

-- 1.2 缩略图信息上传 ​

获取标绘点缩略图同飞行视点获取视点的缩略图一致。

-- 1.3 标会点附属信息 ​

每个标绘点都可以挂载附属信息，分为文本、图片、视频、全景，在 Wish3DEarth 中称其为附属信息。在场景设置中，所有标会点的附属信息，均存储在 oSubSceneData.drawDetail.points 中(如需要其他标绘也可以挂载在不同属性中)，

JavaScript
//附属信息容器
oSubSceneData.drawDetail= {
    'sceneId': '场景ID',
    'points': []
},
//附属信息单个示例
var oDrawDetail={
'id': 'GUID',
'title': '名称',
'viewPoint': {
    /*标绘点的视角信息*/
    "posx": -2765417.479773966600000,
    "posy": 4789433.917735196000000,
    "posz": 3171073.033866435000000,
    "upx": 0.479484059578550,
    "upy": 0.042675029450645,
    "upz": 0.876512337888898,
    "directionx": 0.578378444536402,
    "directiony": -0.766548590616974,
    "directionz": -0.279072809708834,
    "viewImg": "scene/44446d72-0039-443a-bcb0-f20fbe25ca64/image/34546d72-0039-443a-bcb0-f20fbe25ca64.jpg"
},
/*文本附属信息*/
text: {
    title: '标题',
    content: '内容'
},
/*图片附属信息*/
image: {
    title: '标题',
    pics: [{
        'id': 'GUID',
        path: '图片地址'
    }]
},
/*视频附属信息*/
video: [{
    'id': 'GUID',
    title: '',
    type: '视频类型（1；url, 2自定义上传）',
    url: '视频地址'
}],
/*全景附属信息*/
panoramic: [{
    'id': 'GUID',
    title: '标题',
    url: '全景地址'
}]

}

-- 1.4 附属信息-图片和视频（本地视频，非在线）上传 ​

上传接口参照//localhost:8000//wish3dearth/api/scene/v1.0.0/uploadTempFile

二、标绘线 ​

Javascript
//获取线上点，>=2个点
var handler = new LSGlobe.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
    //获取的坐标上添加标绘点，具体的坐标获取参照坐标转换
    var Pos = scene.pickGlobe(movement.position);
},
LSGlobe.ScreenSpaceEventType.LEFT_CLICK);

//添加到场景中
drawDataSource.entities.add({
    //特殊字段该字段会保存下来，可以是字符串也可以是个对象
    name: "标绘线",
    //线的唯一标识会存储下来，再次加载也不改变,用于查找
    id: "1ab133f2-6a13-4575-a65a-aa2e9bbbc3ca",
    polyline: {
        //线点的集合
        positions: [{
            "x": -2762093.143122826,
            "y": 4700702.533345467,
            "z": 3299201.561099788
        },
        {
            "x": -2762049.697649547,
            "y": 4700739.367655585,
            "z": 3299182.502160778
        },
        {
            "x": -2762049.5886295093,
            "y": 4700739.656572349,
            "z": 3299182.139584659
        }],
        //线宽
        width: 2,
        //线的材质
        material: LSGlobe.Color.fromCssColorString("rgb(255,120,255)"),
        /*
        1.虚实线material: new LSGlobe.PolylineDashMaterialProperty({
            color:oMaterial,
            dashPattern:LSGlobe.LineType.SOLID//SOLID:实线，DASH：虚线，DOT：浮点，DASHDOT：-.-.-，DASHDOTDOT：-..-..
        })
        2.箭头：material: new LSGlobe.PolylineArrowMaterialProperty(LSGlobe.Color.PURPLE)
        3.边框线：material: new LSGlobe.PolylineOutlineMaterialProperty({
                    color: LSGlobe.Color.ORANGE,
                    outlineWidth: 2,
                    outlineColor: LSGlobe.Color.BLACK
                })
        4.发光线：material: new LSGlobe.PolylineGlowMaterialProperty({
                    glowPower: 0.2,
                    color: LSGlobe.Color.BLUE
                })
        */
        //空间线被遮挡部分样式，仅适用空间线
        depthFailMaterial: new LSGlobe.PolylineDashMaterialProperty({
                    color:LSGlobe.Color.fromCssColorString("rgba(0,186,255,0.5)")
                }),
        clampToGround: false,//是否贴地（空间线必须为false，贴地形、贴模型、贴地表模型必须为true）
        classificationType: undefined//TERRAIN:贴地表，CESIUM_3D_TILE：贴模型，BOTH贴模型贴地表，undefined：空间线
    }
});

三、标绘面 ​

JavaScript
drawDataSource.entities.add({
    //特殊字段该字段会保存下来，可以是字符串也可以是个对象
    name: '标绘面',
    //面的唯一标识会存储下来，再次加载也不改变,用于查找
    id: id,
    polygon: {
        hierarchy: {
            //面的点集合
            positions: event.positions,
        },
        //面的材质
        material: LSGlobe.Color.fromCssColorString("rgb(0,186,255)"),
        //是否填充面
        fill: true,
        //是否显示面的外边框（仅空间面有效）
        outline: true,
        //面的外边框的材质
        outlineColor: LSGlobe.Color.fromCssColorString("rgb(0,186,255)"),
        //面的外边框的宽度（暂不支持非1）
        outlineWidth:1,
        //面的类型
        classificationType: LSGlobe.ClassificationType.BOTH,
        //LSGlobe.ClassificationType.BOTH           即可贴地又可贴模型
        //LSGlobe.ClassificationType.TERRAIN        仅贴地
        //LSGlobe.ClassificationType.CESIUM_3D_TILE 仅贴模型
        //undefined 空间面
        perPositionHeight:false//是否绝对高度（当设置非空间面时候一定要设置false，空间面一定要设置true）
    }
});

四、标绘要素获取 ​

JavaScript
//id 绘制线面时加入的唯一标识
var entity = drawDataSource.entities.getById(id)

-- 4.1 标绘显示隐藏 ​

JavaScript
//entity获取到的标绘要素对象
entity.show=true;//true:显示，false：隐藏

-- 4.2 标绘飞行 ​

JavaScript
//entity获取到的标绘要素对象

//空间线面的飞行(发光线等都是空间线)
viewer.flyto(entity)

//特殊线面的飞行(贴地,贴模型)
//使用单体化的飞行方式飞行

-- 4.3 标绘删除 ​

JavaScript
//单个标绘线面删除
//id绘制时添加的唯一标识
drawDataSource.entities.removeById(id)

//删除drawDataSource对象中的所有标绘要素
drawDataSource.entities.removeAll();

五、标绘编辑 ​

-- 5.1 编辑标绘点 ​

JavaScript
//entity
//markid是标注添加时的唯一标识
entity.billboard = new LSGlobe.BillboardGraphics({ //图标
    image: iconPath,//标注图标
    width: 64,
    height: 64,
    pixelOffset: new LSGlobe.Cartesian2(0, -13),
    //偏移量
    disableDepthTestDistance: 0,
    scale: 0.5,
    translucencyByDistance: new LSGlobe.NearFarScalar(1.5e2, 1.0, 1.5e5, 0.0),
});
//修改标注图标信息
entity.label = new LSGlobe.LabelGraphics({
    text: objEntity.name,
    //修改后的文字信息
    font: "64px Microsoft YaHei",//修改后的文字类型和大小
    fillColor: LSGlobe.Color.fromCssColorString('rgb(0,0,0)'),
    //文字填充颜色
    style: LSGlobe.LabelStyle.FILL_AND_OUTLINE,
    outlineWidth: 6,
    translucencyByDistance: new LSGlobe.NearFarScalar(1.5e2, 1.0, 1.5e5, 0.0),
    horizontalOrigin: LSGlobe.HorizontalOrigin.LEFT,
    pixelOffset: new LSGlobe.Cartesian2(15, -15),
    disableDepthTestDistance: 0,
    scale: 0.5//缩放
});
//修改标注位置信息(经纬度)
entity.position = new LSGlobe.Cartesian3.fromDegrees(position.x, position.y, position.z);
//修改标注文字信息
entity.label.text = new LSGlobe.ConstantProperty(objEntity.name);
//单独修改标注文字信息中的文本
entity.label.fillColor = LSGlobe.Color.fromCssColorString('rgb(255,255,255)');
//单独修改标注文字信息中的文本填充颜色

-- 5.2 编辑标绘线 ​

JavaScript

//编辑线的特殊字段
entity.name = '面标绘名称';
//编辑线宽度
entity.polyline.width = 10;
//编辑线材质(颜色)
entity.polyline.material = LSGlobe.Color.fromCssColorString('rgb(0,0,0)');
//编辑线的透明度
entity.polyline.material = LSGlobe.Color.fromCssColorString('rgb(0,0,0)').withAlpha('0.5')
//线的材质
/*
1.虚实线
entity.polyline.material = new LSGlobe.PolylineDashMaterialProperty({
    color: oMaterial,
    dashPattern: LSGlobe.LineType.SOLID //SOLID:实线，DASH：虚线，DOT：浮点，DASHDOT：-.-.-，DASHDOTDOT：-..-..
})
2.箭头：
entity.polyline.material = new LSGlobe.PolylineArrowMaterialProperty(LSGlobe.Color.PURPLE)
3.边框线：material: new LSGlobe.PolylineOutlineMaterialProperty({
    color: LSGlobe.Color.ORANGE,
    outlineWidth: 2,
    outlineColor: LSGlobe.Color.BLACK
})
4.发光线：
entity.polyline.material = new LSGlobe.PolylineGlowMaterialProperty({
    glowPower: 0.2,
    color: LSGlobe.Color.BLUE
})
*/
//编辑线的遮挡部分虚线属性
entity.polyline.depthFailMaterial = new LSGlobe.PolylineDashMaterialProperty({
    color: LSGlobe.Color.fromCssColorString('rgb(0,0,0)').withAlpha('0.5')
});
//是否贴地（空间线必须为false，贴地形、贴模型、贴地表模型必须为true）
entity.polyline.clampToGround = false;
entity.polyline.classificationType = undefined//TERRAIN:贴地表，CESIUM_3D_TILE：贴模型，BOTH贴模型贴地表，undefined：空间线

-- 5.3 编辑标绘面 ​

JavaScript
//编辑线的特殊字段
entity.name = '面标绘名称';
//编辑面的材质
entity.polygon.material = LSGlobe.Color.fromCssColorString('rgb(0,0,0)');
//编辑面的透明度
entity.polygon.material = LSGlobe.Color.fromCssColorString('rgb(0,0,0)').withAlpha('0.5');
//编辑面的外边框(特殊面不显示边框不能设置该属性)
entitie.polygon.outline = true / false;
//编辑面是否填充
entitie.polygon.fill = true / false;
//编辑面外边框材质(特殊面不显示边框不能设置该属性)
entitie.polygon.outlineColor = LSGlobe.Color.fromCssColorString('rgb(0,0,0)');
//编辑面外边框透明度(特殊面不显示边框不能设置该属性)
entitie.polygon.outlineColor = LSGlobe.Color.fromCssColorString('rgb(0,0,0)').withAlpha('0.5');

entitie.polygon.classificationType = LSGlobe.ClassificationType.BOTH;
//LSGlobe.ClassificationType.BOTH           即可贴地又可贴模型
//LSGlobe.ClassificationType.TERRAIN        仅贴地
//LSGlobe.ClassificationType.CESIUM_3D_TILE 仅贴模型
//undefined 空间面
entitie.polygon.perPositionHeight:false//是否绝对高度（当设置非空间面时候一定要设置false，空间面一定要设置true）

六、标绘存储 ​

标绘的存储是以 json 格式保存的,直接赋值给 oSubSceneData.draw,然后随场景保存接口一并提交保存

JavaScript
oSubSceneData.draw = drawDataSource.toGeoJson()

七、标绘重载 ​

标绘获取接口，参数 jsonType 为 2

//localhost:8000/wish3dearth/api/scene/v1.0.0/getSceneJsonInfo

JavaScript
var oGeoJson = result.data;
//result.data前面获取的标绘数据json
var promise = LSGlobe.GeoJsonDataSource.load(oGeoJson, {});
promise.then(function(dataSource) {
    //将数据再次加载到初始化存储标绘要素的对象中
    drawDataSource = dataSource;
    //添加到球中
    viewer.dataSources.add(dataSource);
}).otherwise(function(error) {
    console.log(error);
});

Released under the MIT License.

本中文文档内容版权为 中科图新 官方团队所有，保留所有权利。