形状和线条

请选择平台： Android iOS

您可以向地图添加各种形状。形状是地图上的一种对象，与 LatLng 坐标系相关联。Maps JavaScript API 中的仿真 3D 地图支持向地图添加线条和多边形。

多段线

要在地图上绘制线条，可以使用多段线。Polyline3DElement 类可定义地图上的线性相连线段叠加层。Polyline 对象包含一组 LatLng 位置，并可创建一系列线段，依照先后次序将这些位置连接起来。

添加多段线

Polyline 构造函数可接受一组 Polyline3DElementOptions（用于指定线条的 LatLng 坐标）和一组样式（用于调整多段线的视觉行为）。

多段线对象在地图上绘制为一系列直线段。您可以在构建线条时通过 Polyline3DElementOptions 指定线条描边的自定义颜色、宽度、不透明度、高度和几何图形样式选项，也可以在构建后更改这些属性。多段线支持下列描边样式：

  • outerColor："#FFFFFF" 格式的十六进制 HTML 颜色。
  • outerWidth：介于 0.0 到 1.0 之间的数值，表示 strokeWidth 的百分比。
  • strokeColor："#FFFFFF" 格式的十六进制 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 对象类似，因为它们都包含一系列有序的坐标。多边形使用描边和填充区绘制而成。您可以为多边形的边缘（描边）定义自定义颜色和宽度，并为封闭区域（填充区）定义自定义颜色和不透明度。颜色应以十六进制 HTML 格式表示，不支持颜色名称。

Polygon 对象可以描述复杂形状，其中包括：

  • 由单个多边形定义的多个不连续区域。
  • 带孔的区域。
  • 一个或多个区域的交集。

要定义复杂形状，需要使用包含多条路径的多边形。

添加多边形

由于多边形区域可能包含多条单独路径，因此 Polygon 对象的 paths 属性会指定一个数组的数组，其中每个数组的类型均为 MVCArray。每个数组都会定义一个单独的有序 LatLng 坐标序列。

对于仅包含一条路径的基本多边形，您可以只使用一个 LatLng 坐标数组来构建 Polygon。在构建完成后将此数组存储到 outerCoordinates 属性内时，Maps JavaScript API 中的 Photorealistic 3D Maps 会将其转换为一个数组的数组。

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();