Amazon Location Service를 위한 새로운 지도 스타일의 간단한 보기
Amazon Location Service의 새로운 지도 스타일을 간단하게 표시했습니다 🎉
최근 두 가지 새로운Amazon Location Service 지도 스타일을 사용할 수 있습니다. 세련된 디자인 지도 스타일인 "HERE Explore"와 트럭 제한 및 속성이 추가된 "HERE Explore Truck"입니다. "HERE 탐색"스타일은 일본어 현지화도 적용하는 Amazon Location Service의 첫 번째 스타일입니다. 이번에는 "HERE 탐색"을 간단하게 표시합니다!
사전 준비
AWS Amplify #001 - Installation
실행 환경
AWS Amplify 설정
먼저 AWS Amplify를 구성합니다.
평소와 같이 인증 기능을 추가하십시오. 맵 기능의 경우 기본 맵 스타일 "Esri Street Map"을 선택하고 액세스 대상을 "인증 및 게스트 사용자"로 설정합니다.
amplify init
amplify add auth
amplify add geo
amplify push
이것으로 AWS Amplify 구성이 완료되었습니다 👍
지도 애플리케이션 구축
다음으로 실제 지도 애플리케이션을 빌드해 보겠습니다.
이번에는 가장 간단한 구성인 "index.html"만 빌드했습니다.
전체구성
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link>
<script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import awsconfig from "./aws-exports.js";
const { Amplify } = aws_amplify_core;
const { createMap } = AmplifyMapLibre;
Amplify.configure(awsconfig);
createMap({
container: "map",
center: [139.7648, 35.6794],
zoom: 15,
bearing: 64.8,
pitch: 60,
});
</script>
</body>
</html>
각 라이브러리를 로드합니다.
<link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link>
<script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
지도 배치 설정.
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
지도 보기 설정.
<div id="map"></div>
<script type="module">
import awsconfig from "./aws-exports.js";
const { Amplify } = aws_amplify_core;
const { createMap } = AmplifyMapLibre;
Amplify.configure(awsconfig);
createMap({
container: "map",
center: [139.7648, 35.6794],
zoom: 15,
bearing: 64.8,
pitch: 60,
});
</script>
디스플레이를 확인하면 기본 지도 스타일인 "Esri Street Map"이 표시됩니다.
새 지도 스타일 설정
마지막으로 새 지도 스타일을 설정합니다.
2022년 4월 현재 Amazon Location Service에 새로운 지도 스타일이 추가되었지만 AWS Amplify에는 아직 기능이 추가되지 않았습니다. 부품이 추가되기 전까지는 임시 지원입니다.
AWS Management Console → Amazon Location Service → 생성된 스타일 선택 → 지도 이름 복사 및 메모 → "지도 삭제"클릭.
"삭제"를 입력 → "삭제"를 클릭합니다.
"지도 만들기"클릭 → 기본 지도와 같은 이름을 지도 이름으로 설정 → 지도 스타일을 "HERE 탐색"으로 설정하고 지도를 만듭니다.
설정되어 있는지 확인하세요.
디스플레이를 확인하면 새로운 지도 스타일인 "HERE 탐색"이 표시됩니다.
관련 기사
Amplify Geo 및 Amazon 위치 서비스 구축 방법 요약
Yasunori Kirimoto for AWS Community Builders ・ 2021년 12월 9일 ・ 4분 읽기
#amazonlocationservice
#awsamplify
#maplibre
#leaflet
참조
Amazon Location Service
AWS Amplify
MapLibre GL JS
Reference
이 문제에 관하여(Amazon Location Service를 위한 새로운 지도 스타일의 간단한 보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aws-builders/simple-view-of-new-map-styles-for-amazon-location-service-68n텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
