Map

Бібліотека готовиї компонент мап для аналізу та відображення геометричних даних.

Підключення

Import

js

import Vue from "vue";
import { install } from "softpro-vue-map";

install(Vue);

// or

import Vue from "vue";
import { VsSimpleMap, VsDatasetMap, VsEditorMap } from "softpro-vue-map";

Vue.component("VsSimpleMap", VsSimpleMap);
Vue.component("VsDatasetMap", VsDatasetMap);
Vue.component("VsDatasetMap", VsDatasetMap);

CDN

html

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script src="https://cdn.softpro.ua/vue/map/dev/map.softpro.bundle.js"></script>
<script>
  // Will invoke vsMap from global object
  vsMap.install(Vue);

  new Vue({
    el: "#app",
    template: `<div> <VsSimpleMap /> </div>`,
  });
</script>

Component API

Core

Name	Description	Default	Type
layers	Додає масив шарів до списку шарів	[]	Array
dataset	Додає масив dataset шарів до списку шарів з відображенням у легенді	[]	Array

Style

Name	Description	Default	Type
height	Для можливості вказати висоту блоку мапи	400px	String

Приклад VsSimpleMap

  <template>
    <div>
      <VsSimpleMap :geometry="geometry" :layers="layers" />
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
            geometry: {
                "coordinates": [
                    [
                        [30.469787597657586, 50.46617446530155], [30.469787597657586, 50.4115087790897], [30.537765502931364, 50.41457172634631], [30.536392211915484, 50.47229309101715], [30.469787597657586, 50.46617446530155]
                    ]
                ],
                "type": "Polygon",
            },
            layers: [
                {
                    visible: true,
                    enabled: true,
                    id: 'topo100',
                    name: 'Topomap Ukraine',
                    url: 'https://data.gki.com.ua/api-user/rtile/voyager/ua/{z}/{x}/{y}.png',
                    service: 'TMS',
                    scale: 100000,
                    category: 'Національна інфраструктура геопросторових даних',
                    bounds: 'ua',
                    owner: 'НДІГК (Інститут геодезії та картографії)',
                    image: 'https://data.gki.com.ua/api-user/rtile/voyager/ua/8/149/86.png',
                    basemap: true,
                },
                {
                    enabled: true,
                    id: 'google_hybrid',
                    name: 'Google Гібрид',
                    url: 'https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}',
                    service: 'TMS',
                    category: 'Базові карти',
                    owner: 'Google',
                    image: 'https://mt1.google.com/vt/lyrs=y&x=2473&y=1432&z=12',
                    basemap: false,
                    attribution: 'Картографічні дані: © Google, 2022',
                },
                {
                    overlay: true,
                    enabled: true,
                    id: 'gsv',
                    name: 'Google Street View',
                    url: 'https://mt2.google.com/vt/?lyrs=svv|cb_client:apiv3&style=50&x={x}&y={y}&z={z}',
                    service: 'TMS',
                    bounds1: '30.1051569,49.7981093,30.1066589,49.7989957',
                    category: 'Базові шари',
                    owner: null,
                    basemap: false,
                    attribution:
                    "© <a href='https://google.com' target='_blank'> Google</a> contributors",
                },
              ]
        };
      },
    };
  </script>
  

Структура проекту

#src
├── App.vue
├── assets
|  ├── filters_example.jpg
|  ├── fonts
|  |  ├── tabler-icons.eot
|  |  ├── tabler-icons.ttf
|  |  ├── tabler-icons.woff
|  |  └── tabler-icons.woff2
|  ├── logo.png
|  ├── tabler-icons.css
|  └── tailwind
|     ├── preline.js
|     └── tailwind.js
├── components
|  └── simple-map
|     ├── components
|     ├── map
|     ├── vs-simple-map-dataset.vue
|     ├── vs-simple-map-layers.vue
|     └── vs-simple-map.vue
├── main.js
├── misc
|  └── map-bundle.js
├── output.txt
└── vendor
   └── head.js