拉伸图层白模贴图效果（Extrusion）

白模贴图是拉伸图层的进阶效果。在拉伸图层已有功能的基础上，通过配置分层分户以及贴图相关样式，实现丰富的可视化效果。

示例

const layer = new aimap.Extrusion({
    mode: '3d',
    images: [{
        id: "building",        //图片id
        type: "texture",       //三维场景适用的材质类型
        url: `textures/building.png`,
	}],
    data: [{
        coordinates: [[[121.1, 31.2], [121.1, 31.3], [121.2, 31.3], [121.2, 31.2], [121.1, 31.2]]]
    }, {
        coordinates: [[[121.1, 31.2], [121.1, 31.3], [121.0, 31.3], [121.0, 31.2], [121.1, 31.2]]]
    }],
    style: {
        'extrusion-color': 'white',
        'extrusion-opacity': 1,
        'extrusion-height': 100,
        'extrusion-base': 0,
        'extrusion-floor-height': 1,       //样式参数影响分层效果
        'extrusion-segment': true,         //样式参数影响分户效果

        'extrusion-texture': "building",   //贴图使用的图片的id，对应images参数
        'extrusion-texture-scale': [0, 0]  //贴图像素与真实尺寸的比例关系，目前不支持表达式
        
    },
    map
});

白模贴图的图层样式说明

样式名称	取值范围	说明
extrusion-floor-height	0~[extrusion-height]	每层楼的高度，单位与extrusion-height相同。0等效于不分层。
extrusion-texture	image的id字段	对应图层images数据中的id字段
extrusion-texture-scale	[正数，正数]	贴图时uv方向上相对真实距离的比例
extrusion-outline-floor	0~1	高亮颜色在侧面每个楼层之间的比例
extrusion-outline-top	0~1	高亮颜色在侧面顶部的比例
extrusion-outline-color	color	高亮颜色
extrusion-segment	bool	贴图着色是以多边形的周为参考还是以每个边为参考，影响底层纹理uv的计算
extrusion-base	0~	海拔高度
extrusion-height	0~	拉伸立体高度
extrusion-opacity	0~1	透明度
extrusion-top-color	color	顶面颜色
extrusion-top-opacity	0~1	顶面透明度

白模贴图的图层配置要点

1. 'extrusion-color'的颜色必须设置为白色
2. 图层images参数中的image对象的type必须是'texture'
3. 根据图片素材的实际情况选择对应的图层样式参数

下面详细介绍如何根据图片素材配置图层

图片素材为整个建筑侧面

样式示例

    const floorHeight = 3; // 图片素材每层的高度
    const floorCount = 9;  // 图片素材的建筑层数
    const textureScaleY = floorHeight * textureScale; //依据图片素材的具体情况计算y方向的贴图尺寸。
    const layerOptions = { 
        images: [{
            id: "building",        //图片id
            type: "texture",       //三维场景适用的材质类型
            url: `textures/building.png`,
        }],
        style: {
            'extrusion-floor-height': 0,
            'extrusion-segment': true,
            'extrusion-texture': 'building',
            'extrusion-texture-scale': [0, textureScaleY] //根据图片素材的楼层具体情况设置y方向的贴图尺寸
        }
    }

图片素材为建筑侧面的单层局部

样式示例

    const layerOptions = {
        images: [{
            id: "floor",        //图片id
            type: "texture",       //三维场景适用的材质类型
            url: `textures/floor.png`,
        }],
        style: {
            'extrusion-floor-height': 5, //每层贴图的高度
            'extrusion-segment': true,
            'extrusion-texture': 'floor',
            'extrusion-texture-scale': [2, 0] //设置x方向的贴图尺寸控制每层贴图的效果
        }
    }

图片素材为建筑侧面的单户局部

样式示例

    const layerOptions = {
        images: [{
            id: "door",        //图片id
            type: "texture",       //三维场景适用的材质类型
            url: `textures/door.png`,
        }],
        style: {
            'extrusion-floor-height': 0, //使用独户图片素材时，不分层
            'extrusion-segment': true,
            'extrusion-texture': 'door',
            'extrusion-texture-scale': [0.2, 30] //设置贴图尺寸以期获得合适的独户贴图效果
        }
    }