多边形标注绘制
创建矩形标注(以下代码都要在三维场景加载完成后调用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);