VsFormGeom

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

Підключення

hbs

{{{_vue "vs-form-geom"}}}

Component API

Props

Name	Description	Default	Type
height	Задає висоту блоку форми	400px	Number, String
multiple	Значення true дозволяє додавати декілька геометрії одного типу на мапі	false	Boolean
multipleAll	Значення true дозволяє додавати декілька геометрії різними за типом на мапі	false	Boolean
apiLayer	Посилання на API для отримання базов та оверлей шарів output повинен бути {layers: [...]} або [...]	''	String
layers	Додає масив шарів до списку шарів	[]	Array
dataset	Додає масив dataset шарів до списку шарів з відображенням у легенді	[]	Array
tools	Інструменти додавання геометрії на мапу, дозволені інструменти point, polygon,line,rectangle	[]	Array<String>

Events

Name	Description	Output
input	Повертає об'єкт геометрії на мапі	Obeject, Array

Приклади

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

      <template>
        <div>
            <VsFormGeom v-model="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>
  

Мульти геометрія

      <template>
        <div>
            <VsFormGeom v-model="geometry" :multiple="true" />
        </div>
      </template>
      <script>
        export default {
          data() {
            return {
                geometry: { "type": "MultiPolygon", "coordinates": [ [ [ [ 30.402067184447986, 50.48033624014866 ], [ 30.397947311401765, 50.417812218345546 ], [ 30.489271163939918, 50.4147494805986 ], [ 30.497510910033867, 50.48557925408306 ], [ 30.402067184447986, 50.48033624014866 ] ] ], [ [ [ 30.56274223327739, 50.49002307212686 ], [ 30.542829513549776, 50.40694817599842 ], [ 30.684278488159435, 50.406072927602565 ], [ 30.695264816283725, 50.492644114457335 ], [ 30.56274223327739, 50.49002307212686 ] ] ] ] }
            };
          },
        };
      </script>
  

Мульти геометрія різних типів

      <template>
        <div>
            <VsFormGeom v-model="geometry" :tools="tools" :multiple="true" :multipleAll="true" />
        </div>
      </template>
      <script>
        export default {
          data() {
            return {
                geometry: [{ "id": "55c40930bbf4aba790311e88c0f1dce7", "type": "Feature", "properties": {}, "geometry": { "coordinates": [ [ [ 30.334549168661937, 50.4930892390297 ], [ 30.46254244788861, 50.4930892390297 ], [ 30.46254244788861, 50.40106758803651 ], [ 30.334549168661937, 50.40106758803651 ], [ 30.334549168661937, 50.4930892390297 ] ] ], "type": "Polygon" } }, { "id": "ec658f966a70eb7bf8643914604907cf", "type": "Feature", "properties": {}, "geometry": { "coordinates": [ [ 30.4904119522364, 50.40538510087913 ], [ 30.651537294159084, 50.50166027968453 ] ], "type": "LineString" } }, { "id": "d81512c1b90980b8c56fc4761664a345", "type": "Feature", "properties": {}, "geometry": { "coordinates": [ 30.699611001632377, 50.457514454474534 ], "type": "Point" }}],
                tools: ['point', 'line', 'polygon', 'rectangle']
            };
          },
        };
      </script>
  

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

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

      <template>
        <div>
            <VsFormGeom :layers="layers" />
        </div>
      </template>
      <script>
        export default {
          data() {
            return {
              datetime: "",
              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>
  

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

      <template>
        <div>
            <VsFormGeom :dataset="dataset"  />
        </div>
      </template>
      <script>
        export default {
          data() {
            return {
                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>