ArcGIS RouteLayer를 사용한 Web Speech API

길찾기 중지

ArcGIS API for JavaScript는 최근에 정류장 및 장벽과 같은 경로에 대한 정보와 함께 턴 바이 턴 방향의 결과를 시각화하는 데 사용할 수 있는 RouteLayer을 추가했습니다. ArcGIS Online에 개별 항목으로 저장하거나 WebMap의 일부로 저장할 수 있습니다. 참조할 수 있는 설명서에 훌륭한 소개sample가 있습니다. 나는 RouteLayer를 처음 보았을 때 한 가지 터무니없는 이유로 매우 흥분했습니다... Web Speech API을 통해 실행하고 싶었습니다.

여기서 잠깐만 따라와! 도로에 서비스 트럭이 있고 그들은 웹 애플리케이션을 사용하여 다양한 작업 위치로 라우팅됩니다. 작업 위치는 하루를 시작할 때 할당될 수 있습니다. 우선 순위로 인해 또는 누군가가 약속을 취소했기 때문에 운전하는 동안 경로를 업데이트하는 일부 기능을 추가했을 수 있습니다. 이렇게 하면 장치에 경고가 푸시되고 새 RouteLayer로 경로가 변경될 수 있습니다. 그러나 사용자는 운전 중이므로 전화를 들고 방향을 읽을 수 없습니다. 안전이 제일인 사람들! 다른 선택의 여지가 없습니다. Web Speech API를 사용해야 합니다!

무엇을 해야할지 알려주세요

The code for this blog post is available on github.

이 원본sample을 가져와 약간 수정할 수 있습니다. 창 개체의 speechSynthesis를 가져올 수 있습니다.

const synth = window.speechSynthesis;

RouteLayer에는 DirectionPoints 컬렉션으로 구성된 directionsPoint 속성이 있습니다. 각 DirectionPoint에는 해당 지점과 연결된 방향 정보가 있는 displayText 속성이 있습니다.

프로덕션 애플리케이션에서는 아마도 사용자의 현재 위치 주변에 버퍼를 생성하고 다음 DirectionPoint까지의 경로를 따라 측정할 것입니다. 특정 거리 내에 도달하면 텍스트 앞에 In a quarter-mile... 또는 이와 유사한 문구를 붙일 수 있습니다. 데모 목적으로 DirectionPoint 컬렉션을 통해 반복할 수 있습니다. 음성 패턴을 좀 더 자연스럽게 만들기 위해 위치 사이에 1~2초의 짧은 타임아웃을 추가할 수 있습니다. 이를 단순화하기 위해 Collection to an array을 변환한 다음 values을 새 배열 반복자로 가져올 수 있습니다. 이렇게 하면 포인트 탐색이 조금 더 쉬워집니다.

이제 SpeechSynthesisUtterance 및 DirectionPoint의 표시 텍스트를 사용하여 발화의 새 인스턴스를 만들 수 있습니다. SpeechSynthesis에서 speak을 호출할 수 있으며 발언이 완료되면 1500ms를 기다린 후 다음 방향으로 이동합니다. 각 DirectionPoint에서 마커를 추가하고 지도를 중앙에 배치하여 현재 지점을 강조 표시할 수도 있습니다.

let utterance = new SpeechSynthesisUtterance(point.displayText);
utterance.addEventListener('end', () => {
    const { value, done } = points.next();
    if (done) return;

    setTimeout(() => {
        speakToMe(value);
    }, 1500);
});

synth.speak(utterance);

반복이 완료되면. 우리는 아무것도 할 수 없고 지시는 끝났습니다!

요약

RouteLayer는 웹 매핑 응용 프로그램에서 사용할 수 있는 ArcGIS Platform의 방향을 공식화합니다. Web Speech API를 꼭 사용하지 않아도 되지만 너무 재미있으니 한 번 해보세요! 방향, 경고 또는 사용자에게 외쳐야 하는 정말 중요한 알림과 함께 사용할 수 있습니다! 내 요점은 확실히 재미 있으니 재미를 느껴보세요!

아래 비디오에서 이 응용 프로그램의 연습을 볼 수 있습니다!