ArcGIS API for JavaScript의 스마트 매핑 도구

스마트 매핑 도구

Smart Mapping은 플랫폼의 Esri 전체 도구입니다. 웹 매핑 앱을 위한 멋진 시각화를 만들 수 있는 몇 가지 직관적인 방법을 제공합니다. 스마트 매핑 여정의 첫 번째 정류장은 Map Viewer에서 시작하는 것이 좋습니다. Map Viewer에서 레이어와 맵의 스타일을 지정하면 이를 저장한 다음 자신의 애플리케이션에서 쉽게 사용할 수 있습니다.

그러나 때때로 일부 항목을 사용자 지정해야 할 수도 있습니다. 앱에 표시하려는 알 수 없는 다양한 데이터 소스의 CSV, GeoJSON으로 작업 중일 수 있습니다. 이때 스마트 매핑 도구in the ArcGIS API for JavaScript가 유용할 수 있습니다.

레이어에서 create popups, 그리고 Smart Mapping popup helpers을 사용하여 시각화와 함께 팝업을 만드는 방법에 대한 몇 가지 비디오를 만들었습니다.

그러나 다양한 모듈을 함께 사용하여 멋진 앱을 만들 수도 있습니다!

최소/최대 배율

팝업 템플릿

렌더러

가장 먼저 할 수 있는 일 중 하나는 스마트 매핑 도구를 사용하여 레이어에 대한 최적scale ranges을 결정하는 것입니다.

import scaleRange from '@arcgis/core/smartMapping/heuristics/scaleRange';

// determine min/max scales
const { minScale, maxScale } = await scaleRange({
    layer: featureLayer,
    view,
});

// apply scales to layer
featureLayer.minScale = minScale;
featureLayer.maxScale = maxScale;

scaleRange 메서드는 대상 레이어와 적절한 축척 범위를 결정하는 보기가 필요합니다. 모든 축척에서 그려진 데이터를 보는 것이 항상 이치에 맞는 것은 아니므로 애플리케이션에서 깔끔한 매핑 환경을 제공하는 데 매우 유용할 수 있습니다.

다음으로 레이어에 대한 렌더러를 만들 수 있습니다. 이 경우 relationship renderer 생성에 관심이 있을 수 있습니다.

import { createRenderer } from '@arcgis/core/smartMapping/renderers/relationship';
const { renderer } = await createRenderer({
    layer: featureLayer,
    view,
    field1: {
        field: 'HSE_UNITS',
    },
    field2: {
        field: 'VACANT',
    },
});
featureLayer.renderer = renderer;

documentation에 따라 관계를 시각화하는 데 관심이 있는 두 필드를 제공해야 합니다. 그런 다음 반환된 렌더러를 레이어에 할당할 수 있습니다.

그런 다음 마지막으로 좋은 규모와 매혹적인 시각화를 결정하기 위해 모든 수고를 겪었습니다. 적절한 팝업으로 칭찬해야 합니다!

import { getTemplates } from '@arcgis/core/smartMapping/popup/templates';

const { primaryTemplate } = await getTemplates({
    layer: featureLayer,
});

featureLayer.popupTemplate = primaryTemplate.value;
featureLayer.popupTemplate.title = primaryTemplate.title;

templates 도우미는 사용 중인 렌더러에 따라 팝업의 최상의 형식을 결정합니다. 이는 응용 프로그램에서 정보를 전달하려고 할 때 일반 테이블 기반 팝업에서 벗어날 수 있도록 매우 유용합니다!

그리고 당신은 간다! 자체 애플리케이션에서 스마트 매핑 사용을 자동화하는 데 도움이 되는 기본적이면서도 효과적인 워크플로우입니다. 모든 매핑 앱에서 멋진 시각화를 볼 수 있기를 기대합니다!

아래 영상에서 자세히 보실 수 있습니다!