Vector Layer

A vector layer renders the features of a geojson or vector-tile source with per-geometry materials (points, lines, polygons, and so on).

Properties

Property	Type	Description
type	"vector"	Layer type (required).
source	Source | string	The geojson / vector-tile source to render (required).
sourceLayers	string[]	For vector-tile sources: which source layers within the tileset to render. Ignored for GeoJSON.

Render options (materials)

Specify one or more, depending on the geometry types present:

Material	Config key	Supported geometry
PointMaterial	point	Point, MultiPoint
BillboardMaterial	billboard	Point (icon display)
TextMaterial	text	Point (label display)
PolylineMaterial	polyline	LineString, MultiLineString
PolygonMaterial	polygon	Polygon, MultiPolygon

Examples

GeoJSON features

import ThreeView, { Color } from "@navaramap/three";

const view = new ThreeView(/* options */);
await view.init();

const points = view.addSource({
  type: "geojson",
  data: {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        properties: {},
        geometry: { type: "Point", coordinates: [139.7051, 35.6927] },
      },
    ],
  },
});

view.addLayer({
  type: "vector",
  source: points,
  point: {
    color: new Color().setHex(0xffffff),
    size: 0.1,
    sizeInMeters: true,
    clampToGround: true,
  },
});

Vector tiles with a sub-layer filter

Reference one vector-tile source from several layers and pick which source layers each one renders with sourceLayers. Because they share a source, the tiles are fetched only once.

const tiles = view.addSource({
  type: "vector-tile",
  url: "https://example.com/tiles/{z}/{x}/{y}.mvt",
  maxZoom: 16,
});

// Water areas
view.addLayer({
  type: "vector",
  source: tiles,
  sourceLayers: ["waterarea"],
  polygon: { color: new Color().setStyle("#00aaff"), clampToGround: true },
});

// Buildings
view.addLayer({
  type: "vector",
  source: tiles,
  sourceLayers: ["building"],
  polygon: { color: new Color().setStyle("#555555"), clampToGround: true },
});

Related Resources

• GeoJSON Source / Vector Tile Source
• PointMaterial / PolygonMaterial / PolylineMaterial — detailed material settings