ベクタータイルレイヤー | MapLibre

コード例

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';


// (1) 地図の作成


const initialCamera = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 12,
});


const mapViewState = useMapLibreViewState({
  mapDesignType: MapLibreDesign.OsmBrightJa,
  cameraPosition: initialCamera,
});


// (2) データと操作用Stateの準備
const [palette, setPalette] = useState({
  water: '#3a7ca5',
  land: '#f2efe6',
  street: '#ffffff',
  building: '#d9d0c9',
});
// A rule reaches layers by role, so the same words work in someone
// else's style. mix blends each layer's own colour toward the picked
// one; visible: false leaves the layers out of the document, so they
// are not drawn at all.
const rules = buildStyleRules((r) => {
  r.role(LayerRole.water, { colorFilter: { mix: { color: palette.water, amount: strength } } });
  r.role(LayerRole.building, { visible: false });
});


// (3) 地図とオーバーレイの描画


<MapLibreMapView2D state={mapViewState}>
  <VectorTileLayer style={style} rules={rules} opacity={opacity} />
</MapLibreMapView2D>

コードの読み方

ブラウザ上でMapLibreのベクタースタイルをラスタライズし、通常のラスタータイルとして配信することで、どのバックエンドでもベクタースタイルを描画します。

バックエンドはベクタースタイルを一切見ません。だからこそ、それを読めないGoogle Maps・MapKit・Cesiumなどでも動作します。

色を変更するとスタイルを差し替え、すでにメモリ上にあるベクタータイルを再ラスタライズします。ジオメトリは変わらず塗りだけが変わるため、再取得は発生しません。ラベルの衝突判定には隣接タイルを見る必要があるため、シンボルレイヤーは描画されません。

MapConductor React SDK Samples

ベクタータイルレイヤー | MapLibre | MapConductor React SDK

コード例

コードの読み方