Wish3DEarth
标绘（点线面）
标绘功能包含标绘点、标绘线、标绘面。这些标绘信息统一保存在 drawDataSource(GeoJsonDataSource)中, 然后利用GeoJsonDataSource的toGeoJson方法导出提交。
提示
为了更好的绘制体验，标绘线面的绘制可以应用现在封装好的标绘插件来绘制,在绘制好的回调方法中将绘制好的数据添加到 drawDataSource 中。本页主要讲解是实现的原理，以及属性挂载。
初始化标绘存储对象
JavaScript
var drawDataSource;
//标绘存储对象绘制的标绘要素（线或者面）会保存到该对象中
var promise = viewer.dataSources.add(new LSGlobe.GeoJsonDataSource("drawDataSource"));
promise.then(function(dataSource) {
drawDataSource = dataSource;
}).otherwise(function(error) {
});标绘绘制
1.绘制点
可以利用打标绘点代码来绘制点，把viewer.entities换成drawDataSource.entities
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刚刚添加的标绘点对象
//标绘点自定义属性中一般需要有标绘点的图片地址信息和相机位置信息 这些信息需要添加到自定义的属性中用于再次加载时使用CAUTION
标绘视角可以存在属性信息中，缩略图生成参照场景封面缩略图生成缩略图
1.2标绘点附属信息
提示
每个标绘点都可以挂载富文本信息。在场景设置中，所有标会点的附属信息，均存储在 oSubSceneData.drawDetail.points 中(如需要其他标绘也可以挂载在不同属性中)， 获取 查询场景中点线面详情json信息
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: '内容'
},
/*图片附属信息*/
richText: "<p>我是富文本信息</p>"]
}2.标绘线
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：空间线
}
});信息
视角信息和附属信息参照标绘点
3.标绘面
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)标绘显示隐藏
JavaScript
//entity获取到的标绘要素对象
entity.show=true;//true:显示，false：隐藏标绘定位
提示
标绘飞行可以参照视角定位中的各种定位方法
JavaScript
//entity获取到的标绘要素对象
//空间线面的飞行(发光线等都是空间线)
viewer.flyto(entity)标绘删除
JavaScript
//单个标绘线面删除
//id绘制时添加的唯一标识
drawDataSource.entities.removeById(id)
//删除drawDataSource对象中的所有标绘要素
drawDataSource.entities.removeAll();标绘修改
修改标绘点
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)');
//单独修改标注文字信息中的文本填充颜色修改标绘线
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：空间线修改标绘面
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；
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);
});