Как Построить Карту Внутреннего Офиса с WRLD

Я видел Свадебные Крашеры случайно. Я купил билет на «Гризли» и пошел не в тот театр. Через час я понял, что попал не в тот театр, но продолжал ждать. Потому что это то, что относится к атакам медведей … они приходят, когда вы меньше всего этого ожидаете. — Дуайт … снова

Создание повторяемого шаблона выделения

Давайте попробуем эксперимент. Давайте сделаем кнопку «запись», которая записывает клики, которые мы делаем на карте; а затем повторяет их все обратно к нам. Нам нужна кнопка записи и воспроизведения, а также множество нажатий …

 <button id="record">record</button> <button id="play">play</button> 

Это из CodePen

Теперь давайте подключимся к этим кнопкам с событиями нажатия:

 map.indoors.on("indoorentityclick", (event) => { map.indoors.clearEntityHighlights() map.indoors.setEntityHighlights(event.ids[0], [255, 0, 0, 128]) clicks.push({ time: new Date(), id: event.ids[0] }) }) let recording = false let started = null let clicks = [] const record = document.querySelector("#record") const play = document.querySelector("#play") record.addEventListener("click", () => { if (recording) { recording = false record.innerText = "record" } else { recording = true record.innerHTML = "stop" started = new Date() clicks = [] } }) play.addEventListener("click", () => { map.indoors.clearEntityHighlights() for (let click of clicks) { setTimeout(() => { map.indoors.clearEntityHighlights() map.indoors.setEntityHighlights(click.id, [255, 0, 0, 128]) }, click.time.getTime() - started.getTime()) } }) 

Это из CodePen

Давайте сначала посмотрим на событие кнопки записи. При нажатии, если запись еще не началась, мы изменяем текстовое значение кнопки, чтобы stop и очищаем массив щелчков. Мы также фиксируем момент, когда была нажата кнопка записи, чтобы мы могли рассчитывать наши события относительно нее.

Если мы нажмем на него снова, мы сможем сбросить значение текста кнопки и остановить запись.

Затем, когда мы нажимаем на кнопку воспроизведения; мы очищаем все выделенные функции и начинаем циклически перебирать «записанные» события. Они находятся в массиве, поэтому мы можем использовать цикл for...of Мы устанавливаем таймаут для каждого события щелчка, беря время щелчка и вычитая started время из него. Все тайм-ауты создаются практически в одно и то же время, но они запускаются в зависимости от того, как долго после начала записи они произошли.

Наконец, нам нужно фиксировать события щелчка, когда щелкают объекты. Итак, мы indoorentityclick наш ранее indoorentityclick событий indoorentityclick , добавив события click в массив clicks . Попробуйте, записав несколько кликов и затем воспроизведя их. Это довольно затягивает …

Создание расписания

Давайте расширим эту идею, чтобы включить настраиваемое расписание. Допустим, кто-то в WRLD передвигается по офису в течение дня. Или представьте (в соответствии с нашей темой), что Дуайт хотел отслеживать движения Джима …

Он мог бы сделать это, если бы знал расписание Джима:

 const schedule = [ { "start": "08:00", "duration": "00:30", "id": "0003" }, { "start": "08:30", "duration": "00:30", "id": "0004" }, { "start": "09:15", "duration": "00:45", "id": "0028" }, { "start": "10:00", "duration": "01:00", "id": "Meeting Room" }, { "start": "12:00", "duration": "01:30", "id": "0039" } ]; 

Это из CodePen

