Bạn có thể thêm nhiều hình dạng vào bản đồ. 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 kẻ và đa giác vào bản đồ.
Hình nhiều đường
Để vẽ một đường kẻ 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 gồm các đoạn đường kẻ được kết nối trên bản đồ. Đối tượng Polyline3DElement bao gồm một mảng vị trí LatLng và tạo một chuỗi đoạn đường kẻ kết 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 kẻ 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.
Các đối tượng hình nhiều đường được vẽ dưới dạng một chuỗi đoạn thẳng trên bản đồ. Bạn có thể chỉ định màu, độ dày, độ mờ, chiều cao và các tuỳ chọn kiểu hình học tuỳ chỉnh cho nét của đường kẻ trong Polyline3DElementOptions khi tạo đường kẻ 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 sau:
outerColor: Màu HTML thập lục phân theo định dạng"#FFFFFF".outerWidth: Giá trị số từ0.0đến1.0, được hiểu là phần trăm củastrokeWidth.strokeColor: Màu HTML thập lục phân theo định dạng"#FFFFFF".strokeWidth: Độ dày 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 liệu 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 có được vẽ hay không.extruded: Giá trị boolean cho biết liệu hình nhiều đường có đượ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', gestureHandling: 'COOPERATIVE', }); 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 chuyển đổi thuộc tính drawsOccludedSegments của hình nhiều đường sau khi đăng ký 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', gestureHandling: 'COOPERATIVE', }); 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 đại diện cho một khu vực được bao quanh bởi một đường khép kín (hoặc vòng lặp), được xác định bởi một chuỗi toạ độ.
Polygon3DElement
các đối tượng tương tự như Polyline3DElement các đối tượng ở chỗ chúng bao gồm một
chuỗi toạ độ theo một trình tự có thứ tự. Đa giác được vẽ bằng nét và màu tô. Bạn có thể xác định màu sắc tuỳ chỉnh và độ dày tuỳ chỉnh cho cạnh của đa giác (nét) và màu sắc tuỳ chỉnh cũng như độ mờ tuỳ chỉnh cho khu vực được bao quanh (màu tô).
Màu phải được biểu thị ở định dạng HTML thập lục phân. Tên màu không được hỗ trợ.
Các đố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.
- Cá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 hãy sử dụng một đa giác có nhiều đường.
Thêm đa giác
Vì một khu vực đa giác có thể bao gồm nhiều đường riêng biệt, nên thuộc tính đường của đối tượng Polygon3DElement chỉ định một mảng mảng. Mỗi mảng xác định một chuỗi riêng biệt gồm các toạ độ LatLng có thứ tự.
Đối với các đa giác cơ bản chỉ bao gồm một đường, bạn có thể tạo Polygon3DElement bằng một mảng toạ độ LatLng duy nhất. Bản đồ 3D trong API JavaScript của Maps sẽ chuyển đổi mảng thành một mảng mảng khi tạo khi lưu trữ 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', gestureHandling: 'COOPERATIVE', }); 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ý 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', gestureHandling: 'COOPERATIVE', }); 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();