折线图层（PolyineLayer）

示例

示例源码

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map>
      <div style="position: absolute; top: 5px; left: 5px">
        <button class="primary" @click="colorIndex++">Switch Color</button>
      </div>
      <mb-tianditu-layer />
      <mb-polyline-layer
        :data="polylineCoordinates"
        :width="3"
        :color="color"
        :dash-array="[2, 1]"
      />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const colors = ['rgba(255,125,0,0.5)', '#ec71a9', 'red']
const colorIndex = ref(0)
const polylineCoordinates = [
  {
    coordinates: [
      [137.4609375, 39.639537564366684],
      [136.7578125, 49.38237278700955],
      [126.5625, 54.77534585936447],
      [103.35937499999999, 53.9560855309879],
      [83.3203125, 47.040182144806664],
      [66.796875, 34.59704151614417],
      [73.47656249999999, 21.94304553343818],
      [87.5390625, 11.178401873711785],
      [105.1171875, 8.754794702435618],
      [115.6640625, 13.581920900545844],
      [114.9609375, 25.48295117535531],
      [93.8671875, 25.799891182088334],
      [85.4296875, 31.653381399664],
      [91.0546875, 39.095962936305476],
      [104.765625, 41.50857729743935],
      [114.9609375, 41.50857729743935],
      [121.28906250000001, 37.71859032558816],
      [127.265625, 32.84267363195431],
      [130.78125, 28.92163128242129],
    ],
  },
  {
    coordinates: [
      [47.8125, -24.846565348219734],
      [183.1640625, -19.642587534013032],
      [176.48437499999997, 70.02058730174062],
      [33.046875, 67.60922060496382],
      [33.046875, -22.91792293614603],
      [31.9921875, -26.11598592533351],
    ],
  },
]

const color = computed(() => colors[colorIndex.value % colors.length])
</script>

动画示例

示例源码

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map :center="[116.33, 39.91]" :zoom="12">
      <mb-tianditu-layer />
      <mb-polyline-layer :data="polylineCoordinates" :width="6" color="blue" />
      <mb-polyline-layer
        :data="polylineCoordinates"
        :width="6"
        color="yellow"
        :dash-array="dashArray"
      />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

let step = 0
const dashArray = ref([0, 4, 3])
const polylineCoordinates = [
  {
    coordinates: [
      [116.28, 39.91],
      [116.29, 39.91],
      [116.32, 39.92],
      [116.33, 39.91],
      [116.32, 39.9],
      [116.32, 39.89],
      [116.3, 39.89],
      [116.29, 39.89],
      [116.27, 39.9],
    ],
  },
]
const dashArraySequence = [
  [0, 4, 3],
  [0.5, 4, 2.5],
  [1, 4, 2],
  [1.5, 4, 1.5],
  [2, 4, 1],
  [2.5, 4, 0.5],
  [3, 4, 0],
  [0, 0.5, 3, 3.5],
  [0, 1, 3, 3],
  [0, 1.5, 3, 2.5],
  [0, 2, 3, 2],
  [0, 2.5, 3, 1.5],
  [0, 3, 3, 1],
  [0, 3.5, 3, 0.5],
]

const start = () => {
  animate(0)
}
const animate = (timestamp: number) => {
  const newStep = Number.parseInt(
    `${(timestamp / 50) % dashArraySequence.length}`
  )

  if (newStep !== step) {
    dashArray.value = dashArraySequence[step]
    step = newStep
  }
  requestAnimationFrame(animate)
}

onMounted(() => {
  start()
})
</script>

API

PROPS

名称	描述	类型	默认值
id	图层id	string	-
dash-array	形成虚线的 实线段与间隙的长度。以线宽为单位	number[]	-
color	颜色值 支持 "#000000" "rgb(0,0,0)" [255,0,0,1]等模式	string / number[]	#000000
data	矢量图层的数据 数组中每个对象需包含必需的coordinates属性以及可选的properties属性 每一个对象代表一个点/一条线/一个多边形	VectorLayerData	-
geo-json-data-source	geojson数据源，可设为geojson数据链接或geojson数据对象；规范链接， 若设置了本属性，则data属性失效	string / GeoJSONSource	-
opacity	透明度	number	1
line-cap	-	string("butt" "round" "square")	butt
line-join	-	string("bevel" "round" "miter")	miter
maxzoom	最大缩放级别	number	22
minzoom	最小缩放级别	number	0
pickable	图层是否响应拾取事件，若为false，则组件不会emit鼠标相关事件	boolean	true
show	是否显示	boolean	true
source-id	图层Source的id，若设置了本ID，则geoJsonDataSource与data属性都会失效	string	-
source-layer-name	源数据中图层名称 设置sourceId时，此属性生效	string	-
translate	偏移量，正数表示 右/下	number[]	[0,0]
offset	线偏移	number	0
width	宽度，以像素值为单位	number	1
offset	对应Mapbox line-offset属性	number	0
blur	对应Mapbox line-blur属性	number	0
auto-highlight	是否自动高亮	boolean	false
highlight-color	高亮颜色	string / number[]	[255, 255, 128, 1]
generate-id	是否自动生成GeoJSON Feature Id。如果数据没有Id，自动高亮时，需设置为true	boolean	false
useExpression	是否使用表达式，设置为true时，将不会解析颜色相关属性	boolean	false

EVENTS

名称	描述	参数
created	地图初始化完成事件	-
click	图层单击事件	object — 包含屏幕坐标pixel、经纬度coordinate与选中元素的属性properties、originalEvent
mousemove	鼠标移动事件	object — 包含屏幕坐标pixel、经纬度coordinate与选中元素的属性properties、originalEvent
mouseleave	鼠标移出元素事件	MapMouseEvent

SLOTS

名称	描述

METHODS

名称	描述	定义
exportToGeoJson	将本图层数据导出为geojson格式数据文本 若图层数据源来自source组件或为url，则输出null	（）=> object | null