Function addPolygon

  • addPolygon(): void

  • ポリゴン・ポリライン・円を地図上に追加・削除する — 詳細な使用例

    基本的な図形（ポリゴン・ポリライン・円）を地図上に描画します。 それぞれ add / remove のペアで追加・削除します。

    図形 追加 削除
    ポリゴン（塗りつぶし多角形） addPolygon removePolygon
    ポリライン（折れ線） addPolyline removePolyline
    円 addCircle removeCircle

    Returns void

    Warning

    • 各 remove メソッドには 追加時と同一のインスタンス を渡してください。
    • ポリゴンの外側マスクが必要な場合は setPolygonOutside を使用してください。
    • GeoJSON 形式のデータをまとめて描画するには addGeoJsonFigure が便利です。

    Example: ポリゴン・ポリライン・円をそれぞれ追加する

    import * as GIA from '@ntj/gaia';

    // ポリゴン
    const polygon = new GIA.object.Polygon({
      paths: [
        new GIA.value.LatLng(35.68, 139.69),
        new GIA.value.LatLng(35.69, 139.70),
        new GIA.value.LatLng(35.70, 139.69),
      ],
      fillColor: GIA.value.Color.fromColorCodeSixHex('#FF4444') ?? GIA.value.Color.black(),
      strokeColor: GIA.value.Color.fromColorCodeSixHex('#B71C1C') ?? GIA.value.Color.black(),
      strokeWeight: 2,
      overlay: false,
    });
    map.addPolygon(polygon);

    // ポリライン
    const polyline = new GIA.object.Polyline({
      path: [
        new GIA.value.LatLng(35.68, 139.69),
        new GIA.value.LatLng(35.69, 139.71),
      ],
      strokeColor: GIA.value.Color.fromColorCodeSixHex('#3388FF') ?? GIA.value.Color.black(),
      strokeWeight: 4,
      strokeDashArray: [2, 1],
      overlay: false,
    });
    map.addPolyline(polyline);

    // 円
    const circle = new GIA.object.Circle({
      center: new GIA.value.LatLng(35.69, 139.70),
      radius: 500, // メートル
      fillColor: GIA.value.Color.fromColorCodeSixHex('#44FF44') ?? GIA.value.Color.black(),
      strokeColor: GIA.value.Color.fromColorCodeSixHex('#1B5E20') ?? GIA.value.Color.black(),
      strokeWeight: 2,
      overlay: false,
    });
    map.addCircle(circle);

    // 削除
    map.removePolygon(polygon);
    map.removePolyline(polyline);
    map.removeCircle(circle);

    Example: 複数の円を地図中心の周辺に追加する

    import * as GIA from '@ntj/gaia';

    const circles: GIA.object.Circle[] = [];
    const center = map.getCenter();

    for (let index = 0; index < 10; index++) {
      const noiseLat = (Math.random() - 0.5) * 0.1;
      const noiseLng = (Math.random() - 0.5) * 0.1;
      const circle = new GIA.object.Circle({
        center: new GIA.value.LatLng(center.lat + noiseLat, center.lng + noiseLng),
        radius: 200,
        fillColor: new GIA.value.Color(0.9, 0.45, 0.45, 0.4),
      });
      circles.push(circle);
      map.addCircle(circle);
    }

    // 一括削除
    circles.forEach((circle) => map.removeCircle(circle));

    See

Settings

Member Visibility

Theme