VmLayerNative

The VmLayerNative component is used to load native layers onto the map. The supported layer types include 'fill', 'line', 'symbol', 'circle', 'heatmap', 'fill-extrusion', 'raster', 'hillshade', and 'background'. see. And a extension type 'raster-dem' for terrain.

Basic usage

Use VmLayerNative component to add a openstreetmap layer.

Draw vector datas

Use VmLayerNative component to draw points from a GeoJSON collection to a map; add a vector source to map.

vue

<!--
 * @Author: zouyaoji@https://github.com/zouyaoji
 * @Date: 2024-06-15 18:37:26
 * @Description: Do not edit
 * @LastEditors: zouyaoji 370681295@qq.com
 * @LastEditTime: 2024-06-18 16:18:53
 * @FilePath: \vue-maplibre\docs\examples\layer-native\vector.vue
-->
<script lang="ts" setup>
import type { VmReadyObject } from '@meteosci/vue-maplibre/es/utils'
import type {
  GeoJSONSourceSpecification,
  LineLayerSpecification,
  LngLatLike,
  StyleSpecification,
  SymbolLayerSpecification,
  VectorSourceSpecification
} from 'maplibre-gl'
// import {
//   SourceSpecification
// } from 'maplibre-gl'
import { ref } from 'vue'

const center = ref<LngLatLike>([11.39085, 47.27574])
const zoom = ref(1)
const isMapReady = ref(false)

const glyphsURL = `https://vue-maplibre.meteosci.com/font/glyphs`
const spriteURL = `https://vue-maplibre.meteosci.com/font/sprite/sprite`

const mapStyle = {
  version: 8,
  glyphs: `${glyphsURL}/{fontstack}/{range}.pbf`,
  sprite: spriteURL,
  sources: {},
  layers: []
} as StyleSpecification

const layout: SymbolLayerSpecification['layout'] = {
  'icon-image': 'custom-marker',
  // get the year from the source's "year" property
  'text-field': ['get', 'year'],
  'text-font': ['Noto Sans Regular'],
  'text-offset': [0, 1.25],
  'text-anchor': 'top'
}

const source: GeoJSONSourceSpecification = {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [100.4933, 13.7551]
        },
        properties: { year: '2004' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [6.6523, 46.5535]
        },
        properties: { year: '2006' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [-123.3596, 48.4268]
        },
        properties: { year: '2007' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [18.4264, -33.9224]
        },
        properties: { year: '2008' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [151.195, -33.8552]
        },
        properties: { year: '2009' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [2.1404, 41.3925]
        },
        properties: { year: '2010' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [-104.8548, 39.7644]
        },
        properties: { year: '2011' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [-1.1665, 52.9539]
        },
        properties: { year: '2013' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [-122.6544, 45.5428]
        },
        properties: { year: '2014' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [126.974, 37.5651]
        },
        properties: { year: '2015' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [7.1112, 50.7255]
        },
        properties: { year: '2016' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [-71.0314, 42.3539]
        },
        properties: { year: '2017' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [39.2794, -6.8173]
        },
        properties: { year: '2018' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [26.0961, 44.4379]
        },
        properties: { year: '2019' }
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [-114.0879, 51.0279]
        },
        properties: { year: '2020' }
      }
    ]
  }
}

const sourceVector: VectorSourceSpecification = {
  type: 'vector',
  tiles: ['https://vue-maplibre.meteosci.com/mvt/china/{z}/{x}/{y}.mvt'],
  minzoom: 0,
  maxzoom: 8
}

const paintVector: LineLayerSpecification['paint'] = {
  'line-color': 'rgba(219, 18, 18, 1)',
  'line-width': 3
}

function onMapReady(e: VmReadyObject) {
  const { map } = e

  map.on('load', async () => {
    map.resize()

    // Add an image to use as a custom marker
    const image = await map.loadImage('https://vue-maplibre.meteosci.com/images/osgeo-logo.png')
    map.addImage('custom-marker', image.data)

    isMapReady.value = true
  })
}
</script>

<template>
  <div class="map-demo-container">
    <VmMap :map-style="mapStyle" :center="center" :zoom="zoom" @ready="onMapReady">
      <VmLayerNative v-if="isMapReady" id="conferences" type="symbol" :source="source" :layout="layout" />
      <VmLayerNative
        v-if="isMapReady"
        id="vector-tiles"
        type="line"
        :source="sourceVector"
        :minzoom="0"
        :maxzoom="8"
        source-layer="border"
        :paint="paintVector"
      />
    </VmMap>
  </div>
</template>

3D Terrain

Use VmLayerNative component to go beyond hillshade and show elevation in actual 3D.

API

Props

Name	Description	Type	Default
id	Unique layer name.	`string`	-
beforeId	The ID of an existing layer to insert the new layer before, resulting in the new layer appearing visually beneath the existing layer. If this argument is not specified, the layer will be appended to the end of the layers array and appear visually above all other layers.	`string`	-
type	Rendering type of this layer.	`enum`	-
metadata	Arbitrary properties useful to track with the layer, but do not influence rendering. Properties should be prefixed to avoid collisions, like 'maplibre:'.	`object`	-
source	Name of a source description to be used for this layer. Required for all layer types except.	`string` / `object`	-
sourceLayer	Layer to use from a vector tile source. Required for vector tile sources; prohibited for all other source types, including GeoJSON sources.	`string`	-
minzoom	The minimum zoom level for the layer. At zoom levels less than the minzoom, the layer will be hidden. in range [0, 24].	`number`	-
maxzoom	The maximum zoom level for the layer. At zoom levels equal to or greater than the maxzoom, the layer will be hidden. in range [0, 24].	`number`	-
filter	A expression specifying conditions on source features. Only features that match the filter are displayed. Zoom expressions in filters are only evaluated at integer zoom levels. The feature-state expression is not supported in filter expressions.	`boolean` / `object`	-
layout	Layout properties for the layer.	`object`	-
paint	Default paint properties for this layer.	`object`	-

Events

Name	Description	Type
beforeLoad	Triggers before the maplibreObject is loaded.	`Function`
ready	Triggers when the maplibreObject is successfully loaded.	`Function`
unready	Triggers when the maplibreObject loading failed.	`Function`
destroyed	Triggers when the maplibreObject is destroyed.	`Function`

Exposes

Name	Description	Type
load	Load the component manually.	`Function`
unload	Destroy the loaded component manually.	`Function`
reload	Load the component manually.	`Function`
creatingPromise	Determine whether the component is created by this.	`object`
maplibreObject	The maplibreObject created by component.	`object`
getMaplibreObject	Get the maplibreObject created by component.	`Function`

Source

Docs

Terrain

GLTFLayer

VmLayerNative ​

Basic usage ​

Draw vector datas ​

3D Terrain ​

API ​

Props ​

Events ​

Exposes ​

Source ​