ASP.NET Core MVC에서 국가 GDP 등치 지역도를 빌드하는 방법
페이지 정보
작성자 GrapeCity
작성일 2021-10-21 14:45 조회 3,654회
댓글 0건
본문
관련링크
미국과 여러 주의 GDP를 시각화한다고 가정해 봅시다. 각 주가 나타내는 GDP 데이터를 기준으로 해당 주에 색이 지정되는 등치 지역도를 사용하여 이 데이터를 표시할 수 있습니다.
다음은 예제입니다.
GDP 지역도를 만드는 방법을 살펴보기 전에 GDP 지역도를 만드는 데 사용할 FlexMap 기능 목록을 확인합니다.
GeoMapLayer
ColorScale
도구 설명
범례
ScatterMapLayer
GeoGridLayer
GeoMapLayer
GeoMapLayer는 제공된 지리 데이터를 사용하여 지역도를 표시하는 데 사용됩니다.
지역도에 다음 코드를 추가합니다.
<script>
function itemsSourceChanged(s, e) {
var flexmap = wijmo.Control.getControl("#flexmap");
// zoom Map to fit in the box
flexmap.zoomTo(s.getGeoBBox());
}
</script>
<c1-flex-map id="flexmap" header="US GDP for 2021" height="500px" width="1000px">
<c1-geo-map-layer url="./content/US.json" items-source-changed="itemsSourceChanged">
</c1-geo-map-layer>
</c1-flex-map>
ColorScale
ColorScale은 FlexMap의 값을 색으로 변환합니다. ColorScale binding 속성에서는 메서드가 get() 메서드를 사용하여 Map() 클래스 인스턴스의 키에 대한 값을 가져와야 합니다. 이 데이터는 맵 인스턴스의 set() 메서드를 사용하여 설정됩니다.
<script>
var map = new Map();
var data = @Html.Raw(Json.Serialize(Model));
data.forEach(el => map.set(el.state, parseFloat(el.y2021)));
function getMapData(obj) {
return map.get(obj.properties.name);
}
</script>
<c1-flex-map id="flexmap" header="US GDP for 2021" height="500px" width="1000px">
<c1-geo-map-layer url="./content/US.json" items-source-changed="itemsSourceChanged">
<c1-color-scale colors="Palettes.Diverging.RdYlGn" format="c2" binding="getMapData">
</c1-color-scale>
</c1-geo-map-layer>
</c1-flex-map>도구 설명
도구 설명은 데이터 시각화 컨트롤의 강력한 기능으로, 대상 지점이나 영역의 정보를 표시하는 데 사용됩니다. FlexMap에서는 콘텐츠가 필요한 정보를 표시할 수 없는 경우 팝업 이벤트 처리기를 사용하여 도구 설명을 표시할 수 있습니다.
<script>
function getMapTooltip(tip) {
return `${tip.name} - $${map.get(tip.name)}`;
}
function onOpenTooltip(s, e) {
if (!wijmo.isFunction(s.content)) {
s.content = getMapTooltip;
e.cancel = true;
}
}
</script>
<c1-flex-map id="flexmap" header="US GDP for 2021" height="500px" width="1000px">
<c1-flex-chart-tooltip show-delay="5" content="{name}" popup="onOpenTooltip"></c1-flex-chart-tooltip>
...
</c1-flex-map>범례
범례는 지정된 ColorScale 색과 함께 범위로 표시됩니다. FlexMap에 색 값을 표시하는 동안 범례에 색이 선형 그라데이션으로 표시됩니다.
<c1-flex-map id="flexmap" header="US GDP for 2021" height="500px" width="1000px"> <c1-chart-legend position="Bottom"></c1-chart-legend> …. </c1-flex-map>
ColorScale binding에서는 Map 개체가 함수와 함께 사용되어 지정된 위치의 키 값을 검색합니다. 따라서 FlexMap 데이터를 업데이트하기 위해 또 다른 함수를 사용하여 지역도에 표시할 다른 데이터를 가져오겠습니다. 그런 다음, Control.invalidate(true) 메서드를 호출하여 새 데이터로 FlexMap을 다시 렌더링해야 합니다.
이 예제에서는 미국의 3년간 GDP 데이터를 FlexMap에 표시합니다. 각 연도의 지역도 인스턴스 3개와 각 연도의 값을 검색할 개별 함수 3개가 표시됩니다.
함수는 해당 연도의 데이터를 표시하기 위해 ColorScale.binding에서 호출됩니다. 함수를 호출한 후 flexmap.invalidate(true) 메서드를 호출합니다.
<script>
var data = @Html.Raw(Json.Serialize(Model));
var map2021 = new Map();
var map2020 = new Map();
var map2019 = new Map();
data.forEach(el => map2021.set(el.state, parseFloat(el.y2021)));
data.forEach(el => map2020.set(el.state, parseFloat(el.y2020)));
data.forEach(el => map2019.set(el.state, parseFloat(el.y2019)));
function getGDPYear2021(obj) {
return map2021.get(obj.properties.name);
}
function getGDPYear2020(obj) {
return map2020.get(obj.properties.name);
}
function getGDPYear2019(obj) {
return map2019.get(obj.properties.name);
}
var year = 2021;
function getMapTooltip(tip) {
return `${tip.name} - $${data.find(x => x.state == tip.name)['y'+year]}`;
}
function showGDP2021() {
year = 2021;
flexmap.header = "US GDP for " + year;
var colorscale = flexmap.layers[0].colorScale;
colorscale.binding = getGDPYear2021.bind(this);
flexmap.invalidate(true);
}
function showGDP2020() {
year = 2020;
flexmap.header = "US GDP for " + year;
var colorscale = flexmap.layers[0].colorScale;
colorscale.binding = getGDPYear2020.bind(this);
flexmap.invalidate(true);
}
function showGDP2019() {
year = 2019;
flexmap.header = "US GDP for " + year;
var colorscale = flexmap.layers[0].colorScale;
colorscale.binding = getGDPYear2019.bind(this);
flexmap.invalidate(true);
}
</script>
ScatterMapLayer
ScatterMapLayer는 정보를 점선 형태로 표시하는 데 사용됩니다. 이렇게 하려면 JSON이 다음 속성으로 구성되어야 합니다.
X: 좌표 x
Y: 좌표 y
GDP: 값(거품 크기)
위 속성과 함께 추가 속성을 제공하여 도구 설명으로 정보를 표시할 수 있습니다. 위 속성을 “X,Y,GDP”와 같이 쉼표(,)로 구분해서 바인딩으로 사용합니다.
데모 샘플과 코드 조각은 을 참조하십시오.
GeoGridLayer
GeoGridLayer는 위치 좌표를 표시하는 데 사용됩니다. 좌표는 위치의 위도와 경도입니다.
<c1-flex-map id="flexmap" header="US GDP for 2021" height="500px" width="1000px"> … <c1-geo-grid-layer ></c1-geo-grid-layer> </c1-flex-map>
지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
