1. ModelStyler

1.1. new ModelStyler([options])

模型高亮样式类 高亮显示点击的glft、3dTiles模型， 设置3dTiles模型的构件样式

Example

let modelStyl = new BOSGeo.ModelStyler(options);

1.2. 方法

1.2.1. modelStyler.onClick(windowCoord, [highlightComponent])

对选中的gltf或3DTiles模型对象进行高亮显示

Example

let modelStyl = new BOSGeo.ModelStyler(options);
modelStyl.onClick(windowCoord);

1.2.2. modelStyler.highlightGltf(glTF, [opacity])

高亮gltf模型

Example

let modelStyl = new BOSGeo.ModelStyler(options);
modelStyl.highlightGltf(glTF, opacity);

1.2.3. modelStyler.setTilesetColorWithAlpha(tileset, [opacity])

设置3DTiles的颜色（十六进制字符串）和透明度

Example

let modelStyl = new BOSGeo.ModelStyler(options);
modelStyl.setTilesetColorWithAlpha(tileset, opacity);

1.2.4. modelStyler.unHighlightGltf(glTF)

取消高亮gltf模型

Example

let modelStyl = new BOSGeo.ModelStyler(options);
modelStyl.unHighlightGltf(glTF);

1.2.5. modelStyler.resetGltfs()

重置Gltfs模型集合的高亮效果

Example

let modelStyl = new BOSGeo.ModelStyler(options);
modelStyl.resetGltfs();

1.2.6. modelStyler.resetTilesets()

重置3dTilesets模型集合的高亮效果

Example

let modelStyl = new BOSGeo.ModelStyler(options);
modelStyl.resetTilesets();

1.2.7. modelStyler.reset3DTilesetColor(tileset)

重置3DTiles模型的样式为原始状态

Example

let layer = geomap.layerManager.getLayer(BOSGeo.LayerType.MODEL, "model123");
BOSGeo.ModelStyler.reset3DTilesetColor(layer.getModelByName("testBIM12"));

1.2.8. ModelStyler.setOpacity(model, [opacity])

设置模型不透明度

Example

BOSGeo.ModelStyler.setOpacity(model, opacity = 1.0);

1.2.9. ModelStyler.setTransColorRange(model, [transColorRange], [topColor], [transHeightRange])

将白模模型设置为渐变色

Example

//1.设置渐变色
let geoViewer = new BOSGeo.GeoMap('container');
let layerManager = geoViewer.layerManager;
let modelLayer = layerManager.createLayer(BOSGeo.LayerType.MODEL, '模型图层test');
let myModel = modelLayer.add({
 name: 'test',
 url: 'https://lab.earthsdk.com/model/3610c2b0d08411eab7a4adf1d6568ff7/tileset.json',
 featureType: BOSGeo.FeatureType.WHITE_MODEL
})
transColorRange = ['#fff200', '#00ffcb'];
topColor = '#fb00ff'
//设置渐变色
BOSGeo.ModelStyler.setTransColorRange(myModel,transColorRange,topColor)

Example

//2.取消渐变色
BOSGeo.ModelStyler.setTransColorRange(myModel,['#fff', '#fff'],'#fff',null,false);

1.2.10. ModelStyler.clearTransColorRange(model)

取消白模模型渐变色设置

Example

BOSGeo.ModelStyler.clearTransColorRange(model);

1.2.11. ModelStyler.silhouetteSelectEffectForFeature(feature, options)

外轮廓选中效果

Example

//选中
map.on(BOSGeo.MapEventType.LEFT_CLICK, (e) => {
    if (e.feature) {
        BOSGeo.ModelStyler.silhouetteSelectEffectForFeature(e.feature);
    }
}, [BOSGeo.MapPickType.FEATURE]);

1.2.12. ModelStyler.setTilesetImage(tileset, imagePath, textureIndex)

设置Cesium3DTileset的图片(贴图)

Example

