На главную... Продукты | Технологии | Классификаторы | Проекты | Скачать | Цены| Форум | Статьи | Обучение | Контакты

Использование GIS WebToolKit 6.9.0 во Vue 3

Поиск  Пользователи  Правила  Войти
Форум » Серверные приложения » GIS WebToolKit
Страницы: 1
RSS
Использование GIS WebToolKit 6.9.0 во Vue 3, Не удаётся использовать GIS WebToolKit 6.9.0 во Vue 3
 
Мы пытаемся внедрить картографию в наш веб-продукт, но мы столкнулись с проблемой:

Мы используем TypeScript + Vue 3

Мы предполагаем следующий порядок подключения:

1. Ведем разработку в тулкит

2. Выполняем npm run build-win

3. Результат сформированный в папке release копируем себе в проект допустим в папку gis

4. Подключаем то что скопировано в index.html
Код
<li nk href="gis/w2ui/w2ui-1.4.2.min.css" rel="stylesheet" />

<li nk href="gis/jquery/jquery-ui.css" rel="stylesheet" />



    <li nk href="gis/gwtkse.css" rel="stylesheet" />

<li nk href="gis/gwtk-material.css" rel="stylesheet" />



    <!-- подключение jquery -->

<sc ript src="gis/jquery/jquery-1.12.4.min.js"></sc ript>

<sc ript src="gis/jquery/jquery-ui-1.11.2.min.js"></sc ript>

<sc ript src="gis/jquery/modernizr-2.5.3.js"></sc ript>

<sc ript src="gis/jquery/jquery.maskedinput.js"></sc ript>

<sc ript src="gis/jquery/jquery.balloon.js"></sc ript>

<sc ript src="gis/jquery/polyfill.min.js"></sc ript>

<sc ript src="gis/jquery/html2canvas.min.js"></sc ript>

<!-- подключение w2ui -->

<sc ript src="gis/w2ui/w2ui-1.4.2.min.js"></sc ript>

<sc ript src="gis/gwtkse/MapVue-6.9.0-1.umd.min.js"></sc ript>
<script src="vue.min.js"></script>  - эту строку не прописывал, так как мы итак ведем разработку во vue(да и если добавлял, валилась ошибка)


5. В необходимом мне ts файле, в части скрипта в onMounted добавляем
     
Код
const options = {...}; // cвойства карты

      let mapView = new MapVue('divMap', options);
 

А в части html в нужном месте
Код
<div id="divMap" style="width: 800px; height: 600px"></div> - сюда по идее должна вставиться карта
При таком порядке у меня ругается подключении результирующего js файла, видимо из-за несоответствия версий.

Ошибка:
Код
MapVue-6.9.0-1.umd.min.js:1927 Uncaught TypeError: Cannot read
    properties of undefined (reading 'use')

        at Object.fe0b (MapVue-6.9.0-1.umd.min.js:1927:715425)

        at a (MapVue-6.9.0-1.umd.min.js:1:733)

        at 4fd2 (MapVue-6.9.0-1.umd.min.js:31:351341)

        at a (MapVue-6.9.0-1.umd.min.js:1:733)

        at Module.f313 (MapVue-6.9.0-1.umd.min.js:1927:263877)

        at a (MapVue-6.9.0-1.umd.min.js:1:733)

        at Module.fb15 (MapVue-6.9.0-1.umd.min.js:1927:510264)

        at a (MapVue-6.9.0-1.umd.min.js:1:733)


Просьба помочь
 
Здравствуйте,

Ошибку предположительно вызывает Vue.use(...), то есть отсутствие Vue в глобальном пространстве.
Собранный GWTKSE предполагает внешнюю загрузку скрипта vue.js.

Интеграция инструментария в разработку существующего внешнего Vue приложения на данный момент не завершена (в процессе).
Изменено: Виктор Тазин - 19.12.2022 14:58:15
 
Цитата
Виктор Тазин написал:
Здравствуйте,

