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] },
  },
  // E. 头像/照片气泡 (开箱即用头像气泡模板，带角标与心跳光晕动效)
  {
    id: 'm5_avatar',
    latLng: [39.9195, 116.3972],
    title: '旅行博主 小羽',
    icon: {
      type: 'avatar',
      url: '/static/icons/pin-purple.png',
      size: [32, 32],         // 默认与其它点状要素一致 [32, 32]，亦可自定义如 [48, 48]
      badgeText: '❤️',        // 角标 Emoji 或文字
      pulse: true,            // 呼吸脉冲光晕微动效
      borderColor: '#f43f5e', // 外边框颜色
    },
    label: { text: '小羽 (❤️ 实时足迹)' },
  },
]);

// 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: '中轴线景观路线',
  },
  {
    id: 'l2',
    latLngs: [
      [39.9042, 116.4074], // 北京
      [31.2304, 121.4737], // 上海
    ],
    color: '#06b6d4',
    width: 4,
    curved: true,        // 开启二次贝塞尔弧线
    curvature: 0.25,     // 弧线曲率 (正数上弧，负数下弧)
    flowing: true,       // 开启粒子流光/流动蚂蚁线
    flowSpeed: 1.5,      // 流动速度
    dashArray: [10, 8],  // 虚线分段
    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>

<template>
  <UniLeafletMap
    :center="[39.9042, 116.4074]"
    :zoom="12"
    :markers="markers"
    :enable-cluster="true"
    :cluster-radius="60"
    :cluster-max-zoom="17"
    @cluster-click="onClusterClick"
    @marker-click="onMarkerClick"
  />
</template>

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

const markers = ref<MarkerOptions[]>([
  // 传入数十至成千上万个 Marker 均可流畅运行
  { id: 'p1', latLng: [39.9042, 116.4074], title: '站点 1' },
  { id: 'p2', latLng: [39.9055, 116.4085], title: '站点 2' },
  { id: 'p3', latLng: [39.9080, 116.4110], title: '站点 3' },
]);

function onClusterClick(cluster: ClusterGroup) {
  console.log('点击了聚合气泡，包含点数:', cluster.count, '范围:', cluster.bounds);
}

function onMarkerClick(marker: MarkerOptions) {
  console.log('点击了独立点:', marker.title);
}
</script>

<template>
  <UniLeafletMap
    ref="mapRef"
    :geojson="districtGeoJson"
    :geojson-style="getDistrictStyle"
    @geojson-click="onGeoJsonClick"
  />
</template>

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

const mapRef = ref<InstanceType<typeof UniLeafletMap> | null>(null);
const districtGeoJson = ref<any>(null);

// 动态自定义样式配置或样式函数
function getDistrictStyle(feature: any): GeoJsonStyleOptions {
  const isSelected = feature.properties?.name === '朝阳区';
  return {
    color: isSelected ? '#ef4444' : '#3b82f6',
    weight: isSelected ? 3 : 1.5,
    fillColor: isSelected ? '#ef4444' : '#60a5fa',
    fillOpacity: isSelected ? 0.35 : 0.12,
  };
}

function onGeoJsonClick(feature: any) {
  uni.showToast({
    title: `选中区域: ${feature.properties?.name || '未知区域'}`,
    icon: 'none',
  });
}

onMounted(async () => {
  // 模拟异步拉取行政区划 GeoJSON 数据
  // const res = await uni.request({ url: 'https://geo.datav.aliyun.com/areas_v3/bound/110000_full.json' });
  // districtGeoJson.value = res.data;
  // 载入完成后一键自适应缩放以包裹整个行政边界：
  // mapRef.value?.fitBounds('geojson', { padding: [40, 40] });
});
</script>

<template>
  <UniLeafletMap
    ref="mapRef"
    :markers="markers"
    :polylines="polylines"
    :polygons="polygons"
    :geojson="cityGeoJson"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import UniLeafletMap from '@/components/uni-leaflet/UniLeafletMap.vue';

const mapRef = ref<InstanceType<typeof UniLeafletMap> | null>(null);

// 1. 快捷包裹【城市行政区划 GeoJSON 边界】(传入 'geojson' 或直接传入 GeoJSON 数据)
mapRef.value?.fitBounds('geojson', { padding: [50, 50] });

// 2. 快捷包裹【点】(传入 'markers' / 'points'，或传入点标记数组/经纬度数组)
mapRef.value?.fitBounds('markers', { padding: [40, 40] });

// 3. 快捷包裹【线】(传入 'polylines' / 'lines'，或传入折线对象列表)
mapRef.value?.fitBounds('polylines', { padding: [40, 40] });

// 4. 快捷包裹【面】(传入 'polygons'，或传入多边形对象列表)
mapRef.value?.fitBounds('polygons', { padding: [40, 40] });

// 5. 包裹【全部当前显示要素】(传入 'all' 或直接不传参)
mapRef.value?.fitBounds('all', { padding: [50, 50] });

// 5. 传入自定义足迹点经纬度数组
const trackPoints = [
  [39.9042, 116.4074],
  [39.9163, 116.3972],
  [39.9289, 116.3883],
];
mapRef.value?.fitBounds(trackPoints, {
  padding: [40, 40],
  maxZoom: 16,
  animate: true,
});
</script>