BOSGeo.ModelStyler.setTilesetImage(model1, imagePath, 0)

1.2.13. ModelStyler.clearTilesetImage(tileset)

取消3DTiles模型自定义的贴图

Example

BOSGeo.ModelStyler.clearTilesetImage(tileset);

1.2.14. ModelStyler.setTilesetColor(tileset, color)

设置3DTiles模型（Cesium3DTileset）的颜色

Example

//Example 1.直接通过十六进制颜色字符串修改3DTiles模型的整体颜色
BOSGeo.ModelStyler.setTilesetColor(tileset, '#ff2e2e');
//Example 2.通过颜色样式表达式修改3DTiles模型的整体颜色
BOSGeo.ModelStyler.setTilesetColor(tileset, 'color("red")'); //anchorLineColor 颜色样式表达式
//BOSGeo.ModelStyler.setTilesetColor(tileset,'color("#FF0")');
//BOSGeo.ModelStyler.setTilesetColor(tileset,'color("#00FFFF")');
//Example 3.通过颜色样式表达式修改3DTiles模型的整体颜色和透明度
BOSGeo.ModelStyler.setTilesetColor(tileset, 'color("#00FFFF",0.5)');
//BOSGeo.ModelStyler.setTilesetColor(tileset, 'color("red",0.5)');

1.2.15. ModelStyler.setTilesetColorByKey(tileset, colorOptions, [key], [defaultColor])

根据属性值设置3DTiles 颜色样式(只修改颜色样式，不影响已有的显隐、平移和公转样式)

Example

//Example 1. 设置BIM模型中type类型为‘屋顶’和‘墙’的颜色为红色，'门'和'窗'的颜色为绿色
//添加模型
let modelLayer = layerManager.createLayer(BOSGeo.LayerType.MODEL, 'model123', {customGroupId: 'model'});  //创建模型图层
let testBIMModel = modelLayer.add({
    name: 'testBIM123',    //模型名称
    url: "https://bosgeo.boswinner.com/geoData/models/3DTiles/BIM_G1598257565598/tileset.json",
    featureType: BOSGeo.FeatureType.BIM,    //模型类型，包括BOSGeo.FeatureType.GLTF, FeatureType.TILES, FeatureType.BIM,FeatureType.PHOTO和FeatureType.POINTCLOUD
    position: [114.054437, 22.551279, 100],       //模型位置
});
modelLayer.zoomTo(testBIMModel); //缩放至模型
BOSGeo.ModelStyler.setTilesetColorByKey(tileset, [[['屋顶', '墙'], BOSGeo.Color.RED.withAlpha(0.3)], [['门', '窗'], BOSGeo.Color.BLUE]], 'type');

Example

//Example 2. 设置BIM模型中构件key值为"M1611818399552_140056"和"M1611818399552_111931"的构件为指定颜色
//添加的模型和过程同上一个示例
let keyV1 = "M1611818399552_140056", keyV2 = "M1611818399552_111931";
let color = BOSGeo.Color.fromCssColorString("#56ebfd");
BOSGeo.ModelStyler.setTilesetColorByKey(testBIMModel, [[[keyV1, keyV2], color]], 'key');

1.2.16. ModelStyler.setTilesetShowByKey(tileset, values, [key], [isShow])

根据属性值设置3DTiles 显隐样式(只修改显隐样式，不影响已有的颜色、平移和公转样式)

Example

// tileset为模型图层对象，数据地址可参考'https://bos3d-alpha.bimwinner.com/api/z71e26c47d1646c6baf0d7c07aa70e2b/geomodels/G1628646692115/data/tileset.json'
BOSGeo.ModelStyler.setTilesetShowByKey(tileset, ['窗', '墙'], 'type', false);

1.2.17. ModelStyler.setTilesetTranslationByKey(tileset, translationOptions, [key], [defaultTranslation])

