Function setRoadWidthCondition

幅員情報を表示する — 詳細な使用例

幅員情報のある道路上に色分けされた線を描画し、各線の中心に GLMarker で幅員値を吹き出し表示できます。

事前準備

この機能の利用には口開け依頼が必要です。 header オプションに認証ヘッダーを設定してください。 詳細は地図PJ担当者にお問い合わせください。

Warning

• ズームレベルの最小値は 15 です。15 未満に設定しても描画されません（内部で 15 に丸められます）。
• widthLineStyles の threshold 配列は内部で降順ソートされるため、順序は問いません。
• markerOptions は任意です。省略した場合、幅員線のみ表示されます。
• clearRoadWidthCondition で非表示に戻せます。

Example: 幅員の幅（m）を GLMarker で表示し、クリック時にデータを確認する

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

// 吹き出しに使うアイコン画像
const iconInfo = new GIA.value.GLMarkerIconInfo({
  icon: 'path/to/marker.png',
  size: new GIA.value.Size(24, 45),
  gravity: 'bottom-left',
});

// 吹き出しのラベルスタイル (CSS)
const labelStyle: GIA.types.GLMarkerLabelStyle = {
  fontSize: '12px',
  color: '#000000',
  fontWeight: 'bold',
  align: 'center',
};

// マーカークリック時のコールバック
const clickListener: GIA.types.RoadWidthMarkerClickListener = (data) => {
  console.log('幅員データ:', JSON.stringify(data, null, 2));
};

// Condition を生成して地図に設定
map.setRoadWidthCondition(new GIA.value.RoadWidthCondition({
  header: { 'ntj-road-width-info': '86f9dc23-360f-4c90-89a3-002d10cef388' },
  zoomRange: new GIA.value.ZoomRange(15, 22),   // 表示ズームレベル範囲（最小 15）
  widthLineStyles: [
    {
      threshold: 0,
      style: {
        color: GIA.value.Color.fromColorCodeSixHex('0091EA') ?? GIA.value.Color.black(),
        weight: 3,
        dashArray: [],
        lineCap: 'butt',
      },
    },
    {
      threshold: 3.5,
      style: {
        color: GIA.value.Color.fromColorCodeSixHex('E64A19') ?? GIA.value.Color.black(),
        weight: 4,
        dashArray: [1, 1],
        lineCap: 'round',
      },
    },
  ],
  markerOptions: {
    iconInfo,
    labelStyle,
    labelOffset: new GIA.value.Point(0, 3),
    zoomRange: new GIA.value.ZoomRange(17, 22),
    clickListener,
  },
}));
Copy

Example: マーカーなしで線のみ表示する

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

map.setRoadWidthCondition(new GIA.value.RoadWidthCondition({
  header: { 'ntj-road-width-info': '86f9dc23-360f-4c90-89a3-002d10cef388' },
  zoomRange: new GIA.value.ZoomRange(15, 22),
  widthLineStyles: [
    {
      threshold: 0,
      style: {
        color: GIA.value.Color.fromColorCodeSixHex('00A0A0') ?? GIA.value.Color.black(),
        weight: 3,
      },
    },
  ],
}));
Copy

Example: フォーム入力から線スタイルを生成して表示する

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

const showMarker = true;
const threshold = 3.5;

const belowColor = '#0091EA';
const belowStroke = 3;
const belowDashed = false;
const belowRound = false;

const aboveColor = '#E64A19';
const aboveStroke = 4;
const aboveDashed = true;
const aboveRound = true;

const convertToDashArray = (isDashed: boolean): number[] | undefined => {
  return isDashed ? [1, 1] : [];
};

const markerOptions: GIA.types.RoadWidthMarkerOptions | undefined = showMarker
  ? {
      iconInfo: new GIA.value.GLMarkerIconInfo({
        icon: 'path/to/road-width-marker.png',
        size: new GIA.value.Size(24, 45),
        gravity: 'bottom-left',
      }),
      labelStyle: {
        fontSize: '12px',
        color: '#000000',
        fontWeight: 'bold',
        align: 'center',
      },
      labelOffset: new GIA.value.Point(0, 3),
      clickListener: (data) => alert(JSON.stringify(data, null, 2)),
    }
  : undefined;

map.setRoadWidthCondition(new GIA.value.RoadWidthCondition({
  header: {
    'ntj-road-width-info': '86f9dc23-360f-4c90-89a3-002d10cef388',
  },
  zoomRange: new GIA.value.ZoomRange(15, 22),
  widthLineStyles: [
    {
      threshold: 0,
      style: {
        color: GIA.value.Color.fromColorCodeSixHex(belowColor.slice(1)),
        weight: belowStroke,
        dashArray: convertToDashArray(belowDashed),
        lineCap: belowRound ? 'round' : 'butt',
      },
    },
    {
      threshold,
      style: {
        color: GIA.value.Color.fromColorCodeSixHex(aboveColor.slice(1)),
        weight: aboveStroke,
        dashArray: convertToDashArray(aboveDashed),
        lineCap: aboveRound ? 'round' : 'butt',
      },
    },
  ],
  markerOptions,
}));
Copy

See

• setRoadWidthCondition
• clearRoadWidthCondition