@tuoyuan/img-map

地图展示组件 - MapDisplay

安装

npm install @tuoyuan/img-map

使用

基础用法

<template>
  <MapDisplay
    :map-id="mapId"
    :show-labels="true"
    @resource-click="handleResourceClick"
  />
</template>

<script setup>
import MapDisplay from '@tuoyuan/img-map'

const mapId = 'your-map-id'

const handleResourceClick = (resource) => {
  console.log('点击了资源:', resource)
}
</script>

自定义 API（可选）

如果需要使用自定义的 API 配置：

<template>
  <MapDisplay
    :map-id="mapId"
    :apis="customApis"
    @resource-click="handleResourceClick"
  />
</template>

<script setup>
import { apis as customApis } from '@/your-api-config'
import MapDisplay from '@tuoyuan/img-map'

const mapId = 'your-map-id'
</script>

API

Props

• mapId (string, 必填): 地图ID
• apis (object, 可选): 自定义 API 实例，如果不传则使用默认的 @tuoyuan/gateway-request-lib
• showLabels (boolean, 可选): 是否显示标签，默认 true

Events

• @resource-click: 点击资源时触发，参数为资源对象
• @zoom-change: 缩放变化时触发，参数为缩放级别

Methods

通过 ref 调用：

• loadResources(typeKey?): 加载资源，可选传入资源类型 Key
• zoomIn(): 放大
• zoomOut(): 缩小
• resetView(): 重置视图
• fitView(): 适应画布

版本

v1.0.1

License

MIT