지도에 다양한 도형을 추가할 수 있습니다. 도형은 LatLng 좌표 시스템에 연결된 지도상의 객체입니다. Maps JavaScript API의 포토리얼리스틱 3D 지도에서는 지도에 선과 다각형을 추가할 수 있습니다.
다중선
지도에 선을 그리려면 다중선을 사용하세요. Polyline3DElement 클래스는 지도에서 연결된 선분의 선형 오버레이를 정의합니다. Polyline 객체는 LatLng 위치 배열로 구성되며 이러한 위치를 순서대로 연결하는 일련의 선분을 생성합니다.
다중선 추가
Polyline 생성자는 선의 LatLng 좌표를 지정하는 Polyline3DElementOptions의 집합과 스타일의 집합을 가져와 다중선의 시각적인 동작을 조정합니다.
다중선 객체는 지도에 일련의 직선 선분으로 그려집니다. 선을 생성할 때 Polyline3DElementOptions 내에서 선 획의 맞춤 색상, 너비, 불투명도, 높이, 기하학적 스타일 지정 옵션을 지정하거나 생성 후 이러한 속성을 변경할 수 있습니다. 다중선은 다음과 같은 획 스타일을 지원합니다.
outerColor:"#FFFFFF"형식의 16진수 HTML 색상입니다.outerWidth:0.0과1.0사이의 숫자 값으로,strokeWidth의 비율로 해석됩니다.strokeColor:"#FFFFFF"형식의 16진수 HTML 색상입니다.strokeWidth: 선의 너비(픽셀)입니다.geodesic: 다각형의 가장자리가 지구의 곡선을 따르고 있는지 또는 직선으로 그려지는지 여부입니다.altitudeMode: 좌표의 고도 구성요소가 해석되는 방식drawsOccludedSegments: 건물과 같은 객체에 가려진 다각형 부분을 그려야 하는지 여부를 나타내는 불리언입니다.extruded: 다중선이 지면에 연결되어야 하는지 여부를 나타내는 불리언입니다.
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map = new Map3DElement({
center: { lat: 37.772675996068915, lng: -122.3978382542777, altitude: 2500 },
tilt: 45,
heading: 5.9743656,
mode: MapMode.HYBRID,
});
const { Polyline3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
const polylineOptions = {
strokeColor: "#EA433580",
strokeWidth: 10,
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const polyline = new google.maps.maps3d.Polyline3DElement(polylineOptions)
polyline.coordinates = [
{lat: 37.80515638571346, lng: -122.4032569467164},
{lat: 37.80337073509504, lng: -122.4012878349353},
{lat: 37.79925208843463, lng: -122.3976697250461},
{lat: 37.7989102378512, lng: -122.3983408725656},
{lat: 37.79887832784348, lng: -122.3987094864192},
{lat: 37.79786443410338, lng: -122.4066878788802},
{lat: 37.79549248916587, lng: -122.4032992702785},
{lat: 37.78861484290265, lng: -122.4019489189814},
{lat: 37.78618687561075, lng: -122.398969592545},
{lat: 37.7892310309145, lng: -122.3951458683092},
{lat: 37.7916358762409, lng: -122.3981969390652}
];
map.append(polyline)
document.body.append(map);
}
init();
대화형 폴리라인
다음 예에서는 클릭 이벤트를 등록한 후 다중선의 획 색상을 변경합니다.
async function init() {
const colors = ["red", "blue", "green", "yellow"];
const { Map3DElement, MapMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const map = new Map3DElement({
center: {lat: 0, lng: -180, altitude: 15000000},
mode: MapMode.HYBRID,
});
document.body.append(map);
const polyline = new Polyline3DInteractiveElement({
coordinates: [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 }
],
strokeColor: 'red',
strokeWidth: 10,
});
polyline.addEventListener('gmp-click', (event) => {
polyline.strokeColor = colors[~~(Math.random() * colors.length)];
});
map.append(polyline);
}
init();
다각형
다각형은 일련의 좌표로 정의되는 닫힌 경로 (또는 루프)로 둘러싸인 영역을 나타냅니다.
Polygon 객체는 순서가 지정된 일련의 좌표로 이루어졌다는 점에서 Polyline 객체와 유사합니다. 다각형은 획과 채우기로 그려집니다.
다각형 가장자리 (획)의 맞춤 색상 및 너비와 둘러싸인 영역 (채우기)의 맞춤 색상 및 불투명도를 정의할 수 있습니다. 색상은 16진수 HTML 형식으로 표시해야 합니다. 색상 이름은 지원되지 않습니다.
Polygon 객체로 다음과 같이 복잡한 도형을 표시할 수 있습니다.
- 단일 다각형으로 정의된 인접하지 않은 여러 영역
- 구멍이 있는 영역
- 영역 하나 이상의 교차 영역
복잡한 도형을 정의하려면 여러 경로가 포함된 다각형을 사용하세요.
다각형 추가
다각형 영역에 여러 개의 개별 경로가 포함될 수 있으므로 Polygon 객체의 경로 속성은 각각 MVCArray 유형인 배열의 배열을 지정합니다.
각 배열은 순서가 지정된 LatLng 좌표의 개별 시퀀스를 정의합니다.
하나의 경로로만 구성된 기본 다각형의 경우 LatLng 좌표의 단일 배열을 사용하여 Polygon을 생성할 수 있습니다. Maps JavaScript API의 포토리얼리스틱 3D 지도는 배열이 outerCoordinates 속성 내에 저장되는 경우 생성 시 배열을 배열의 배열로 변환합니다.
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.SATELLITE,
});
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 }
];
map3DElement.append(towerPolygon);
document.body.append(map3DElement);
}
init();
양방향 다각형
다음 예에서는 클릭 이벤트를 등록한 후 다각형의 획 색상을 변경합니다.
async function init() {
const colors = ["red", "blue", "green", "yellow"];
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.SATELLITE,
});
const { Polygon3DInteractiveElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 }
];
towerPolygon.addEventListener('gmp-click', (event) => {
towerPolygon.strokeColor = colors[~~(Math.random() * colors.length)];
});
map3DElement.append(towerPolygon);
document.body.append(map3DElement);
}
init();