三维可视化场景绘制多边形标注
创建矩形标注 （以下代码都要在 map.on('loadComplete') 中调用）
map.on('loadComplete', function () {
// 创建一个多边形对象
var rectangleMarker = new esmap.ESPolygonMarker({
color: '#9F35FF', // 填充颜色
alpha: 0.3, // 透明度
lineWidth: 1, // 边框宽度
height: 6, // 距离地面高度
points: {
type: 'rectangle', // 设置为矩形
center: { // 设置此形状的中心坐标
x: map.center.x,
y: map.center.y
},
width: 30, // 设置矩形宽度
height: 30 // 设置矩形长度
}
});
// 获取第一层的楼层对象
var floor = map.getFloor(1);
// 获取或者新建一个name为'mypoly'的多边形标注层
var layer = floor.getOrCreateLayerByName('mypoly', esmap.ESLayerType.POLYGON_MARKER);
// 添加标注
layer.addMarker(rectangleMarker);
});
创建圆形标注
map.on('loadComplete', function () {
// 创建一个多边形对象
var circleMaker = new esmap.ESPolygonMarker({
color: '#9F35FF', // 填充颜色
alpha: 0.3, // 透明度
lineWidth: 1, // 边框宽度
height: 6, // 距离地面高度
points: {
type: 'circle', // 设置为圆形
center: { // 设置此形状的中心坐标
x: coord.x,
y: coord.y
},
radius: 10, // 设置半径大小
segments: 40, // 设置段数，值越大越光滑，默认为40段
}
});
// 获取第一层的楼层对象
var floor = map.getFloor(1);
// 获取或者新建一个name为'mypoly'的多边形标注层
var layer = floor.getOrCreateLayerByName('mypoly', esmap.ESLayerType.POLYGON_MARKER);
// 添加标注
layer.addMarker(circleMaker);
});
创建自定义多边形标注
map.on('loadComplete', function () {
// 创建PolygonMarker自定义形状的顶点数组
var coords = [
{ x: map.center.x + 20, y: map.center.y + 20, z: 26 },
{ x: map.center.x + 40, y: map.center.y + 40, z: 26 },
{ x: map.center.x + 60, y: map.center.y + 20, z: 26 },
{ x: map.center.x + 40, y: map.center.y + 10, z: 26 },
{ x: map.center.x + 10, y: map.center.y, z: 26 },
];
// 创建一个多边形对象
var polygonMarker = new esmap.ESPolygonMarker({
color: '#9F35FF', // 填充颜色
alpha: 0.3, // 透明度
lineWidth: 1, // 边框宽度
height: 6, // 距离地面高度
points: coords
});
// 获取第一层的楼层对象
var floor = map.getFloor(1);
// 获取或者新建一个name为'mypoly'的多边形标注层
var layer = floor.getOrCreateLayerByName('mypoly', esmap.ESLayerType.POLYGON_MARKER);
// 添加标注
layer.addMarker(polygonMarker);
});
参数说明:
参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必填 |
|---|
color | 图形的颜色 | String | 颜色单词 || 十六进制颜色码 | #f2561a | 否 |
alpha | 透明度 | Number | 0-1 | 0.5 | 否 |
lineWidth | 边框的宽度 | Number || String | —— | 1 | 否 |
height | 距离地板的高度 | Number || String | —— | 6 | 否 |
points | 多边形形状配置 | Array || Object | —— | {
height: 30
type: "rectangle"
width: 30,
center: {
x: map.center.x,
y: map.center.y
}
} | 否 |
删除多边形标注
您可以根据图层删除多边形标注:
layer.remove(marker) // 删除某个标注(marker是指由new esmap.ESPolygonMarker生成的多边形实例对象)
layer.removeAll() // 删除该图层下所有标注
当然，也可以直接删除这个图层:
floorLayer.removeLayersByTypes(esmap.ESLayerType.POLYGON_MARKER);