您现在的位置: 首页 > 室内三维可视化SDK开发 > 开发指南

多边形标注绘制

创建矩形标注（以下代码都要在三维场景加载完成后调用map.on('loadComplete'）

 
function addRectangleMaker(coord) {
 var rectangleMarker = new esmap.ESPolygonMarker({
    //设置颜色
    color: '#9F35FF',
    //设置透明度
    alpha: .3,
    //设置边框线的宽度
    lineWidth: 1,
    //设置高度
    height: 6,
    points: {
        //设置为矩形
        type: 'rectangle',
        //设置此形状的中心坐标
        center: {
            x: coord.x,
            y: coord.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 coord= {
	 x: map.center.x,
	 y: map.center.y
	}
	addRectangleMaker(coord) //此处传入墨卡托坐标，下同
})

创建圆形标注

function addCircleMaker(coord, radius) {
var circleMaker = new esmap.ESPolygonMarker({
    //设置颜色
    color: '#3CF9DF',
    //设置透明度
    alpha: 0.3,
    //设置边框线的宽度
    lineWidth: 2,
    //设置高度
    height: 6,
    points: {
        //设置为圆形
        type: 'circle',
        //设置此形状的中心坐标
        center: {
            x: coord.x,
            y: coord.y
        },
        //设置半径
        radius: radius,
        //设置段数，默认为40段
        segments: 40,
    }
});

//获取第一层的楼层对象  
var floor = map.getFloor(1);        
//获取或者新建一个name为‘mypoly’的多边形标注层    
var layer =  floor.getOrCreateLayerByName('mypoly', esmap.ESLayerType.POLYGON_MARKER); 
//添加标注
layer.addMarker(circleMaker);
}

map.on('loadComplete',function(){
  //调用函数添加标注
  addCircleMaker();
})

创建自定义形状标注

function addMyPolygonMaker() {
//创建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 },
];
polygonMarker = new esmap.ESPolygonMarker({
    //设置透明度
    alpha: .5,
    //设置边框线的宽度
    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);
}

map.on('loadComplete',function(){
  //调用函数添加标注
  addMyPolygonMaker();
})

动态修改多边形标注的颜色

/** 修改为红色 */
marker.setColor("#FF0000");

修改多边形标注选中色

您可以自定义多边形标注的选中颜色

/** 修改选中色为绿色 */
map.setSelectColor(esmap.ESNodeType.POLYGON_MARKER , "#00FF00");

删除多边形标注

您可以根据图层删除多边形标注:

/** 删除某个标注 */
layer.remove(marker);   

/** 删除图层下所有标注 */
layer.removeAll();  

当然，也可以直接删除这个图层。

floorLayer.removeLayersByTypes(esmap.ESLayerType.POLYGON_MARKER);