2D · TMap 地图容器

2D 文档 · Leaflet 组件

TMap 是所有 2D 子组件的容器，负责创建 Leaflet Map、加载底图、响应地图源变化并向子组件提供地图上下文。

基础用法

<TMap
  ref="mapRef"
  provider="osm"
  :options="{ center: { lng: 116.4, lat: 39.9 }, zoom: 11 }"
  @load="onLoad"
  @error="onError"
/>

Props

名称	类型	默认值	说明
provider	'tianditu' | 'osm' | 'custom'	tianditu	底图来源
url	string	—	自定义 XYZ 模板地址
apiKey	string	空字符串	天地图 Key
options	TMapOptions	{}	中心、缩放和 Leaflet 地图参数

事件

事件	参数	说明
load	Leaflet.Map	地图和底图初始化完成
error	Error	初始化或切换底图失败

暴露方法

方法	说明
getMap()	获取 Leaflet 原生实例，未加载时为 null
setView(position, zoom?, options?)	设置中心点和缩放
panTo(position, options?)	保持缩放并平移
fitBounds(bounds, options?)	显示完整范围
locate(options)	有 bounds 时适配范围，否则按点定位
getCenter()	返回 { lng, lat }
getZoom()	返回当前缩放级别
invalidateSize(options?)	容器尺寸变化后刷新地图

mapRef.value?.locate({
  bounds: [
    { lng: 115.42, lat: 39.44 },
    { lng: 117.5, lat: 41.06 },
  ],
});