PathLayer

Example

Bus route visualization demo (Baidu data, biased)

Example Source Code

<template>
  <div style="height: 400px">
    <mb-map :zoom="8" :pitch="40">
      <mb-path-layer
        :data="__RESOURCE_URL__ + 'json/beijing-bus-lines.json'"
        :get-path="getPath"
        :get-width="100"
      />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
const getPath = (data) => {
  let prevPt
  const points: number[][] = []
  for (let i = 0; i < data.length; i += 2) {
    let pt = [data[i], data[i + 1]]
    if (i > 0) {
      pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]]
    }
    prevPt = pt

    points.push([pt[0] / 1e4, pt[1] / 1e4])
  }
  return points
}
</script>

API

PROPS

Name	Description	Type	Default
id	Layer ID. A unique identifier for the layer.	string	-
auto-highlight	When this property is true and pickable is also true, the object under the mouse cursor will be highlighted. This provides visual feedback when hovering over interactive elements.	boolean	false
data	Source data for the layer. This can be a string representing a URL, an object, an array, or a Promise that resolves to data.	string / IndexAny / AnyArr / Promise<any>	''
get-color	Color information. This can be a string representing a color name (e.g., 'red', 'blue'), a function that returns a color based on the data, or an array of RGBA values (e.g., [255, 0, 0, 255] for red).	string / AnyFunc / number[]	'black'
get-path	Function to retrieve path information from the data. The function should accept a data item as an argument and return an array of coordinates representing the path. The default implementation assumes the data item has a 'path' property containing the coordinates.	AnyFunc	object => object.path
get-width	Width information. This can be a fixed number or a function that returns a width based on the data.	number / AnyNumberFunc	100
highlight-color	The color to blend with the original color of the highlighted object. This is used to create the highlight effect. The value can be a string or an RGBA array.	string / number[]	[255, 255, 128, 1]
highlighted-object-index	The index of the currently highlighted element within the data. A value of -1 indicates that no object is highlighted.	number	-1
miter-limit	The miter limit. This property applies only when joint-rounded is false. It controls the maximum length of the miter (the extension of the outer corners of a join).	number	4
cap-rounded	Whether the line caps are rounded. If true, the ends of the lines will be rounded; otherwise, they will be square.	boolean	false
joint-rounded	Whether the line joints are rounded. If true, the corners where lines meet will be rounded; otherwise, they will be sharp.	boolean	false
opacity	The opacity of the layer (0-1). 0 is fully transparent, and 1 is fully opaque.	number	1
pickable	Whether the layer responds to mouse events. If false, the component will not emit mouse-related events (e.g., click, hover).	boolean	false
show	Whether the layer is visible. If true, the layer will be rendered; otherwise, it will be hidden.	boolean	true
width-max-pixels	The maximum width in pixels. This limits the width of the rendered lines.	number	Number.MAX_SAFE_INTEGER
width-min-pixels	The minimum width in pixels. This ensures that lines are not rendered with a width smaller than this value.	number	0
width-scale	A scaling factor applied to the width. This allows you to easily adjust the width of all lines in the layer.	number	1
width-units	Units for the width: 'pixels' or 'meters'. Specifies whether the width values are interpreted as pixels or meters in world space.	string ('pixels', 'meters')	'meters'

EVENTS

Name	Description	Parameters
created	Initialization complete event	-
mousemove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
mouseleave	-	-
click	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

SLOTS

Name	Description

METHODS

Name	Description	Definition