دادهٔ GeoJSON

نقطه، خط و چندضلعی را با تنظیمات منبع بومی نمایش دهید.

۱ دقیقه مطالعهVue 3 / Nuxt 4همراه مثال زنده

مطالب این صفحه

مثال تعاملیMapLibre

Vue 3 · TypeScript

<script setup lang="ts">
import { ref } from 'vue'
import { NeshanMapLibre, MAPLIBRE_STYLES, type Coordinates } from 'vue-neshan-maps'
import 'vue-neshan-maps/style.css'

const webKey = import.meta.env.VITE_NESHAN_WEB_KEY
const center = ref<Coordinates>([35.72, 51.36])
const zoom = ref(12.2)
const geojson: GeoJSON.FeatureCollection = {
  type: 'FeatureCollection',
  features: Array.from({ length: 120 }, (_, i) => ({
    type: 'Feature',
    properties: { weight: 1 + i % 7 },
    geometry: { type: 'Point', coordinates: [
      51.36 + Math.sin(i * 2.4) * (.008 + (i % 12) * .002),
      35.72 + Math.cos(i * 1.7) * (.006 + (i % 9) * .002),
    ] },
  })),
}
</script>

<template>
  <NeshanMapLibre
    v-model="center" v-model:zoom="zoom"
    :api-key="webKey"
    :styles="{ height: '420px' }"
    :center-marker="false"
    :map-style="MAPLIBRE_STYLES.light"
    :traffic="false" :poi="false"
    :geojson="geojson"
    :cluster='false'
    :heatmap='false'
  />
</template>

متغیر VITE_NESHAN_WEB_KEY را در .env.local خارج از Git تنظیم کنید. کد مطابق کنترل‌های همین مثال است و کلید واقعی در آن نیست.

‏دادهٔ GeoJSON#

‏ترتیب GeoJSON همیشه طول و سپس عرض جغرافیایی است؛ حتی در کامپوننت Leaflet. آرایهٔ اختیاری geojsonLayers سبک بومی MapLibre را کنترل می‌کند. ویژگی source را ندهید؛ کامپوننت آن را مدیریت می‌کند. بدون لایهٔ سفارشی، سبک پیش‌فرض نقطه، خط و چندضلعی استفاده می‌شود.

import type { MapLibreOverlayLayer } from 'vue-neshan-maps'

const geojson = {
  type: 'FeatureCollection' as const,
  features: [{
    type: 'Feature' as const,
    properties: { name: 'Azadi Square' },
    geometry: { type: 'Point' as const, coordinates: [51.338, 35.6997] },
  }],
}
const geojsonLayers: MapLibreOverlayLayer[] = [{
  id: 'places', type: 'circle',
  paint: { 'circle-radius': 8, 'circle-color': '#087f8c',
    'circle-stroke-color': '#ffffff', 'circle-stroke-width': 2 },
}]

vue

<NeshanMapLibre :api-key="webKey" :geojson="geojson" :geojson-layers="geojsonLayers" />

‏مقدار geojsonOptions در MapLibre تنظیمات منبع بومی GeoJSON و در Leaflet تنظیمات L.GeoJSONOptions است. نمونهٔ کامل GeoJSON را برای شروع قابل اجرا ببینید.

بخشی نیاز به توضیح بیشتر دارد؟مشاهدهٔ متن راهنما گزارش ایراد

دادهٔ GeoJSON

اجرا روی نقشهٔ واقعی نشان

‏دادهٔ GeoJSON#