Source

Supports setting GeoJSON and TileJSON data

Example

Example Source Code

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map :zoom="mapZoom" :center="mapCenter">
      <mb-tianditu-layer />
      <mb-polygon-layer
        v-if="showLayer"
        source-id="sourceExample"
        :opacity="0.1"
        color="blue"
      />
      <mb-polyline-layer
        v-if="showLayer"
        source-id="sourceExample"
        color="blue"
      />
      <mb-source
        id="sourceExample"
        :geo-json-source="geoJsonSource"
        @source-added="showLayer = true"
      />
    </mb-map>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const mapCenter = [120.30782359643746, 31.49292271319491]
const mapZoom = 11
const showLayer = ref(false)
const geoJsonSource = {
  type: 'geojson',
  data: `${__RESOURCE_URL__}json/source-example.geojson`,
}
</script>

API

PROPS

Name	Description	Type	Default
id	Source Id	string	-
geo-json-source	See：GeoJson	IndexAny	-
tile-json-source	See：TileJson	IndexAny	-

EVENTS

Name	Description	Parameters
source-added	Data source added event	source

SLOTS

Name	Description

METHODS

Name	Description	Definition