خوشه‌بندی نقاط

<script setup lang="ts">
import { ref } from 'vue'
import { NeshanMapLibre, type Coordinates, type MapResourceFailure } from 'vue-neshan-maps'
import 'vue-neshan-maps/style.css'
import 'vue-neshan-maps/fonts/vazir.css'
const webKey = import.meta.env.VITE_NESHAN_WEB_KEY
const center = ref<Coordinates>([35.72, 51.36])
const zoom = ref(12)
const clustered = ref(true), heat = ref(false)
const map = ref<InstanceType<typeof NeshanMapLibre>>()
const failure = ref<MapResourceFailure>()
const data = ref<GeoJSON.FeatureCollection>({
  type: 'FeatureCollection',
  features: Array.from({ length: 1000 }, (_, id) => ({
    type: 'Feature', id, properties: { weight: 1 + id % 5 },
    geometry: { type: 'Point', coordinates: [51.36 + Math.sin(id * 2.4) * 0.05, 35.72 + Math.cos(id * 1.7) * 0.04] },
  })),
})
const clusterOptions = { radius: 55, maxZoom: 14, minPoints: 2, expandOnClick: true }
const heatOptions = { weightProperty: 'weight', radius: 30, intensity: 0.9, opacity: 0.65 }
function replaceData() {
  data.value = { ...data.value, features: data.value.features.slice(0, 500) }
}
</script>
<template>
  <section class="neshan-font-vazir" lang="fa" dir="rtl">
    <label><input v-model="clustered" type="checkbox">خوشه‌بندی</label>
    <label><input v-model="heat" type="checkbox">هیت‌مپ</label>
    <button @click="replaceData">نمایش ۵۰۰ نقطهٔ نمونه</button>
    <p v-if="failure" role="alert">{{ failure.kind }}: {{ failure.message }}</p>
    <NeshanMapLibre ref="map" v-model="center" v-model:zoom="zoom" :api-key="webKey"
      :geojson="data" :cluster="clustered ? clusterOptions : false"
      :heatmap="heat ? heatOptions : false" traffic poi :center-marker="false"
      :styles="{ height: '550px' }" @resource-error="failure = $event" />
  </section>
</template>

const leaves = await map.value!.getClusterLeaves(clusterId, 20, 0)
const expansionZoom = await map.value!.expandCluster(clusterId, [35.72, 51.36])