uni-leaflet 官方文档

<template>
  <view class="map-container">
    <UniLeafletMap
      v-model:center="center"
      v-model:zoom="zoom"
      :tile-url="tileUrl"
      :subdomains="subdomains"
      height="600rpx"
      @click="onMapClick"
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { UniLeafletMap } from 'uni-leaflet';
import type { LatLngTuple } from 'uni-leaflet';

const center = ref<LatLngTuple>([39.9042, 116.4074]); // 北京
const zoom = ref(13);

// 高德地图道路矢量切片（免 Token，极速加载）
const tileUrl = ref('https://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7');
const subdomains = ref(['1', '2', '3', '4']);

function onMapClick(e: any) {
  console.log('点击坐标:', e.latLng);
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 600rpx;
}
</style>

<template>
  <UniLeafletMap
    :center="[39.9163, 116.3972]"
    :zoom="13"
    :layers="layers"
    height="100vh"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { UniLeafletMap } from 'uni-leaflet';
import type { TileLayerConfig } from 'uni-leaflet';

const myTiandituToken = 'YOUR_TIANDITU_TOKEN';

const layers = ref<TileLayerConfig[]>([
  // 1. 底层：天地图卫星影像底图 (img_w)
  {
    id: 'img',
    url: `https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${myTiandituToken}`,
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
  },
  // 2. 顶层：天地图文字地名注记 (cia_w - 透明 PNG)
  {
    id: 'cia',
    url: `https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${myTiandituToken}`,
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    zIndex: 10,
  },
]);
</script>

<template>
  <UniLeafletMap
    ref="mapRef"
    :center="[39.9163, 116.3972]"
    :zoom="14"
    :markers="markers"
    :polylines="polylines"
    :polygons="polygons"
    :circles="circles"
    @overlay-click="onOverlayClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { UniLeafletMap } from 'uni-leaflet';
import type {
  MarkerOptions,
  PolylineOptions,
  PolygonOptions,
  CircleOptions,
  OverlayClickEvent,
} from 'uni-leaflet';

// 1. 点标注 (支持 Emoji / PNG 图片 / SVG 矢量文件 / SVG 内联代码)
const markers = ref<MarkerOptions[]>([
  // A. Emoji 字符图标
  {
    id: 'm1',
    latLng: [39.9163, 116.3972],
    title: '故宫博物院',
    icon: { text: '🏛️', size: [34, 34] },
    label: { text: '故宫博物院 (Emoji)', offset: [0, -28] },
  },

  // B. PNG 图片图标 (支持 static 相对路径、网络 URL 或 Base64)
  {
    id: 'm2',
    latLng: [39.9242, 116.3995],
    title: '景山公园万春亭',
    icon: {
      url: '/static/icons/pin-purple.png',
      size: [32, 40],
      anchor: [16, 40], // 底部尖端对齐
    },
    label: { text: '景山公园万春亭 (PNG)', offset: [0, -32] },
  },

  // C. SVG 矢量文件图标 (无损缩放，高分屏超清晰)
  {
    id: 'm3',
    latLng: [39.9100, 116.3910],
    title: '中山公园摄影打卡点',
    icon: {
      url: '/static/icons/camera.svg',
      size: [36, 36],
      anchor: [18, 36],
    },
    label: { text: '摄影打卡点 (SVG)', offset: [0, -30] },
  },

  // D. SVG 内联代码 (直接传入 SVG 标签字符串，支持动态渐变与任意矢量图形)
  {
    id: 'm4',
    latLng: [39.9045, 116.3895],
    title: '国家大剧院',
    icon: {
      svg: `<svg viewBox="0 0 36 36" width="36" height="36">
        <defs>
          <linearGradient id="gTheater" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#ec4899"/>
            <stop offset="100%" stop-color="#8b5cf6"/>
          </linearGradient>
        </defs>
        <circle cx="18" cy="18" r="16" fill="url(#gTheater)" stroke="#ffffff" stroke-width="2"/>
        <text x="18" y="24" font-size="16" text-anchor="middle" fill="#ffffff">🎭</text>
      </svg>`,
      size: [36, 36],
      anchor: [18, 18], // 中心对齐
    },
    label: { text: '国家大剧院 (内联SVG)', offset: [0, -26] },
  },
]);

// 2. 路线折线 (带虚线与中点 Label)
const polylines = ref<PolylineOptions[]>([
  {
    id: 'l1',
    latLngs: [
      [39.9295, 116.3972],
      [39.9163, 116.3972],
      [39.8985, 116.3972],
    ],
    color: '#3b82f6',
    width: 5,
    label: '中轴线景观路线',
  },
]);

// 3. 多边形区域 (带质心 Label)
const polygons = ref<PolygonOptions[]>([
  {
    id: 'p1',
    latLngs: [
      [39.9240, 116.3915],
      [39.9240, 116.4025],
      [39.9115, 116.4025],
      [39.9115, 116.3915],
    ],
    color: '#ef4444',
    fillColor: 'rgba(239, 68, 68, 0.22)',
    label: '故宫紫禁城核心区',
  },
]);

// 4. 圆形辐射范围 (米制半径)
const circles = ref<CircleOptions[]>([
  {
    id: 'c1',
    latLng: [39.9055, 116.3976],
    radius: 1000, // 1000 米
    color: '#10b981',
    fillColor: 'rgba(16, 185, 129, 0.18)',
    label: '1km 核心辐射圈',
  },
]);

function onOverlayClick(e: OverlayClickEvent) {
  console.log('点击了要素:', e.type, e.data);
}
</script>