WaterLayer

Example

Example Source Code

<template>
  <div class="map-container">
    <mb-map :center="[120.12629, 31.20913]" :zoom="9" :pitch="45">
      <mb-tianditu-layer :types="['img']" />
      <mb-water-layer
        :data="__RESOURCE_URL__ + 'json/taihu.geojson'"
        :data-transform="(d) => d.features"
        :get-polygon="(data) => data.geometry.coordinates[0]"
        :opacity="0.5"
      />
    </mb-map>
  </div>
</template>
<script setup lang="ts"></script>

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
water-color	The color of the water surface.	number[]	[0, 89, 128]
get-polygon	Function to retrieve polygon outline information.	AnyFunc	-
data	Source data for the layer.	string / IndexAny / AnyArr / Promise<any>	''
show	Whether the layer is visible.	boolean	true
opacity	The opacity of the layer (0-1).	number	1
pickable	Whether the layer responds to mouse events. If false, the component will not emit mouse-related events.	boolean	false
auto-highlight	When true and pickable is also true, the hovered object will be highlighted.	boolean	false
highlight-color	The color to blend with the original color of the highlighted object.	string / number[]	[255, 255, 128, 1]
highlighted-object-index	The index of the highlighted element.	number	-1
on-data-load	Callback function invoked after data loading is complete.	AnyFunc	-
data-transform	Function to transform the data before rendering.	AnyFunc	-
transitions	Transition settings for the layer.	IndexAny	{}

EVENTS

Name	Description	Parameters

SLOTS

Name	Description

METHODS

Name	Description	Definition