Подменить визуальный слой с leaflet на yandex

использую @vue-leaflet/vue-leaflet для vue3 Нужно заменить визуальный слой на яндекс. Api ключ получил.

Код до:

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { LMap, LTileLayer, LPolyline, LPolygon, LFeatureGroup } from '@vue-leaflet/vue-leaflet';

const emit = defineEmits(['update:viewСoordinates'])
const props = defineProps({
   viewСoordinates: {
      type: Array,
      default() {
      return []
      }
   }
})

let zoom = ref(12)
let center = ref([55.343936, 86.093116])
let drawing = ref(true)

const handleMapClick = (event) => {
   if (drawing.value) {
      const { latlng } = event
      emit('update:viewСoordinates', [...props.viewСoordinates, [latlng.lat, latlng.lng]]);      
   }
}

onMounted(() => {
   window.addEventListener('contextmenu', resetMap);
})

onBeforeUnmount(() => {
   window.removeEventListener('contextmenu', resetMap);
});

const resetMap = () => {
   emit('update:viewСoordinates', []);      
}
</script>

<template>
   <div class="map__wrapper">
      <Button
         class="reset-map"
         @click="resetMap"
         >
         Сбросить зоны
      </Button>
      <l-map class="map__lmap"
         style="height: 300px"
         v-model:zoom="zoom"
         v-model:center="center"
         ref="map"
         @click="handleMapClick"
      >
      <l-tile-layer
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         layer-type="base"
         name="OpenStreetMap"
      />
         <l-feature-group>
            <l-polyline :lat-lngs="props.viewСoordinates" :color="'blue'"></l-polyline>
            <l-polygon v-if="drawing" :lat-lngs="props.viewСoordinates" :color="'blue'"></l-polygon>
         </l-feature-group>
      </l-map>
   </div>
</template>

Добавил:

const urlMapLayoutYandex = 'https://vec{s}.maps.yandex.net/tiles?l=map&x={x}&y={y}&z={z}&scale=1&lang=ru_RU&apikey=тут мой ключ'

      <l-tile-layer
         :url="urlMapLayoutYandex"
         layer-type="base"
         name="Yandex Map"
      />

Но, это не помогло. Что делаю не правильно и как получить желаемый результат. Спасибо!


Ответы (1 шт):

Автор решения: YaSupport

Для добавления в ПО тайлов Яндекс по прямой ссылке на них ключи JS API не подходят. Для добавления их в сторонние приложения без JS API должен использоваться API доступа к тайлам.

→ Ссылка