三维可视化场景绘制多边形标注

创建矩形标注 （以下代码都要在 map.on('loadComplete') 中调用）

map.on('loadComplete', function () {
//添加标注一定要放在地图加载完成之后才能执行，拷贝下面代码即可
    // 创建一个多边形对象
    var rectangleMarker = new esmap.ESPolygonMarker({
        id: 'polygon1',        // 标注ID
        name: '多边形标注',     // 标注名称
        color: '#9F35FF',      // 填充颜色
        opacity: 0.3,          // 透明度
        height: 6,             // 距离地面高度
        points: {            
            type: 'rectangle', // 设置为矩形
            center: {          // 设置此形状的中心坐标
                x: map.center.x,
                y: map.center.y
            },
            width: 30,         // 设置矩形宽度
            height: 30         // 设置矩形长度
        }
    });
  
    var building = map.getBuildingById('test666'); 
    // 获取第一层的楼层对象
    var floor = building.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,          // 透明度
    lineStyle：{
        lineWidth: 1,    // 边框宽度
        color: '#FEFEFE' // 单独设置边框颜色
    },
    height: 6,           // 距离地面高度
    points: {
        type: 'circle',    // 设置为圆形
        center: {          // 设置此形状的中心坐标
            x: coord.x,
            y: coord.y
        },
        radius: 10,     // 设置半径大小
        segments: 40,   // 设置段数，值越大越光滑，默认为40段
    }
    });

    // 获取第一层的楼层对象  
    var building = map.getBuildingById('test666'); 
    var floor = building.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,          // 透明度
        lineStyle：{
            lineWidth: 1,    // 边框宽度
            color: '#FEFEFE' // 单独设置边框颜色
        },
        height: 6,           // 距离地面高度
        points: coords,      // 点集数组
        pickable: true       // 标注是否可被点击
    });

    // 获取第一层的楼层对象  
    var building = map.getBuildingById('test666'); 
    var floor = building.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	否
lineStyle	边框的样式	Object	——	——	否
height	距离地板的高度	Number || String	——	6	否
pickable	标注是否可被点击	Boolean	——	false	否
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);

标注支持手动控制显隐:

marker.visible = false  // 隐藏标注
marker.visible = true   // 显示标注