ExtrudePolygonLayer
ExtrudePolygonLayer继承了OverlayLayer,从名字上就可以看出,其是用来管理图形面(Polygon)数据的
可以存放的图形
- 面
- 矩形
- 圆等
在业务里使用ExtrudePolygonLayer主要是不断的:
- 添加图形
- 移除图形
- 清空图形
- 显示图层
- 隐藏图层等
注意:ExtrudePolygonLayer的作用是用来管理图形,方便的图形的批量显示,隐藏,添加等操作,所以其具有的特性是:
- 看不见摸不着
- 没有
click
等这些事件的
注意其在maptalks-gl
包里,你需要:
sh
npm i maptalks-gl
用法
由于其也是是继承OverlayLayer 的,你会发现其用法和VectorLayer一样,仅有的区别:
- 其是webgl渲染的
- 其仅仅支持Polygon图形数据
确切的说凡是继承了OverlayLayer的图层他们的用法都是一样的,仅仅是不同的图层管理的数据类别不同和渲染的形态不同罢了
js
const dataConfig = {
type: '3d-extrusion',
altitudeProperty: 'height',
altitudeScale: 5,
defaultAltitude: 0,
top: true,
side: true,
// sideVerticalUVMode: 1
// textureYOrigin: 'bottom'
};
const material = {
'baseColorFactor': [1, 1, 1, 1],
'emissiveFactor': [1, 1, 1],
'roughnessFactor': 0,
'metalnessFactor': 0,
'outputSRGB': 0,
'uvScale': [0.001, 0.0013]
};
const layer = new maptalks.ExtrudePolygonLayer('vector', { dataConfig, material, geometryEvents: false });
const groupLayer = new maptalks.GroupGLLayer('group', [layer]).addTo(map);
fetch('./../assets/data/area.geojson').then(res => res.json()).then(geojson => {
const polygons = maptalks.GeoJSON.toGeometry(geojson);
polygons.forEach(polygon => {
polygon.setSymbol({
topPolygonFill: '#fff',
bottomPolygonFill: '#000',
});
polygon.setProperties({
height: 1000
})
});
layer.addGeometry(polygons);
})
适用场景
ExtrudePolygonLayer适合来展示建筑物和3D的行政区等