根据属性值设置3DTiles 平移样式(只修改平移样式，不影响已有的显隐、颜色和公转样式)

Example

// tileset为模型图层对象，数据地址可参考'https://bos3d.bimwinner.com/api/hc5e721608984a99b81c849354a5f763/geomodels/G1628559876901/data/tileset.json'
function setTilesetTranslation(tileset) {
    var distance = 10; // 平移距离
    var localTranslation = new BOSGeo.Cartesian4(1, 0, 0, distance); // 局部坐标系的X轴方向

    var worldTranslationInENU = BOSGeo.GeoUtil.getWorldTranslation(tileset.boundingSphere.center, localTranslation); // 模型中心点的正东向

    const localAxisMatrix = BOSGeo.Matrix4.getMatrix3(tileset.root.computedTransform, new BOSGeo.Matrix3());
    const worldTranslationInTile = BOSGeo.GeoUtil.getWorldTranslationByAxisInfo(localAxisMatrix, localTranslation); // 模型根瓦片局部坐标系的X轴方向

    BOSGeo.ModelStyler.setTilesetTranslationByKey(
        tileset,
        [
            [['屋顶'], worldTranslationInENU], // 将type属性为屋顶的构件向正东平移10米
            [['墙'], worldTranslationInTile], // 将type属性为墙的构件向模型根瓦片的X轴方向平移10米
        ],
        'type',
        new BOSGeo.Cartesian4(0, 0, 1, 1)); // 默认其它类型的构件向上平移1米
}

if (tileset.ready) {
    setTilesetTranslation(tileset);
} else {
    tileset.readyPromise.then(() => {
        setTilesetTranslation(tileset);
    });
}

1.2.18. ModelStyler.setTilesetRevolutionByKey(tileset, rotationOptions, [key], [defaultRevolution])

根据属性值设置3DTiles 旋转——公转样式(只修改公转样式，不影响已有的显隐、颜色和平移样式)

Example

// tileset为模型图层对象，数据地址可参考'https://bos3d.bimwinner.com/api/hc5e721608984a99b81c849354a5f763/geomodels/G1628559876901/data/tileset.json'
function setRevolution(tileset) {
    // 设置公转轴为模型根节点指向正上方
    const modelCenter = tileset.boundingSphere.center;
    const centerArray = BOSGeo.GeoUtil.cartesianToArray(modelCenter);
    const modelCenterUp = BOSGeo.Cartesian3.fromDegrees(centerArray[0], centerArray[1], centerArray[2] + 20);

    // 显示旋转轴
    const axis = viewer.entities.add({
        polyline: {
            width: 6,
            positions: [modelCenter, modelCenterUp],
            material: BOSGeo.Color.RED,
            depthFailMaterial: BOSGeo.Color.RED,
        }
    });

    BOSGeo.ModelStyler.setTilesetRevolutionByKey(
        tileset,
        [
            [['屋顶'], modelCenter, modelCenterUp, 90], // 将type属性为屋顶的构件绕轴顺时针旋转90度
            [['墙'], modelCenter, modelCenterUp, -30], // 将type属性为墙的构件绕轴逆时针旋转30度
        ],
        'type');
}

if (tileset.ready) {
    setRevolution(tileset);
} else {
    tileset.readyPromise.then(() => {
        setRevolution(tileset);
    });
}

1.2.19. ModelStyler.updateTilesetStyle(tileset, styleOptions)

更新3DTiles样式 （颜色样式、显隐、平移和公转样式）

See

• setTilesetTranslationByKey
• setTilesetRevolutionByKey

Example

BOSGeo.ModelStyler.updateTilesetStyle(tileset, {
    colorStyle: {
        conditions: [
            ["${type} === '窗'", 'rgba(255,0,0,1)'],
            ['true', 'rgba(255,255,255,1)']
        ]
    },
    showStyle: {
        conditions: [
            ["${type} === '墙'", 'false'],
            ['true', `true`]
        ]
    }
});