Xamarin 애플리케이션에서 Choropleth 매핑을 만드는 방법

Achoropleth map는 특수한 유형의 지리지도로서 그 중에서 구역은 이 구역의 데이터에 따라 색깔로 돋보인다.그것들은 시각화된 데이터의 지역 모델에 적용된다.값이 높을수록 영역의 색상이 짙어집니다.이것은 데이터의 추세를 신속하게 파악하는 데 도움이 될 것이다.이 블로그 글에서, 나는 Syncfusion Xamarin Maps 컨트롤을 사용하여choropleth 지도를 쉽게 만드는 방법을 설명할 것이다.
choropleth 지도는 한 구역 내의 데이터와 한 지리 구역 내의 변화 상황이나 구역 내의 변화 정도를 완벽하게 나타낼 수 있다.인구 밀도, 코로나 환자, GDP 증가, 선거 결과, 평균 강우량, 식자율, 날씨 등 인근 지역에 비해 한 지역의 데이터를 보여주는 데 쓰인다.

Xamarin 맵 모양 레이어에 choropleth 맵 추가

우리는 세계 인구 밀도를 나타내기 위해 조로페스 지도를 만들 것이다.이를 위해, 우리는 먼저 기본적인 세계지도를 과장해야 한다.
기본 단어 매핑이 포함된 모양 레이어를 사용하여 Xamarin Maps 컨트롤의 인스턴스를 만듭니다.Dell 문서getting started with Xamarin Maps를 참조하십시오.

<sfmaps:SfMaps >
  <sfmaps:SfMaps.Layers>
     <sfmaps:ShapeFileLayer Uri="world-map.shp">
     </sfmaps:ShapeFileLayer>
  </sfmaps:SfMaps.Layers>
</sfmaps:SfMaps>

Xamarin Maps 컨트롤을 사용하여 기본 세계 지도 렌더링
참고: Xamarin Maps 컨트롤의 레이블 기능을 사용하여 choropleth 맵에 제목을 추가할 수 있습니다.

데이터를 채우고 맵에 링크

그리고 우리는 세계 인구밀도 데이터를 그려야 한다.다음 코드 예시와 같이 모델을 정의하고 모델 데이터를 봅시다.

public class ViewModel
    {
        public ObservableCollection<CountryDensityModel> WorldPopulationDensityDetails { get; set; }
        public ViewModel()
        {
            WorldPopulationDensityDetails = new ObservableCollection<CountryDensityModel>();
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Taiwan", 672));
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Bangladesh", 1265));
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Israel", 400));
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Tuvalu", 393));
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Belgium", 382));
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Curacao", 369));
            WorldPopulationDensityDetails.Add(new CountryDensityModel("Philippines", 367));
            …
            …
            …
        }
    }
    public class CountryDensityModel
    {
        public CountryDensityModel(string countryName, double density)
        {
            this.CountryName = countryName;
            this.Density = density;
        }

        public string CountryName { get; set; }
        public double Density { get; set; }
    }

다음에 채워진 데이터 원본을 지도의 ItemsSource 속성에 분배합니다.또한 ShapeIDTableField와 ShapeIDPath 속성 링크 모양 파일과 채워진 데이터를 각각 사용한다.
다음 코드를 참조하십시오.

<sfmaps:SfMaps >
  <sfmaps:SfMaps.Layers>
     <sfmaps:ShapeFileLayer Uri="world-map.shp" ItemsSource="{Binding WorldPopulationDensityDetails}" ShapeIDTableField="name" ShapeIDPath="CountryName">
     </sfmaps:ShapeFileLayer>
  </sfmaps:SfMaps.Layers>
</sfmaps:SfMaps>

영역에 색상 적용

현재, 우리는 Syncfusion Xamarin 지도를 사용하여choropleth 지도를 만드는 기본적인 요구를 실현했다.모든 국가의 데이터 항목에는 국가 명칭과 인구 밀도가 있다.
이제 각 국가의 밀도 값을 반환하고 ShapeSetting의 ShapeColorValuePath 속성에 매핑합니다.
다음 코드를 참조하십시오.

<sfmaps:ShapeFileLayer Uri="world-map.shp" ItemsSource="{Binding WorldPopulationDensityDetails}" ShapeIDTableField="name" ShapeIDPath="CountryName" >
  <sfmaps:ShapeFileLayer.ShapeSettings>
      <sfmaps:ShapeSetting ShapeColorValuePath="Density" >
      </sfmaps:ShapeSetting>
  </sfmaps:ShapeFileLayer.ShapeSettings>
</sfmaps:SfMaps.Layers>

이제 영역의 밀도 값과 그 하락 범위에 따라 색상이 적용됩니다.예를 들어, 밀도가 100~200이면 영역이 연한 색으로 표시되고, 밀도가 201~300이면 영역이 진한 색으로 표시됩니다.이 지침을 설정하려면 RangeColorMapping을 사용하십시오.
다음 코드를 참조하십시오.

