Относительный путь к плиткам в Vueleaflet

Question

Я хочу загрузить карту с моего компьютера, которая работала, когда я пробовал ее с помощью обычного решения JavaScript

Теперь я хочу использовать Vue Leaflet2, но путь:

url: '@/assets/map/{z}/{x}/{y}.png',

... не работает.

Я попробовал пример пути из документации, который ссылается на веб-сайт, и он сработал, поэтому и моя карта, и моя реализация работают.

Единственная проблема - заставить обоих работать вместе.

Мой путь к плитке похож на:

ЦСИ / активы / карта /..

Как мне достичь своей цели?

РЕДАКТИРОВАТЬ 1:

РЕДАКТИРОВАТЬ 2:

Answer 1

Полагаю, вы подготовили свой проект Vue с помощью Vue CLI и шаблона веб-пакета, учитывая, что вы используете подпапку @ и /assets/.

Вы должны понимать, что то, что вы передаете Vue2Leaflet url prop - это слой листов Leaflet urlTemplate. Как «шаблон», это всего лишь «подсказка» к фактическому пути изображений мозаики. Поэтому, если вы разрешите веб-пакету управлять этими изображениями, убедитесь, что он не слишком смешивается с их именами файлов, иначе Leaflet больше не сможет их получать. В частности, не пытайтесь вставлять их (с помощью url-загрузчика) или хэшировать их имя (с помощью загрузчика файлов).

Более разумным подходом было бы рассматривать ваши плитки как статические активы (вместо того, чтобы управлять ими как исходным кодом в вашей папке src), так что веб-пакет полностью игнорирует они и Vue build "просто" скопируют их в вывод вашей сборки: поместите ваши плитки в папку /static/ в корне вашего проекта вместо /src/assets/.

Примечание: если вы использовали Vue CLI 3, статическая папка теперь будет /public/ вместо:

Когда использовать папку public

• Вам нужен файл с определенным именем в выводе сборки.
• У вас есть тысячи изображений, и вам нужно динамически ссылаться на их пути.

С помощью Vue CLI 3 вы можете использовать:

<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>

data () {
  return {
    // Assuming your tile images are in /public/map/
    url: process.env.BASE_URL + 'map/{z}/{x}/{y}.png',
    attribution : '',
  }
}

Учитывая, что у вас, вероятно, есть тысячи таких изображений плиток для копирования, вы также можете полностью отделить свои плитки от вашего проекта Vue: например, напрямую скопируйте их на свой хост-сервер.