Scene Mapping GIS

外观

运行配置 ​

OpenStreetMap ​

无需 Key，适合开发和快速验证：

vue
<TMap provider="osm" />

天地图 ​

在业务环境变量中保存 Key：

dotenv
VITE_TDT_KEY=你的天地图Key
vue
<script setup lang="ts">
import { TMap } from "scene-mapping-gis/2d";
const tdtKey = import.meta.env.VITE_TDT_KEY;
</script>

<template>
  <TMap provider="tianditu" :api-key="tdtKey" />
</template>

天地图模式默认组合 img_w 影像底图和 cia_w 中文注记。发布包不保存任何默认密钥。

自定义 XYZ ​

vue
<TMap
  provider="custom"
  url="https://example.com/tiles/{z}/{x}/{y}.png"
/>

URL 应包含 {z}、{x}、{y} 占位符。鉴权、跨域和服务可用性由瓦片服务提供方配置。

初始化参数 ​

vue
<TMap
  provider="osm"
  :options="{
    center: { lng: 116.4074, lat: 39.9042 },
    zoom: 12,
    minZoom: 3,
    maxZoom: 18,
    zoomControl: true,
  }"
/>

除 center 和 zoom 外，其余字段会继续传给 Leaflet MapOptions。

常见问题 ​

地图空白 ​

首先检查父容器是否具有实际高度，然后检查瓦片请求、Key、域名白名单和网络代理。隐藏面板切换为可见后，可调用 invalidateSize() 重新计算地图尺寸。

SSR 报错 ​

Leaflet 依赖浏览器 DOM。在 Nuxt、VitePress 等 SSR 环境中，请使用客户端组件或 <ClientOnly> 包裹地图，并避免在服务端直接初始化 Leaflet。

坐标顺序 ​

组件数组格式统一为 [lng, lat]，与 Leaflet 常见的 [lat, lng] 顺序不同；对象格式建议写成 { lng, lat } 以减少歧义。