<sfmaps:SfMaps >
 <sfmaps:SfMaps.Layers>
   <sfmaps:ShapeFileLayer Uri="world-map.shp" ItemsSource="{Binding WorldPopulationDensityDetails}" ShapeIDTableField="name" ShapeIDPath="CountryName" >
     <sfmaps:ShapeFileLayer.ShapeSettings>
       <sfmaps:ShapeSetting ShapeColorValuePath="Density" >
         <sfmaps:ShapeSetting.ColorMappings>
           <sfmaps:RangeColorMapping From="0" To="25" Color="#dfa9fe" LegendLabel="0 - 25" />
           <sfmaps:RangeColorMapping From="25" To="75" Color="#bd4efd" LegendLabel="25 - 75" />
           <sfmaps:RangeColorMapping From="75" To="150" Color="#a611fc" LegendLabel="75 - 150" />
           <sfmaps:RangeColorMapping From="150" To="400" Color="#9703ec" LegendLabel="150 - 400"/>
           <sfmaps:RangeColorMapping From="400" To="50000" Color="#7002b0" LegendLabel=">400"/>
         </sfmaps:ShapeSetting.ColorMappings>
       </sfmaps:ShapeSetting>
     </sfmaps:ShapeFileLayer.ShapeSettings>                      
   </sfmaps:ShapeFileLayer>
 </sfmaps:SfMaps.Layers>
</sfmaps:SfMaps>

Xamarin 응용 프로그램에서 Choropleth 맵에 색상 적용
정확한 값을 기준으로 색상을 적용할 수도 있습니다.예를 들어 빨간색은 100, 노란색은 200 등등이다. 이것은 Xamarin 지도에서 색을 비추는 또 다른 방식이다.
참고: 자세한 내용은 equal color mapping in Xamarin Maps를 참조하십시오.

범례 추가

그림은 색과 짧은 문자를 사용하여 지도에 그려진 데이터를 선명하게 보여 줍니다.이것은 데이터의 시각화를 더욱 개선하고,choropleth 지도에서 데이터의 추세를 쉽게 이해할 수 있도록 도와줄 것이다.
모양 파일 레이어의 LegendSettings를 사용하여 범례를 추가하고 LegendPosition 특성을 사용하여 범례를 배치할 수 있습니다.
다음 코드를 참고하여choropleth지도에 도례를 추가합니다.

<sfmaps:SfMaps >
 <sfmaps:SfMaps.Layers>
   <sfmaps:ShapeFileLayer Uri="world-map.shp" ItemsSource="{Binding WorldPopulationDensityDetails}" ShapeIDTableField="name" ShapeIDPath="CountryName" >
     <sfmaps:ShapeFileLayer.ShapeSettings>
        <sfmaps:ShapeSetting ShapeColorValuePath="Density" >
            <sfmaps:ShapeSetting.ColorMappings>
               <sfmaps:RangeColorMapping From="0" To="25" Color="#dfa9fe" LegendLabel="0 - 25" />
               <sfmaps:RangeColorMapping From="25" To="75" Color="#bd4efd" LegendLabel="25 - 75" />
               <sfmaps:RangeColorMapping From="75" To="150" Color="#a611fc" LegendLabel="75 - 150" />
               <sfmaps:RangeColorMapping From="150" To="400" Color="#9703ec" LegendLabel="150 - 400"/>
               <sfmaps:RangeColorMapping From="400" To="50000" Color="#7002b0" LegendLabel=">400"/>
            </sfmaps:ShapeSetting.ColorMappings>
          </sfmaps:ShapeSetting>
        </sfmaps:ShapeFileLayer.ShapeSettings>
        <sfmaps:ShapeFileLayer.LegendSettings>
           <sfmaps:MapLegendSetting ShowLegend="True" LegendPosition="50,90" />
      </sfmaps:ShapeFileLayer.LegendSettings>
   </sfmaps:ShapeFileLayer>
 </sfmaps:SfMaps.Layers>
</sfmaps:SfMaps>

Xamarin 애플리케이션에 Choropleth 맵에 범례 추가

GitHub 참조

당신은 Display Choropleth Maps using Xamarin Maps demo에서 완전한 견본을 얻을 수 있습니다.

결론

읽어주셔서 감사합니다!이 블로그에서는 SyncfusionXamarin Maps 컨트롤을 사용하여choropleth 스티커를 쉽게 만드는 법을 배웠습니다.그것으로 너는 데이터의 추세를 쉽게 시각화할 수 있다.따라서 본 블로그에서 제공한 설명을 시도해 보시고 아래의 평론 부분에서 귀하의 경력을 알려주십시오.
당신은 우리의 Xamarin 지도 완전판user guide과 시연판GitHub location을 조회할 수 있습니다.또한 프레젠테이션 어플리케이션을 Google Play 및 Microsoft Store에서 다운로드할 수 있습니다.
저희support forums, Direct-Trac 또는 feedback portal를 통해서도 저희에게 연락하실 수 있습니다.우리는 언제든지 기꺼이 당신을 돕겠습니다!

관련 블로그

OpenStreetMap, Bing Maps in Xamarin App with Maps