@opengis/v3-map
v0.0.13
Published
## Можливості (Features)
Downloads
70
Maintainers
Keywords
Readme
V3-MAP
Можливості (Features)
- Інтерактивна карта: Відображення картографічних шарів з можливістю взаємодії.
- Клік на карті: Обробка кліків на карті для отримання інформації про об'єкти.
- Відображення карток: Показ карток з інформацією про об'єкти на карті.
- Навігаційні інструменти: Інструменти для зумування, масштабування та інші навігаційні функції.
- Міні-карта: Відображення міні-карти для зручної навігації.
Документація (Documentation)
Встановлення
Клонуйте репозиторій:
git clone https://github.com/your-repo.git
Перейдіть до каталогу проєкту:
cd your-repo
Встановіть залежності:
npm install
Запуск проєкту
Для запуску локального сервера використовуйте команду:
npm run dev
Приклад карти
Приклад карти доступний за цим посиланням.
CDN Usage
Створіть папку assets
в зручному місці та додайте папки та файли tailwind
, preline
і tabler
. Взяти потрібні папки можна тут.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/assets/style/tailwind.css" />
<link rel="stylesheet" href="/assets/font/tabler/tabler-icons.min.css" />
<link rel="stylesheet" href="https://cdn.softpro.ua/vue/v3-core/dev/style.css" />
...
</head>
<body>
<div id="app" style="margin-top: 100px">
<vs-map height="80vh"></vs-map>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="/assets/js/tailwind.js"></script>
<script src="/assets/js/preline.js"></script>
<script src="https://cdn.softpro.ua/vue/map-portal/dev/v3-map-portal.umd.cjs"></script>
<script src="https://cdn.softpro.ua/vue/map-portal/dev/style.css"></script>
<script src="https://cdn.softpro.ua/vue/v3-core/dev/vue3-softpro-ui.umd.cjs"></script>
....
</body>
</html>
Підключення в інші проєкти за допомогою NPM
Для підключення карти в сторонній проєкт:
Пропишіть в терміналі команду:
npm i v3-map
Створіть папку
assets
в зручному місці та додайте папки та файлиtailwind
,preline
іtabler
. Взяти потрібні папки можна тут..У файлі
main.js
імпортуйте та заінстальте нашу карту. Файлmain.js
має виглядати наступним чином:import "./assets/main.css"; import { createApp } from "vue"; import App from "./App.vue"; import v3map from "v3-map"; import './assets/tailwind/tailwind.js'; // імпортуємо tailwind import './assets/tailwind/preline.js'; // імпортуємо preline import './assets/tabler/tabler-icons.min.css'; // імпортуємо tabler const app = createApp(App); v3map.install(app); if (window.v3map) { window.v3map.install(app); } app.mount('#app');
Виконавши всі ці дії, тепер ми можемо у будь-яку компоненту вставити VsMap
, наприклад:
<template>
<div>
<VsMap />
</div>
</template>
<script>
import VsMap from 'v3-map';
export default {
components: {
VsMap,
},
};
</script>
Цей приклад показує, як імпортувати і використовувати компоненту карти в іншому проєкті.