Ошибку предположительно вызывает Vue.use(...), то есть отсутствие Vue в глобальном пространстве.
Собранный GWTKSE предполагает внешнюю загрузку скрипта vue.js.

Интеграция инструментария в разработку существующего внешнего Vue приложения на данный момент не завершена (в процессе).
У меня  получилось добавить карту во vue через iframe. Можно ли при таком подключении во Vue 3, вытянуть данные из карты? Например выделенные области
 
Можно, если есть доступ к экземпляру MapVue (а через него можно получить и экземпляр Map через метод mapView.getMap() ).

В карте можно вызвать метод map.getSelectedObjects(), который вернет массив выделенных объектов.
 
Цитата
Виктор Тазин написал:
Можно, если есть доступ к экземпляру MapVue (а через него можно получить и экземпляр Map через метод mapView.getMap() ).

В карте можно вызвать метод map.getSelectedObjects(), который вернет массив выделенных объектов.
В этом и состоит вопрос. Можно ли как то получить доступ к экземпляру MapVue, если овновное приложение написано на Vue 3, а карта подключена через iframe
 
Общение с iframe возможно только через стандартные механизмы передачи сообщений между окнами (postMessage), поэтому передать или получить доступ к mapView невозможно по соображениям безопасности.

Можно только передавать JSON объекты через сообщения.
 
Доброго времени суток. Сделал взаимодействие, оно работает. Но в некоторых случаях карта не успевает прогрузится и тогда всё ломается.

Пример

Во vue

             <iframe
                     :src="`./gis/index.html`"
                     width="100%"
                     height="100%"
                     frameborder="0"
                     ref="iframeRef"
                     id="iframe"
                     @load="handlLoadIframe()"
                   >
                   </iframe>

   handlLoadIframe(){
       document
         .getElementById("iframe")
         .contentWindow.postMessage(
           { message: "coordinates", value: geo, type: geo.properties.area },
           "*"
         );
   },


В main.js

....

if (window.GWTK) {
   loadFromUrl(gwtkOptions);
   const map = new MapVue('dvMap', gwtkOptions);
....

(async function () {




   window.addEventListener('message', message => {
   
       data = message.data.value;
       if(map.map){
       const mapobject = map.mapObject(map.map.layers[1], data.geometry.type);
       mapobject.fromJSON(data);
       map.map.setActiveObject( mapobject );
       map.map.fitBounds( mapobject.getBounds() );
   })
})();

}

И в одних случая происходит отрисовка, в других ругается на map.map.layers[1]. Помогает установка таймаута, но это не выход.
Просьба помочь
 
Добрый день,

После вызова конструктора вызываются асинхронные процессы подключения к IndexedDB, после чего выполняется создание карты.

При завершении инициализации срабатывает Promise, который можно получить в mapVue.ready

Или можно зарегистрировать обработчики, которые будут вызваны после завершения инициализации, при помощи метода mapVue.onInitMap(handler);
Изменено: Виктор Тазин - 17.03.2023 11:22:14
 
Цитата
Виктор Тазин написал:
Добрый день,

После вызова конструктора вызываются асинхронные процессы подключения к IndexedDB, после чего выполняется создание карты.

При завершении инициализации срабатывает Promise, который можно получить в mapVue.ready

Или можно зарегистрировать обработчики, которые будут вызваны после завершения инициализации, при помощи метода mapVue.onInitMap(handler);
Можно пример?
   const map = new MapVue('dvMap', gwtkOptions).then(()=>{
       console.log("!!!")
   });

или

map.onInitMap(()=>{
});

говорит что  is not a function
 
Код
const map = new MapVue( 'dvMap', gwtkOptions );
map.ready.then( () => {
    console.log( '!!!' );
} );
или
Код
const mapVue = new MapVue( 'dvMap', gwtkOptions );
mapVue.onInitMap( map => {
    console.log( map );
} );
Страницы: 1
Читают тему (гостей: 1)



© КБ Панорама, 1991-2024

Регистрируясь или авторизуясь на форуме, Вы соглашаетесь с Политикой конфиденциальности