注記なし

最適化ベクトルタイルのプリセットから、注記ソースレイヤー(Anno)のみを非表示にする例です。

Example code

import { gsiOptVtLayer, gsiOptVtLayerExclude } from '@cieloazul310/ol-gsi-vt';

const layer = gsiOptVtLayer({
  layers: gsiOptVtLayerExclude(['Anno']),
});

export default layer;

解説

1. ソースレイヤーとは

一般的にベクトルタイルにはソースレイヤーという概念があります。ソースレイヤーとは一つのタイルの中に格納されている同じ性質の地物の集合のことで、最適化ベクトルタイルであれば RdCL (道路中心線) 、RailCL (軌道の中心線)、WA (水域)といったソースレイヤーが格納されています。

最適化ベクトルタイル、ベクトルタイルに格納されている各ソースレイヤー名は下記リンクで確認できます。

最適化ベクトルタイル データ項目一覧
https://maps.gsi.go.jp/help/pdf/vector/optbv_dataspec.pdf

ベクトルタイル 地物コード及び表示ズームレベル一覧
https://maps.gsi.go.jp/help/pdf/vector/dataspec.pdf

2. 描写するソースレイヤーの選択

@cieloazul310/ol-gsi-vt が用意しているレイヤでは、layers オプションで描写するソースレイヤーを選択することができます。ここで指定された値は VectorTileSource 内 MVTFormat の layers オプションに渡されます。

import { gsiOptVtLayer } from '@cieloazul310/ol-gsi-vt';

const layer = gsiOptVtLayer({
  layers: ['RdCL'],
});

以上のコードは以下のコードと同義になります。

import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import MVTFormat from 'ol/format/MVT';

const layer = new VectorTileLayer({
  source: new VectorTileSource({
    format: new MVTFormat({
      layers: ['RdCL'],
    }),
  }),
});

3. 描写しないソースレイヤーを指定するための gsiOptVtLayerExclude 関数

MVTFormat の layers オプションには描写するソースレイヤーを指定します。ということは、描写しないソースレイヤーを指定したいときは、それ以外の全てのレイヤーを入力しなければなりません。これは面倒なので、@cieloazul310/ol-gsi-vt では描写しないソースレイヤーを指定するための gsiOptVtLayerExclude というヘルパー関数を用意しています。

最適化ベクトルタイルとベクトルタイルではソースレイヤー名が異なります。最適化ベクトルタイルでは gsiOptVtLayerExclude 関数を、ベクトルタイルでは gsiVtLayerExclude 関数を使用してください。

import { gsiOptVtLayerExclude } from '@cieloazul310/ol-gsi-vt';

console.log(gsiOptVtLayerExclude(['Anno']));
// => ['AdmArea', 'AdmBdry', 'BldA', 'Cntr', 'Cstline', 'Isbt', 'PwrTrnsmL', 'RailCL', 'RailTrCL', 'RdEdg', 'RdCompt', 'RdCL', 'RvrCL', 'SpcfArea', 'StrctLine', 'StrctArea', 'TpgphArea', 'TpgphLine', 'WA', 'WL', 'WStrA', 'WStrL', 'WRltLine']

import { gsiOptVtLayerNameCollection } from '@cieloazul310/ol-gsi-vt';

console.log(gsiOptVtLayerCollection);
// => ['AdmArea', 'AdmBdry', 'Anno', 'BldA', 'Cntr', 'Cstline', 'Isbt', 'PwrTrnsmL', 'RailCL', 'RailTrCL', 'RdEdg', 'RdCompt', 'RdCL', 'RvrCL', 'SpcfArea', 'StrctLine', 'StrctArea', 'TpgphArea', 'TpgphLine', 'WA', 'WL', 'WStrA', 'WStrL', 'WRltLine']

console.log(gsiOptVtLayerCollection.filter((layerName) => !['Anno'].includes(layerName)));
// => ['AdmArea', 'AdmBdry', 'BldA', 'Cntr', 'Cstline', 'Isbt', 'PwrTrnsmL', 'RailCL', 'RailTrCL', 'RdEdg', 'RdCompt', 'RdCL', 'RvrCL', 'SpcfArea', 'StrctLine', 'StrctArea', 'TpgphArea', 'TpgphLine', 'WA', 'WL', 'WStrA', 'WStrL', 'WRltLine']

ol-gsi-vt