Мы можем сделать функцию, которая вычисляет количество минут для формата времени, который мы используем (например, 01:30 → 90 ):

 const timeToMinutes = (time) => { let holder = new Date(); holder.setHours(0); holder.setMinutes(0); const start = holder.getTime(); const parts = time.split(":"); holder.setHours(parseInt(parts[0], 10)); holder.setMinutes(parseInt(parts[1], 10)); const end = holder.getTime(); return (end - start) / 1000 / 60; }; const schedule = [ // ... ] for (let event of schedule) { console.log(timeToMinutes(event.duration)) } 

Это из CodePen

Это напечатает 30 , 30 , 45 , 60 и 90 по порядку. Затем нам нужно добавить эти минуты ко времени начала, чтобы определить время окончания:

 const timeToMinutes = (time) => { // ... } const startFromTime = (time) => { const parts = time.split(":"); let holder = new Date(); holder.setSeconds(0); holder.setHours(parseInt(parts[0], 10)); holder.setMinutes(parseInt(parts[1], 10)); return holder; }; const endFromStartAndMinutes = (start, minutes) => { return new Date(start.valueOf() + (minutes * 1000 * 60)); }; const schedule = [ // ... ] for (let event of schedule) { const start = startFromTime(event.start) const minutes = timeToMinutes(event.duration) const end = endFromStartAndMinutes(start, minutes) console.log(start, end) } 

Это из CodePen

… И это будет записывать время начала и окончания относительно текущего дня. Возможно, вы захотите, чтобы начальное и конечное время endFromStartAndMinutes к фиксированному дню, поэтому вам нужно изменить startFromTime и endFromStartAndMinutes чтобы учитывать день.

Учитывая это время начала и окончания, мы могли бы закодировать карту помещения, чтобы показать комнату, где сейчас находится этот сотрудник:

 const schedule = [ // ... ] setInterval(() => { map.indoors.clearEntityHighlights(); for (let event of schedule) { const start = startFromTime(event.start); const minutes = timeToMinutes(event.duration); const end = endFromStartAndMinutes(start, minutes); const now = new Date(); if (now >= start && now <= end) { console.log("Time is now " + now.toLocaleTimeString() + ", in the " + start.toLocaleTimeString() + " to " + end.toLocaleTimeString() + " interval. Highlighting entity " + event.id); map.indoors.setEntityHighlights(event.id, [255, 0, 0, 128]); } } }, 1000); 

Это из CodePen

Сравнивая текущее время с временем начала и окончания каждого события; мы можем сказать, в каком событии находится сотрудник (и, соответственно, выделить эту функцию).

Если вы не видите выделенных объектов, вероятно, у вас нет запланированных на точное время просмотра кода. Попробуйте настроить расписание этого CodePen и откройте консоль, чтобы увидеть, какая сущность должна быть выделена. Я также удалил код записи / воспроизведения из предыдущих примеров, чтобы было легче увидеть, что происходит в этой демонстрации.

Просто подумайте, как это можно расширить. Вы можете добавить расписание каждого, чтобы создать виртуальную систему бронирования событий. Или вы можете создать анимированную визуализацию, чтобы увидеть, есть ли какие-либо конфликты. Это тоже еще одна отправная точка для приложения.

Резюме

Мы потратили много времени на изучение всех деталей создания карт для помещений. WRLD — не единственная платформа, которая понимает карты, созданные QGIS, поэтому это хороший навык, чтобы изучить, если вы хотите делать все виды картографирования.

Мы также рассмотрели, как карты QGIS импортируются и используются внутри платформы WRLD. Мы можем определять карты с огромным количеством деталей и взаимодействовать с ними в режиме реального времени. Когда вы знаете, что устанавливать и как рисовать объекты, картографирование в помещении становится довольно простым.

Потратьте некоторое время, чтобы подумать, как вы могли бы использовать это, чтобы смоделировать ваш дом или офис. Возможно, вы могли бы использовать карты помещений в сочетании с другими функциями Leaflet для создания карт теплового потока или использования энергии для карт помещений. Возможно, вы могли бы создать свое собственное приложение для планирования работы офиса.

Я должен упомянуть: если вы хотите работать с картами внутренних помещений, но не хотите создавать их самостоятельно, WRLD предлагает картографический сервис для помещений за плату. Я не экспериментировал с более высокими уровнями обслуживания и функциональности, но кажется, что WRLD довольно гибки в отношении того, как 3D-карты помещений становятся общедоступными (для таких вещей, как стадионы и аэропорты) по сравнению с частными (для таких вещей, как больницы и школы). ). После этого урока они также сказали мне, что хотят упростить документацию и рабочий процесс для создания карты помещений. Это немного подробно на данный момент, но стоит результатов, если вы спросите меня. Представьте, если бы это было еще проще сделать …

Мы находимся в конце нашего путешествия WRLD. Это стало одним из моих любимых встраиваемых сервисов. С ним весело работать, и он может быть достаточно подробным и гибким. Более того, я не заплатил ни цента, чтобы использовать его. Надеюсь, вы получили столько же удовольствия от этих уроков, сколько я их написал. Дайте мне знать, что вы создали в Twitter . Вы также можете связаться с WRLD с вопросами или показать им, что вы создали.