VsSimpleMap

Компонент VsSimpleMap компонент створений для відображення даних геометрії, також це комплекс інструментів для взаємодії слоями geojson, vtile, rtile

Підключення

hbs

{{{_vue "vs-simple-map"}}}

Component API

Content

Name	Description	Default	Type
apiLayer	Посилання на API для отримання базов та оверлей шарів output повинен бути {layers: [...]} або [...]	''	String
table	Назва шаблону для викорситання за API layer-setting	''	String
layers	Додає масив шарів до списку шарів	[]	Array<Object>
dataset	Додає масив dataset шарів до списку шарів з відображенням у легенді	[]	Array<Object>
geometry	Обєкт геометрії для відображення на мапі	null	Object
title	Задає висоту блоку форми	400px	String

Style

Name	Description	Default	Type
height	Задає висоту блоку форми	400px	String
color	Колір	400px	String

Приклади

Базове використання

Базовий вигляд мапи з доданою геометрією на карті для відображення, заданою за допомогою пропса geometry

      <template>
        <div>
            <VsSimpleMap :geometry="geometry" />
        </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",
                }
            };
          },
        };
      </script>
  

Додавання шарів

Для прикладу використання шарів ми додали декілька шарів до цього прикладу за допомогою пропса layers. Натисніть на кнопку "Шари"

      <template>
        <div>
            <VsSimpleMap :layers="layers" :geometry="geometry" />
        </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,
                },
                {
                  overlay: true,
                  visible: true,
                  enabled: true,
                  id: 'atu',
                  name: 'Адміністративно-територіальний устрій',
                  url: 'https://data.gki.com.ua/api-user/rtile/3018446654693967728/ua/{z}/{x}/{y}.png',
                  service: 'TMS',
                  category: 'Національна інфраструктура геопросторових даних',
                  owner: 'НДІГК (Інститут геодезії та картографії)',
                },
                {
                    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>
  

Додавання наборів на карту

Можливість додавати набори даних на мапу реалізовані за допомогою пропса dataset, який дозволяє розгорнути декілька різних наборів даних і в одночас додати геометрію для відображення

      <template>
        <div>
            <VsSimpleMap :dataset="dataset" :geometry="geometry" />
        </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",
                },
                dataset: [{
                    data: "ds.geo_works_map.table",
                    card: "ds.geo_works.table.t",
                    attrFill: "status",
                    name: "Топографо-геодезичні роботи(поточний рік)",
                    service: "vtile",
                    popup: "oid_in,status,org_id,area,work_type,user_id_checked",
                    style: {
                        type: "polygon",
                        colorAttr: "status",
                        "line-width": 2,
                    },
                    meta: {
                        meta: {
                            name: "Видача матеріалів та прийом топографо-геодезичних робіт",
                            table: "data_surveyor.geo_works",
                            pk: "gw_id",
                            view: "ds.geo_works_map.table",
                            count: 9905,
                            module: "UC.GEODETIC.MAN",
                            tableCode: "14",
                        },
                        access: false,
                        pt: {},
                        setting: ["card"],
                        action: '<a edit="data_surveyor.geo_works/{{gw_id}}" form="ds.geo_works.form">Редагувати</a>',
                        geom: {
                            attr: "geom",
                        },
                        columns: [
                            {
                                name: "status",
                                type: "int4",
                                values: [
                                {
                                    id: "1",
                                    count: 0,
                                    text: "на видачу вихідних даних",
                                    color: "#979da6",
                                },
                                {
                                    id: "2",
                                    count: 0,
                                    text: "видано вихідні дані",
                                    color: "#ed8c15",
                                },
                                {
                                    id: "6",
                                    count: 0,
                                    text: "На перевірці",
                                    color: "#861aeb",
                                },
                                {
                                    id: "3",
                                    count: 0,
                                    text: "перевірене",
                                    color: "#3687e3",
                                },
                                {
                                    id: "4",
                                    count: 0,
                                    text: "скасовані заявки",
                                    color: "#de1d1d",
                                },
                                {
                                    id: "5",
                                    count: 0,
                                    text: "внесено в ЄЦТО",
                                    color: "#03800b",
                                },
                                {
                                    id: "7",
                                    count: 0,
                                    text: "Резерв",
                                    color: "#945419",
                                },
                                {
                                    id: "nodata",
                                    count: 0,
                                    text: "Дані відсутні",
                                    ua: "Дані відсутні",
                                    color: "#222222",
                                },
                                ],
                                title: "Статус",
                                format: "badge",
                                select: "ds.status",
                                option: "ds.status",
                                meta: "status",
                                filterCode: "21",
                            },
                        ],
                        props: [
                            "oid_in",
                            "street_id",
                            "settlement_id",
                            "address_id",
                            "status",
                            "work_type",
                            "user_id_checked",
                            "balans_utr_id",
                        ],
                    },
                }],
            };
          },
        };
      </script>
  

Приклад даних

Об'єкт з геометрією

{
  coordinates: [
    [30.377090454103495, 50.464426141094975], 
    [30.41828918457165, 50.4115087790897], 
    [30.530899047853325, 50.40406936846736], 
    [30.47047424316554, 50.492391572438095]
  ],
  type: 'LineString',
}

Набір FeatureCollection

{
  type: 'FeatureCollecton',
  features: [
    {
      geometry: {
        coordinates: [
          [30.377090454103495, 50.464426141094975], 
          [30.41828918457165, 50.4115087790897], 
          [30.530899047853325, 50.40406936846736], 
          [30.47047424316554, 50.492391572438095]
        ],
        type: 'LineString',
      },
      type: 'Feature'
    }
  ]
}

Об'єкт Feature

{
  geometry: {
    coordinates: [
      [30.377090454103495, 50.464426141094975], 
      [30.41828918457165, 50.4115087790897], 
      [30.530899047853325, 50.40406936846736], 
      [30.47047424316554, 50.492391572438095]
    ],
    type: 'LineString',
  },
  type: 'Feature'
}

Массив геометрій

[
  {
    coordinates: [
      [30.377090454103495, 50.464426141094975], 
      [30.41828918457165, 50.4115087790897], 
      [30.530899047853325, 50.40406936846736], 
      [30.47047424316554, 50.492391572438095]
    ],
    type: 'LineString',
  }
  {
    coordinates: [
      [30.377090454103495, 50.464426141094975], 
      [30.41828918457165, 50.4115087790897], 
      [30.530899047853325, 50.40406936846736], 
      [30.47047424316554, 50.492391572438095]
      [30.377090454103495, 50.464426141094975], 
    ],
    type: 'Polygon',
  }
]