목차
베이스맵 클래스 소개
Basemap 클래스는 ArcGIS Maps SDK for JavaScript에서 지도 베이스맵을 나타내는 데 사용되는 핵심 클래스 중 하나입니다. 베이스맵은 지리 데이터를 표시하기 위해 지도 애플리케이션에서 사용되는 배경 레이어입니다. 도로, 하천, 지형, 지명 등 기본적인 지리정보를 제공합니다. Basemap 클래스는 지도 레이어를 사용자가 선택할 수 있는 베이스맵 옵션으로 구성하는 방법을 제공합니다.
Basemap 클래스의 공통 속성
id: 베이스맵 객체를 식별하는 데 사용되는 베이스맵의 고유 식별자입니다.title:베이스맵의 제목입니다.thumbnailUrl: 기본 이미지의 썸네일 URL입니다.baseLayers: 베이스맵이 포함된 레이어 배열입니다.add()및 메소드를 사용하여remove()베이스맵 레이어를 추가하거나 제거할 수 있습니다 .referenceLayers: 베이스맵이 포함된 참조 레이어의 배열입니다. 참조 레이어는 지도에 참조 정보를 제공하는 보이지 않는 레이어입니다.loadError: 베이스맵 로드 실패 여부를 나타내는 부울 값입니다.loaded: 베이스맵이 로드되었는지 여부를 나타내는 부울 값입니다.loadStatus: 로드 작업 상태를 나타내는 문자열입니다. 상태 값에는 Not-loaded(로드되지 않음), 로드(loading), 로드됨(loaded), 실패(loading failed)의 네 가지 범주가 포함됩니다.spatialReference: 베이스맵의 공간 참조
10.portalItem: PortalItem 인스턴스, 베이스맵과 연결된 ArcGIS Online 또는 Portal for ArcGIS 프로젝트의 개체입니다. 이 속성은 제목, 설명, 썸네일, 태그 등 베이스맵과 관련된 추가 정보를 제공합니다.
Basemap 클래스의 일반적인 메서드
cancelLoad()메소드: 진행 중인 load() 작업을 취소하는 데 사용됩니다. 베이스맵을 로드할 때 로드 작업을 취소해야 하는 경우 cancelLoad() 메서드를 사용할 수 있습니다. load() 메서드가 진행 중인 경우 cancelLoad() 메서드를 호출하면 로드 작업이 취소됩니다.clone()방법: 개체의 전체 복제본을 만드는 데 사용됩니다. 메소드가 호출되면clone()모든 속성 및 관련 리소스를 포함하여 원본 객체의 정확한 복사본이 생성됩니다. 객체에 대한 메서드를 호출하면clone()동일한 구성으로 객체의 복사본을 만들 수 있습니다.Basemap이는 추가 사용이나 수정을 위해 원본 객체를 유지하면서 인스턴스의 복사본을 생성하려는 경우에 유용합니다.destroy()방법: 해당 레이어 및 (있는 경우)를Basemap포함하여 개체 및 관련 리소스를 삭제하는 데 사용됩니다. 메서드를portalItem호출한 후에 는 해당 개체를 더 이상 사용할 수 없으며 해당 개체가 차지했던 메모리 및 기타 시스템 리소스가 해제됩니다. 이 방법은 객체를 더 이상 사용할 필요가 없을 때 매우 유용하며 , 메모리를 해제하고 관련 리소스를 정리하여 애플리케이션의 성능과 효율성을 향상시키는 데 도움이 됩니다.destroy()BasemapBasemapfromId()Basemap방법: 알려진 기본 지도 ID를 기반으로 새 인스턴스를 생성하는 데 사용됩니다 . 기본 지도 ID는 거리 지도, 위성 이미지 지도, 지형 지도 등 미리 정의된 공통 기본 지도이거나 사용자 정의된 기본 지도일 수 있습니다. 메서드를 호출하고fromId()기본 지도 ID를 매개변수로 제공하면 해당 속성과 리소스를 수동으로 구성하지 않고도 특정 기본 지도 인스턴스를 쉽게 생성할 수 있습니다. 이는 특정 유형의 기본 지도를 빠르게 얻는 데 유용합니다.load()방법: 베이스맵을 비동기적으로 로드합니다. Promise 객체를 반환하며,then()로드가 완료된 후 메소드를 사용하여 콜백을 처리할 수 있습니다.when()메서드:Promise개체를 반환합니다.when()메소드를 사용하면 인스턴스가 생성된 후 작업을 수행하거나 추가 작업을 처리할 수 있습니다. 인스턴스가 사용 가능해지면 실행될 콜백 함수를 인수로 받아들입니다.when()추가 작업을 연결하거나 인스턴스 생성에 따라 특정 작업을 수행하는 데 사용할 수 있습니다 .
베이스맵을 사용하여 사용자 정의 베이스맵 추가
참조 베이스맵
이전 섹션에서는 ArcGIS API를 사용하여 vue3에서 3차원 지구를 로드했습니다. 이번 섹션에서는 이를 기반으로 사용자 정의 베이스맵을 추가하겠습니다. 베이스맵을 사용하려면 먼저 이를 소개해야 합니다. 다음 설명을 사용하여 소개합니다. 베이스맵
import Basemap from "@arcgis/core/Basemap.js";
참조 타일 레이어
여기서는 온라인 지도 서비스 주소인 http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer를 호출하고 이 지도 서비스는 슬라이싱 서비스를 제공하므로 슬라이싱 서비스를 도입해야 합니다.
import TileLayer from "@arcgis/core/layers/TileLayer.js";
새 베이스맵 객체 생성
코드에서 new 키워드를 사용하여 Basemap 객체를 생성하세요.
let basemap = new Basemap({
baseLayers: [
new TileLayer({
url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
title: "Basemap"
})
],
title: "basemap",
id: "basemap"
});
위 코드에서는 새로운 메소드를 사용하여 웹 타일 레이어를 나타내는 TileLayer 객체를 생성합니다. 우리가 게시하는 지도 서비스의 URL 문자열을 TileLayer의 url 속성에 기본 지도의 레이어 데이터 소스로 설정합니다.
그런 다음 이 TileLayer 객체를 baseLayers 배열에 넣고 해당 배열을 Basemap에 매개변수로 전달합니다. 이러한 방식으로 하나의 레이어를 포함하는 베이스맵 객체를 생성합니다. 동시에 이 베이스맵 객체에 대한 제목과 ID가 설정되고 제목과 ID가 모두 "베이스맵"으로 설정됩니다.
지도 보기에 사용자 정의 레이어 적용
새로운 방법을 사용하여 지도 객체를 생성하고 베이스맵 속성을 위에서 생성한 베이스맵 객체로 설정합니다.
const map = new Map({
basemap: basemap
});
Camera 객체 소개 및 생성
2차원 지도를 사용한다면 여기서는 Camera 객체를 도입할 필요가 없습니다. 여기서는 3차원 지도를 사용하고 있으므로 Camera 객체를 도입하고 생성해야 합니다. Camera 객체를 생성하기 위해 Camera를 도입해야 합니다
.
import Camera from "@arcgis/core/Camera.js";
그리고 초기값을 설정합니다.
var camera = new Camera({
position: {
// 相机位置
x: -123.12,
y: 40.57,
z: 2000 // 高度
},
tilt: 60, // 相机俯仰角
heading: 0 // 相机偏航角
});
SceneView 객체 소개 및 생성
import SceneView from "@arcgis/core/views/SceneView.js";
SceneView 객체는 ArcGIS API에서 제공하는 3차원 뷰 장면으로, 사용하기 전에 SceneView 객체를 소개하고 생성해야 합니다 .
view = new SceneView({
center: [-118.80500, 34.02700],
zoom: 4,
container: "viewDiv",
map: map,
camera: camera // 设置相机
});
view.ui.components = [];
}
지금까지 커스텀 베이스맵을 구현하고, 3차원 장면을 생성하고,
프로그램을 실행하고, 브라우저를 새로고침하고, 효과를 확인해봤습니다.
그럼 오늘은 여기까지 하도록 하겠습니다. 마음에 드셨다면 좋아요, 팔로우, 추가 부탁드립니다. 당신이 좋아하는 것!