style (cfg.point.image)
image 주변에 표시되는 레이블의 위치, 색상, 크기를 설정합니다.
Type
object
Options
| Value |
Description |
object |
차트 영역의 스타일을 설정 |
style Info
| name |
type |
required(Default) |
description |
height |
number |
선택(30) |
이미지 영역의 높이 설정 |
width |
number |
선택(30) |
이미지 영역의 너비 설정 |
backgroundColor |
string |
선택("transparent") |
이미지 영역의 배경색 설정 |
border |
object |
선택 |
이미지 영역의 테두리 설정 |
labelColor |
string |
선택(’#666666’) |
이미지 label의 font 색상 |
labelSize |
number |
선택(15) |
이미지 label의 font 크기 |
labelPos |
string |
선택('bottom') |
이미지 기준 label의 위치('top','bottom','left','right') |
labelX |
number |
선택 |
label의 x축 방향 위치 조정 |
labelY |
number |
선택 |
label의 y축 방향 위치 조정 |
labelLineBreak |
string |
선택 |
레이블을 줄바꿈 기준 설정 |
textAlign |
string |
선택 |
레이블을 줄바꿈 시 문자 정렬 설정('left', 'center', 'right') |
labelBorderColor |
string |
선택 |
label 외곽선(테두리) 색상 설정 |
labelBorderWidth |
number |
선택 |
label 외곽선(테두리) 두께 설정(px) |
style.border Info
| name |
type |
required(Default) |
description |
width |
number |
선택(0) |
테두리 너비 설정 |
color |
string |
선택("green") |
테두리 색상 설정 |
radius |
number |
선택(3) |
테두리 radius 설정 |
Example
IBMapCharts.config({
point: {
image: {
url: "/images/icon/p100.png"
label: "좋음"
style: {
width: 50,
width: 50,
labelColor: "blue",
labelSize: 20,
labelPos: 'bottom'
}
}
}
});
var myData = [
{
"id": "yangsu",
"name": "양양양수",
lon: 128.43207001054944,
lat: 38.1292698012889,
"image": {
url:"./images/targetPower1.jpg",
label: '양양양수(1,000)',
style:{
width: 80,
height: 80,
border: {
color:"red",
width: 10
},
labelPos:"right",
labelColor:"red",
labelSize: 20
}
}
},
];
ibmap.point.clear();
ibmap.point.add( myData );
ibmap.point.show( "image" );
since
| version |
desc |
| 8.0.0.1 |
기능 추가 |
| 8.0.0.3 |
labelX, labelY 속성 추가 |
| 8.0.0.11 |
labelLineBreak, textAlign 속성 추가 |
| 8.0.0.13 |
labelBorderColor, labelBorderWidth 속성 추가 |