지도에 공간객체의 스타일을 설정하는 예제입니다. 특정 공간객체의
스타일만 변경할 수 있습니다.
// 지도를 생성합니다.
var map = new routo.maps.Map("map");
// 점형 공간 객체를 생성 후 지도에 추가 합니다.
// 점형 공간정보를 생성합니다.
var point = new routo.maps.Data.Point({ lat: 37.507009, lng: 127.0586339 });
// 공간 객체를 생성합니다.
var feature = new routo.maps.Data.Feature({
geometry: point,
id: 1,
});
// 공간 객체를 추가합니다.
map.data.add(feature);
// 선형 공간 객체를 추가합니다. Feature를 생성하지 않고 추가합니다.
var coords = [
{ lat: 37.505009, lng: 127.0386339 }, // north west
{ lat: 37.487009, lng: 127.0386339 }, // south west
{ lat: 37.487009, lng: 127.0486339 }, // south east
{ lat: 37.507009, lng: 127.0486339 }, // north east
];
var lineString = new routo.maps.Data.LineString(coords);
map.data.add({
geometry: lineString,
});
// 면형 공간 객체를 추가합니다.
// 면형 공간 좌표 입니다.
var outerCoords = [
{ lat: 37.507009, lng: 127.0586339 }, // north west
{ lat: 37.487009, lng: 127.0586339 }, // south west
{ lat: 37.487009, lng: 127.0886339 }, // south east
{ lat: 37.507009, lng: 127.0886339 }, // north east
];
// 면 내부에 뚫려있는 영역을 정의하는 공간 좌표 입니다.
var innerCoords = [
{ lat: 37.497009, lng: 127.0686339 }, // north west
{ lat: 37.492009, lng: 127.0686339 }, // south west
{ lat: 37.492009, lng: 127.0786339 }, // south east
{ lat: 37.497009, lng: 127.0786339 }, // north east
];
// 면형 공간 정보를 생성합니다.
var polygon = new routo.maps.Data.Polygon([outerCoords, innerCoords]);
// 면형 공간 객체를 추가합니다.
var polygonFeature = map.data.add({
geometry: polygon,
});
// 지도 Data 에 포함된 모든 공간객체의 스타일을 설정합니다.
map.data.setStyle({
fillColor: "#ff0000", // 채우기 색상
fillOpacity: 0.3, // 채우기 투명도
strokeColor: "#0000ff", // 테두리 색상
strokeOpacity: 1, // 테두리 투명도
strokeWeight: 2, // 테두리 굵기
label: "스타일",
visible: true,
});
// 점형 공간객체의 라벨을 변경합니다.
map.data.overrideStyle(feature, {
label: "라벨변경"
});
// 면형 공간객체의 채우기 색상을 노란색으로 변경합니다.
map.data.overrideStyle(polygonFeature, {
fillColor: "#ffff00"
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>공간객체 스타일 변경하기</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.map {
width: 100%;
height: 400px;
position: relative;
}</style>
</head>
<body>
<h2>공간객체 스타일 변경하기</h2>
<hr />
<p>
지도에 공간객체의 스타일을 설정하는 예제입니다. 특정 공간객체의 스타일만 변경할 수 있습니다.
</p>
<div id="map" class="map"></div>
</body>
<script src="https://api.routo.com/v2/maps/map?key=12290cd4-7094-43e8-a936-8819196d0332"></script>
<script src="https://api.routo.com/v2/maps/js/data.js"></script>
<script>
// 지도를 생성합니다.
var map = new routo.maps.Map("map");
// 점형 공간 객체를 생성 후 지도에 추가 합니다.
// 점형 공간정보를 생성합니다.
var point = new routo.maps.Data.Point({ lat: 37.507009, lng: 127.0586339 });
// 공간 객체를 생성합니다.
var feature = new routo.maps.Data.Feature({
geometry: point,
id: 1,
});
// 공간 객체를 추가합니다.
map.data.add(feature);
// 선형 공간 객체를 추가합니다. Feature를 생성하지 않고 추가합니다.
var coords = [
{ lat: 37.505009, lng: 127.0386339 }, // north west
{ lat: 37.487009, lng: 127.0386339 }, // south west
{ lat: 37.487009, lng: 127.0486339 }, // south east
{ lat: 37.507009, lng: 127.0486339 }, // north east
];
var lineString = new routo.maps.Data.LineString(coords);
map.data.add({
geometry: lineString,
});
// 면형 공간 객체를 추가합니다.
// 면형 공간 좌표 입니다.
var outerCoords = [
{ lat: 37.507009, lng: 127.0586339 }, // north west
{ lat: 37.487009, lng: 127.0586339 }, // south west
{ lat: 37.487009, lng: 127.0886339 }, // south east
{ lat: 37.507009, lng: 127.0886339 }, // north east
];
// 면 내부에 뚫려있는 영역을 정의하는 공간 좌표 입니다.
var innerCoords = [
{ lat: 37.497009, lng: 127.0686339 }, // north west
{ lat: 37.492009, lng: 127.0686339 }, // south west
{ lat: 37.492009, lng: 127.0786339 }, // south east
{ lat: 37.497009, lng: 127.0786339 }, // north east
];
// 면형 공간 정보를 생성합니다.
var polygon = new routo.maps.Data.Polygon([outerCoords, innerCoords]);
// 면형 공간 객체를 추가합니다.
var polygonFeature = map.data.add({
geometry: polygon,
});
// 지도 Data 에 포함된 모든 공간객체의 스타일을 설정합니다.
map.data.setStyle({
fillColor: "#ff0000", // 채우기 색상
fillOpacity: 0.3, // 채우기 투명도
strokeColor: "#0000ff", // 테두리 색상
strokeOpacity: 1, // 테두리 투명도
strokeWeight: 2, // 테두리 굵기
label: "스타일",
visible: true,
});
// 점형 공간객체의 라벨을 변경합니다.
map.data.overrideStyle(feature, {
label: "라벨변경"
});
// 면형 공간객체의 채우기 색상을 노란색으로 변경합니다.
map.data.overrideStyle(polygonFeature, {
fillColor: "#ffff00"
});</script>
</html>
