ArcGIS JavaScript를 사용한 비닝 소개

무슨 쓰레기통?

ArcGIS API for JavaScript에는 featureReduction이라는 레이어 옵션이 있습니다. 최근까지 이를 사용하여 애플리케이션의 기능을 정의clusters할 수 있었습니다. FeatureReduction은 맵에 데이터를 시각적으로 요약하는 방법입니다. 클러스터의 경우 이는 클러스터의 기능 양이 클러스터의 크기를 결정함을 의미합니다. 최근에 API는 기능 사용binning for FeatureReduction을 도입했습니다. 비닝에 대한 자세한 내용은 this blog post을 읽어 보시기 바랍니다!

Here is a codepen of the sample used in this post.

내 기능에 비닝 추가

많은 기능을 사용하여 시연하고 싶을 때 사용하고 싶은 this webmap이 있습니다. 200만 포인트가 넘는 서비스라 꽤 괜찮은 테스트 맵이자 레이어입니다. 가장 먼저 할 일은 빈 수준을 정의하는 것입니다.

const layer = new FeatureLayer({
    portalItem,
    featureReduction: {
        type: "binning",
        fixedBinLevel: 4
    }
});

fixedBinLevel 은 확대 및 축소 정도에 관계없이 빈을 동일한 크기로 유지합니다. 데이터 세트 및 사용하려는 규모에 따라 약간의 조정이 필요할 수 있지만 좋은 수준을 찾으면 모든 준비가 된 것입니다.

FeatureReduction 렌더러

일반적으로 수행하는 첫 번째 작업 중 하나는 빈에 대한 통계를 설정할 수 있는 aggregateFields 을 설정하는 것입니다. 내 서비스에는 실제로 사용할 수 있는 숫자 필드가 없으므로 설정하지 않겠지만 이것은 시각화를 위해 데이터를 집계하는 좋은 방법입니다. 기본적으로 저장소에는 사용할 수 있는 aggregateCount 필드가 있습니다.

const layer = new FeatureLayer({
    portalItem,
    featureReduction: {
        type: "binning",
        fixedBinLevel: 4,
        renderer: {
            type: "simple",
            symbol: {
                type: "simple-fill",
                color: [0, 255, 71, 1],
                outline: null,
                outline: {
                    color: "rgba(153, 31, 23, 0.3)",
                    width: 0.3
                }
            },
            visualVariables: [
                {
                    type: "color",
                    field: "aggregateCount",
                    legendOptions: {
                        title: "Number of Places"
                    },
                    stops: [
                        { value: 0, color: "#d7e1ee" },
                        { value: 25, color: "#cbd6e4" },
                        { value: 75, color: "#b3bfd1" },
                        { value: 200, color: "#c86558" },
                        { value: 300, color: "#991f17" }
                    ]
                }
            ]
        }
    }
});

좋아, 그래서 이 렌더러에서 빈에 있는 피처의 양에 따라 빈 색상을 정의할 몇 가지visual variables를 설정했습니다. 이러한 모든 속성은 레이어 자체의 루트가 아니라 레이어의 featureReduction의 일부입니다.

라벨 추가

저장소에 대한 렌더러를 정의할 수 있을 뿐만 아니라 레이블을 정의할 수 있습니다! 그래도 바빠질 수 있기 때문에 전환하고 싶은 것일 수 있습니다. 빈 레이블을 신중하게 사용하십시오.

labelingInfo: [
    new LabelClass({
        minScale: 0,
        maxScale: 0,
        deconflictionStrategy: "none",
        symbol: {
            type: "text",
            color: "white",
            font: {
                family: "Noto Sans",
                size: 10,
            },
            haloColor: "gray",
            haloSize: 0.5,
        },
        labelExpressionInfo: {
            expression: "Text($feature.aggregateCount, '#,###')",
        },
    }),
]

레이블의 집계 필드"Text($feature.aggregateCount, '#,###')",에 아케이드 식을 사용할 수 있습니다. 아케이드의 경우 $feature는 비닝된 기능을 나타냅니다. 소스 기능이 아닙니다.

색상 램프

ArcGIS API for JavaScript 문서에서 매우 멋진 기능을 다루고 싶습니다. 그것은 Esri Color Ramps 입니다. 나는 당신에 대해 잘 모르지만 시각적 변수를 위해 손으로 만든 장인의 색상 램프를 만들 수 있는 기술이 정확히 없습니다. 멋진 점은 색상 램프를 탐색하고 유형 및 색 구성표별로 필터링한 다음 16진수 값에 대한 멋진 복사 버튼을 제공한다는 것입니다. 가장 좋은 부분? 복사 버튼은 애플리케이션에 바로 붙여넣을 수 있는 클립보드에 JavaScript 스니펫을 추가합니다!

// #48385f|#995375|#db4a5b|#fc9a59|#fee086
const colors = ["#48385f", "#995375", "#db4a5b", "#fc9a59", "#fee086"];

이제 시각적 변수를 업데이트하여 사용할 수 있습니다!

visualVariables: [
    {
        type: "color",
        field: "aggregateCount",
        legendOptions: {
            title: "Number of Places",
        },
        stops: [
            { value: 0, color: colors[4] },
            { value: 25, color: colors[3] },
            { value: 75, color: colors[2] },
            { value: 200, color: colors[1] },
            { value: 500, color: colors[0] },
        ],
    },
],

저것 봐! 정류장이 더 있습니까? 정류장이 적습니까? 색상 램프를 필터링하여 필요에 맞는 것을 찾을 수 있습니다!

요약

기능 축소 및 데이터 집계를 위해 저장소를 사용하는 것은 더 큰 데이터 세트를 시각화하는 좋은 방법입니다. 시각적으로 많은 양의 포인트는 원하는 스토리를 전달하지 못할 수 있습니다. 범주화 및 클러스터와 같은 도구, 특히 집계 필드가 있는 도구는 데이터를 돋보이게 하는 맵과 앱을 만드는 데 도움이 될 수 있습니다!

아래에서 이 주제에 대한 비디오를 볼 수 있습니다!