منابع، لایه‌ها و سه‌بعدی

لایه‌های بومی، عبارت‌ها و ارتفاع سه‌بعدی را با شناسهٔ مستقل ترکیب کنید.

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

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

مثال تعاملیMapLibre

Vue 3 · TypeScript

<script setup lang="ts">
import { ref } from 'vue'
import { NeshanMapLibre, MAPLIBRE_STYLES, type Coordinates, type MapLibreAdvancedLayer } 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 district: GeoJSON.FeatureCollection = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"height":500},"geometry":{"type":"Polygon","coordinates":[[[51.35,35.71],[51.37,35.71],[51.37,35.73],[51.35,35.73],[51.35,35.71]]]}}]}
const sources = { district: { type: 'geojson' as const, data: district } }
const layers: MapLibreAdvancedLayer[] = [
  {
    "id": "district-3d",
    "type": "fill-extrusion",
    "source": "district",
    "paint": {
      "fill-extrusion-color": "#7860d4",
      "fill-extrusion-height": [
        "get",
        "height"
      ],
      "fill-extrusion-opacity": 0.72
    }
  }
]
function ready({ map }: import('vue-neshan-maps').MapLibreReady) { map.setPitch(48) }
</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"
    :sources="sources" :layers="layers" @ready="ready"
  />
</template>

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

‏منابع و لایه‌های پیشرفته#

‏پراپ sources از نوع بومی SourceSpecification استفاده می‌کند: GeoJSON، برداری، رستر، ارتفاع، تصویر، ویدئو و Canvas. پراپ layers تعریف سریال‌شدنی لایه‌های MapLibre را همراه beforeId می‌پذیرد. داده، دامنه، مجوز CORS، زوم، قلم نقشه و Sprite باید با نوع لایه سازگار باشند. اضافه‌کردن منبع ارتفاع به‌تنهایی Terrain را فعال نمی‌کند؛ از map.setTerrain() بعد از آماده‌شدن نقشه استفاده کنید. لایهٔ WebGL سفارشی با تابع رندر از API بومی اضافه می‌شود.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { NeshanMapLibre, type MapLibreAdvancedLayer } from 'vue-neshan-maps'
import 'vue-neshan-maps/style.css'
const webKey = import.meta.env.VITE_NESHAN_WEB_KEY
const districts = ref<GeoJSON.FeatureCollection>({
  type: 'FeatureCollection', features: [{ type: 'Feature', properties: { height: 450 },
    geometry: { type: 'Polygon', coordinates: [[[51.365,35.735],[51.38,35.735],[51.38,35.745],[51.365,35.745],[51.365,35.735]]] } }],
})
const layers: MapLibreAdvancedLayer[] = [
  { id: 'district-volume', type: 'fill-extrusion', source: 'districts',
    paint: { 'fill-extrusion-color': '#7c3aed', 'fill-extrusion-height': ['get', 'height'], 'fill-extrusion-opacity': 0.65 } },
  { id: 'district-outline', type: 'line', source: 'districts', beforeId: 'district-volume',
    paint: { 'line-color': '#4c1d95', 'line-width': 2 } },
]
const selected = ref('')
</script>
<template>
  <NeshanMapLibre :api-key="webKey" :model-value="[35.74,51.37]" :zoom="14"
    :options="{ pitch: 45 }" :sources="{ districts: { type: 'geojson', data: districts } }"
    :layers="layers" :styles="{ height: '550px' }" :center-marker="false"
    @layer-click="selected = $event.layerId" />
  <p>لایهٔ انتخاب‌شده: {{ selected }}</p>
</template>

‏شناسه‌های منبع و لایه برای هر کامپوننت پیشوند جدا می‌گیرند تا تداخل نکنند. source ابتدا با کلیدهای sources تطبیق داده می‌شود؛ نام‌های دیگر به منابع بومی استایل پایه اشاره دارند. beforeId ابتدا شناسهٔ لایهٔ خودتان و سپس شناسهٔ بومی استایل را پیدا می‌کند؛ ارجاع به لایهٔ بعدی آرایه هم پشتیبانی می‌شود. بدون آن، ترتیب آرایه از پایین به بالاست. هدف ناموجود، درج معمولی را اعمال می‌کند. شناسهٔ خالی یا تکراری مجاز نیست.

‏هنگام حذف منبع، لایه‌های وابسته را هم حذف یا اصلاح کنید؛ نگه‌داشتن ارجاع به منبع حذف‌شده تعریف نامعتبر MapLibre است. رویداد layer-click برای هر لایهٔ مدیریت‌شدهٔ انتخاب‌شده، { layerId, features, coordinates } می‌دهد. شناسهٔ اصلی شما برگردانده می‌شود؛ مختصات عرض‌اول و دادهٔ عارضه بومی است. شناسهٔ داخل شیء بومی عارضه پیشوند دارد. لایه‌هایی که مستقیم با API بومی اضافه کنید مسئولیت برنامه‌اند و باید بعد از style.load خودتان بازگردانید.

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

منابع، لایه‌ها و سه‌بعدی

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

‏منابع و لایه‌های پیشرفته#