Bạn có thể thêm nhiều hình dạng vào bản đồ của mình. Hình dạng là một đối tượng trên bản đồ, được liên kết với hệ toạ độ LatLng. Bản đồ 3D trong API JavaScript của Maps hỗ trợ việc thêm đường và đa giác vào bản đồ.
Hình nhiều đường
Để vẽ một đường trên bản đồ, hãy sử dụng hình nhiều đường. Lớp Polyline3DElement xác định một lớp phủ tuyến tính của các đoạn thẳng được kết nối trên bản đồ. Đối tượng Polyline3DElement bao gồm một mảng gồm các vị trí LatLng và tạo một loạt các đoạn thẳng nối các vị trí đó theo một trình tự có thứ tự.
Thêm hình nhiều đường
Hàm khởi tạo Polyline3DElement lấy một tập hợp Polyline3DElementOptions chỉ định toạ độ LatLng của đường và một tập hợp kiểu để điều chỉnh hành vi trực quan của hình nhiều đường.
Đối tượng hình nhiều đường được vẽ dưới dạng một loạt các đoạn thẳng trên bản đồ. Bạn có thể chỉ định màu sắc tuỳ chỉnh, chiều rộng, độ mờ, chiều cao và các tuỳ chọn kiểu hình học cho nét vẽ của đường trong Polyline3DElementOptions khi tạo đường, hoặc bạn có thể thay đổi các thuộc tính đó sau khi tạo. Hình nhiều đường hỗ trợ các kiểu nét vẽ sau:
outerColor: Màu HTML hệ thập lục phân có định dạng"#FFFFFF".outerWidth: Giá trị số từ0.0đến1.0, được diễn giải dưới dạng tỷ lệ phần trăm củastrokeWidth.strokeColor: Màu HTML hệ thập lục phân có định dạng"#FFFFFF".strokeWidth: Chiều rộng của đường kẻ, tính bằng pixel.geodesic: liệu các cạnh của đa giác có tuân theo độ cong của trái đất hay được vẽ dưới dạng đường thẳng.altitudeMode: Cách diễn giải các thành phần độ cao trong toạ độdrawsOccludedSegments: Giá trị boolean cho biết có nên vẽ các phần của đa giác bị các đối tượng (chẳng hạn như toà nhà) che khuất hay không.extruded: Một giá trị boolean cho biết liệu hình nhiều đường có nên được kết nối với mặt đất hay không.
let map; async function init() { const { Map3DElement, Polyline3DElement } = await google.maps.importLibrary('maps3d'); map = new Map3DElement({ center: { lat: 37.7927, lng: -122.402, altitude: 65.93 }, range: 3362.87, tilt: 64.01, heading: 25.0, mode: 'SATELLITE', }); document.body.append(map); const polyline = new Polyline3DElement({ path: [ { 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 }, ], strokeColor: 'blue', outerColor: 'white', strokeWidth: 10, outerWidth: 0.4, altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height). drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way. }); map.append(polyline); } void init();
Hình nhiều đường tương tác
Ví dụ sau đây bật/tắt thuộc tính drawsOccludedSegments của hình nhiều đường sau khi đăng ký một sự kiện nhấp chuột.
let map; async function init() { const { Map3DElement, Polyline3DInteractiveElement } = await google.maps.importLibrary('maps3d'); map = new Map3DElement({ center: { lat: 37.7927, lng: -122.402, altitude: 65.93 }, range: 3362.87, tilt: 64.01, heading: 25.0, mode: 'SATELLITE', }); document.body.append(map); const polyline = new Polyline3DInteractiveElement({ 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 }, ], strokeColor: 'blue', outerColor: 'white', strokeWidth: 10, outerWidth: 0.4, altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height). drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way. }); polyline.addEventListener('gmp-click', function () { // Toggle whether the line draws occluded segments. this.drawsOccludedSegments = !this.drawsOccludedSegments; }); map.append(polyline); } void init();
Đa giác
Đa giác biểu thị một khu vực được bao quanh bởi một đường dẫn khép kín (hoặc vòng lặp), được xác định bằng một loạt toạ độ.
Các đối tượng Polygon3DElement tương tự như các đối tượng Polyline3DElement ở chỗ chúng bao gồm một loạt toạ độ theo trình tự có thứ tự. Đa giác được vẽ bằng nét vẽ và màu nền. Bạn có thể xác định màu sắc tuỳ chỉnh và chiều rộng cho cạnh của đa giác (nét vẽ) cũng như màu sắc tuỳ chỉnh và độ mờ cho vùng được bao quanh (màu nền).
Màu sắc phải được chỉ định ở định dạng HTML thập lục phân. Tên màu không được hỗ trợ.
Đối tượng Polygon3DElement có thể mô tả các hình dạng phức tạp, bao gồm:
- Nhiều khu vực không liền kề được xác định bằng một đa giác.
- Khu vực có lỗ.
- Giao điểm của một hoặc nhiều khu vực.
Để xác định một hình dạng phức tạp, bạn sử dụng một đa giác có nhiều đường dẫn.
Thêm đa giác
Vì một khu vực đa giác có thể bao gồm nhiều đường dẫn riêng biệt, nên thuộc tính đường dẫn của đối tượng Polygon3DElement chỉ định một mảng các mảng. Mỗi mảng xác định một chuỗi riêng biệt gồm các toạ độ LatLng được sắp xếp theo thứ tự.
Đối với đa giác cơ bản chỉ bao gồm một đường dẫn, bạn có thể tạo một Polygon3DElement bằng cách sử dụng một mảng toạ độ LatLng duy nhất. Bản đồ 3D trong Maps JavaScript API sẽ chuyển đổi mảng thành một mảng gồm các mảng khi tạo và lưu trữ mảng đó trong thuộc tính path.
async function init() { const { Map3DElement, Polygon3DElement } = await google.maps.importLibrary('maps3d'); const map3DElement = new Map3DElement({ center: { lat: 40.6842, lng: -74.0019, altitude: 1000 }, heading: 340, tilt: 70, mode: 'HYBRID', }); const polygonOptions = { strokeColor: '#0000ff80', strokeWidth: 8, fillColor: '#ff000080', drawsOccludedSegments: false, }; const examplePolygon = new Polygon3DElement(polygonOptions); examplePolygon.path = [ { lat: 40.7144, lng: -74.0208 }, { lat: 40.6993, lng: -74.019 }, { lat: 40.7035, lng: -74.0004 }, ]; map3DElement.append(examplePolygon); document.body.append(map3DElement); } void init();
Đa giác tương tác
Ví dụ sau đây thay đổi màu bên trong và bên ngoài của đa giác sau khi đăng ký một sự kiện nhấp chuột.
async function init() { const { Map3DElement, Polygon3DInteractiveElement } = await google.maps.importLibrary('maps3d'); const map = new Map3DElement({ center: { lat: 40.6842, lng: -74.0019, altitude: 1000 }, heading: 340, tilt: 70, mode: 'HYBRID', }); document.body.append(map); const polygonOptions = { strokeColor: '#0000ff80', strokeWidth: 8, fillColor: '#ff000080', drawsOccludedSegments: false, }; const examplePolygon = new Polygon3DInteractiveElement(polygonOptions); examplePolygon.path = [ { lat: 40.7144, lng: -74.0208 }, { lat: 40.6993, lng: -74.019 }, { lat: 40.7035, lng: -74.0004 }, { lat: 40.7144, lng: -74.0208 }, ]; examplePolygon.addEventListener('gmp-click', function (event) { // change the color of the polygon stroke and fill colors to a random alternatives! this.fillColor = randomizeHexColor(this.fillColor); this.strokeColor = randomizeHexColor(this.strokeColor); console.log(event); }); map.append(examplePolygon); } function randomizeHexColor(originalHexColor) { console.log(originalHexColor); const alpha = originalHexColor.substring(7); // Generate random values for Red, Green, Blue (0-255) const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); console.log(r + ' ' + g + ' ' + b); // Convert decimal to 2-digit hex, padding with '0' if needed const rHex = ('0' + r.toString(16)).slice(-2); const gHex = ('0' + g.toString(16)).slice(-2); const bHex = ('0' + b.toString(16)).slice(-2); // Combine parts: '#' + random RGB + original Alpha (if any) return `#${rHex}${gHex}${bHex}${alpha}`; } void init();