Function addGeoJsonFigure

GeoJSON 形状を地図上に追加する — 詳細な使用例

GeoJSON 形式のデータをもとにポリゴン・ポリライン・ポイントなどを一括で描画します。 サーバーから受け取った GeoJSON レスポンスをそのまま地図に表示する用途に最適です。 削除は removeGeoJsonFigure で条件オブジェクトを渡して行います。

Warning

• GeoJsonFigureCondition に GeoJSON データとスタイルを設定して渡します。
• 同一 GeoJsonFigureCondition インスタンスを removeGeoJsonFigure に渡すことで削除できます。
• 個別の形状（ポリゴン・ポリライン・円）を扱うには addPolygon / addPolyline / addCircle を使ってください。

Example: GeoJSON データを地図に描画する

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

const condition = new GIA.value.GeoJsonFigureCondition(myGeoJsonData, {
  polygon: {
    color: new GIA.value.Color(229 / 255, 115 / 255, 115 / 255, 0.8),
  },
  polyline: {
    inline: {
      color: new GIA.value.Color(229 / 255, 115 / 255, 115 / 255, 0.8),
    },
    outline: {
      color: new GIA.value.Color(229 / 255, 115 / 255, 115 / 255, 0.8),
      weight: 2,
    },
  },
});

map.addGeoJsonFigure(condition);

// 削除
map.removeGeoJsonFigure(condition);
Copy

Example: 矢尻付きのラインを表示する

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

const lineCondition = new GIA.value.GeoJsonFigureCondition(lineStringGeoJson, {
  polyline: {
    inline: {
      color: new GIA.value.Color(0.75, 0, 1, 0.5),
    },
    outline: {
      color: new GIA.value.Color(0.5, 0, 0.5, 1),
    },
    arrowHead: {
      type: 'arrow-head-opened',
      tipAngle: 90,
      width: 10,
      lineCap: 'round',
      lineJoin: 'round',
    },
  },
});

map.addGeoJsonFigure(lineCondition);
Copy

Example: 表示/非表示とオーバーレイ状態を切り替える

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

const condition = new GIA.value.GeoJsonFigureCondition(myGeoJsonData);
map.addGeoJsonFigure(condition);

condition.hide();
condition.show();
condition.setOverlay(!condition.isOverlay());
Copy

See

• addGeoJsonFigure
• removeGeoJsonFigure