ImageLayer

Image layer: This layer allows you to overlay an image (e.g., PNG, GIF) onto the map based on a target latitude/longitude range.

Example

Example Source Code

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map :zoom="12" :pitch="40">
      <mb-tianditu-layer />
      <mb-image-layer :url="url" :coordinates="coordinates" />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
const url = `${__RESOURCE_URL__}images/haizi.jpg`
const coordinates = [
  [116.3594627380371, 39.93632920085673],
  [116.4228057861328, 39.93632920085673],
  [116.4228057861328, 39.89735776851477],
  [116.3594627380371, 39.89735776851477],
]
</script>

API

PROPS

Name	Description	Type	Default
id	The ID of the layer	string	-
coordinates	An array of latitude/longitude coordinates representing the four corners of the image. The order is: top-left, top-right, bottom-right, bottom-left. Example: [[-80.425, 46.437], [-71.516, 46.437], [-71.516, 37.936], [-80.425, 37.936]]	Array<number[]>	-
url	The path to the image resource	string	-
show	Indicates whether the layer is visible	boolean	true

EVENTS

Name	Description	Parameters
created	Map initialization completed event	-

SLOTS

Name	Description

METHODS

Name	Description	Definition