Skip to content

标绘(单体化)

单体化原理:本质就是贴模型地表的标绘面,在默认 0.01 的透明度下,当鼠标移动到该面时候,改变面的材质的透明度为 1,当鼠标移出后透明度重新设置透明度为 0.01,从而实现高亮效果。单体化要素统一保存在 monomerDataSource(GeoJsonDataSource)中, 然后利用GeoJsonDataSourcetoGeoJson方法导出提交。

单体化绘制

提示

为了更好的绘制体验,单体化绘制可以应用现在封装好的标绘插件来绘制,在绘制好的回调方法中将绘制好的数据添加到 monomerDataSource 中。本页主要讲解是实现的原理,以及属性挂载。

JavaScript

//1).初始化单体化存储对象
var monomerDataSource;
var promise = viewer.dataSources.add(new LSGlobe.GeoJsonDataSource("monomerDataSource"));

promise.then(function(dataSource) {
   monomerDataSource = dataSource;
   monomerDataSource.name="monomerDataSource"
}).otherwise(function(error) {

});

//2).单体化绘制
monomerDataSource.entities.add({
   //特殊字段该字段会保存下来,可以是字符串也可以是个对象
   name: '单体化面',
   //面的唯一标识会存储下来,再次加载也不改变,用于查找
   id: id,
   polygon: {
       hierarchy: {
           //面的点集合
           positions: event.positions,
       },
       //面的材质
       material: LSGlobe.Color.fromCssColorString("rgb(0,186,255)").withAlpha('0.5');,
       //是否填充面
       fill: true,
       //是否显示面的外边框(仅空间面有效)
       outline: false,
       //面的类型
       classificationType: LSGlobe.ClassificationType.BOTH,
       perPositionHeight:false//是否绝对高度(当设置非空间面时候一定要设置false,空间面一定要设置true)
   }
});

单体化要素获取

JavaScript
//id 绘制单体化时加入的唯一标识
var entity = monomerDataSource.entities.getById(id)

单体化显示隐藏

JavaScript
//entity获取到的单体化对象
entity.show=true/false;

单体化定位

提示

单体化定位可以参照视角定位中的flyToBoundingSphere定位方法,

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

//方法1
viewer.flyto(entity)

//方法2
// 利用点集合定位,positions世界坐标数组
const boundingSphere = LSGlobe.BoundingSphere.fromPoints(entity.polygon.hierarchy.getValue().positions);
viewer.camera.flyToBoundingSphere(boundingSphere, {
    offset: new LSGlobe.HeadingPitchRange(0, -LSGlobe.Math.PI_OVER_TWO, 0)
});

单体化删除

JavaScript
//单个单体化删除
//id绘制时添加的唯一标识
monomerDataSource.entities.removeById(id)

//删除monomerDataSource对象中的所有单体化
monomerDataSource.entities.removeAll();

单体化修改

JavaScript
//entity获取到的单体化要素对象
//1.编辑单体化样式
//编辑单体化的特殊字段
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')

//2.获取属性和属性值展示出来
var oEntityProperties = entity.properties.getValue();

for (var key in oEntityProperties) {
    console.log(key+":"+oEntityProperties.key);
}
//3.编辑单体化的属性属性值
//添加属性属性值
entity.properties.addProperty("属性","属性值");
//下面是整体属性替换(谨慎使用,会覆盖之前的属性)
entities.properties = {
    "属性":"属性值"
};
//删除属性属性值
entity.properties.removeProperty("属性");

单体化点击获取

JavaScript

// 初始化一个鼠标事件
var handlerMonomer = new LSGlobe.ScreenSpaceEventHandler(viewer.scene.canvas);
handlerMonomer.setInputAction(function(movement) {
    var posit = viewer.scene.pick(movement.position);
    if (LSGlobe.defined(posit)) {
        // 如果posit值存在说明鼠标点击的地方有内容
        //(该内容可以是标注,标绘,单体化,矢量数据等要素)需要判断该数据是什么类型需要根据该对象中的特殊字段来判断或者是否包含关系
        if ( !! posit.id && monomerDataSource.entities.contains(posit.id)) {
            // 如果被monomerDataSource.entities包含则是单体化
            // 读取属性信息
            console.log(posit.id.properties)

        }
    }
},
LSGlobe.ScreenSpaceEventType.LEFT_CLICK);

单体化存储

单体化的存储是以 json 格式保存的,直接赋值给 oSubSceneData.monomer,然后随场景保存接口一并提交保存

JavaScript
oSubSceneData.monomer = monomerDataSource.toGeoJson()

从场景数据中加载单体化

单体化数据获取接口查询场景单体化信息,参数 jsonType 为 3;

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

Released under the MIT License.