입문

이 보도는 《Vue.js와 amCharts4를 사용하여 지도 표시》의 속편이다.
지난번 보도에서 포기하고 지도의 일부만 표시하고 배제하는 방법을 썼다.
프로젝트의 제작 방법과 App.vue의 설정은 이전 문장과 같습니다.

항목 만들기

# プロジェクト作成
$ vue create sample-map
$ cd sample-map
# amchartsインストール
$ yarn add @amcharts/amcharts4
$ yarn add @amcharts/amcharts4-geodata
# サーバー起動
$ yarn serve

일본 지도 표시

App.vue

<template>
  <div id="chartdiv"></div>
</template>

<script>
import * as am4core from "@amcharts/amcharts4/core"
import * as am4maps from "@amcharts/amcharts4/maps"
// 日本地図のgeodataを取得
import am4geodata_japanLow from "@amcharts/amcharts4-geodata/japanHigh"

export default {
  mounted () {
    let map = am4core.create("chartdiv", am4maps.MapChart)
    map.geodata = am4geodata_japanLow
    map.projection = new am4maps.projections.Miller()
    var polygonSeries = map.series.push(new am4maps.MapPolygonSeries())
    polygonSeries.useGeodata = true
  },
  beforeDestroy () {
    if (this.map) {
      this.map.dispose()
    }
  }
}
</script>
<style scoped>
#chartdiv {
  width: 100%;
  height: 600px;
}
</style>

지도의 일부분만 보이기

다각형 시리즈를 비추는 include 도도부현ISO 코드을 지정하면 이 지역만 표시할 수 있다.
이번에 규슈의 ISO 코드를 지정했습니다.

polygonSeries.include = [
  "JP-40",
  "JP-41",
  "JP-42",
  "JP-43",
  "JP-44",
  "JP-45",
  "JP-46",
  "JP-47",
]

App.vue
App.vue

<template>
  <div id="chartdiv"></div>
</template>

<script>
import * as am4core from "@amcharts/amcharts4/core"
import * as am4maps from "@amcharts/amcharts4/maps"
// 日本地図のgeodataを取得
import am4geodata_japanLow from "@amcharts/amcharts4-geodata/japanHigh"

export default {
  mounted () {
    let map = am4core.create("chartdiv", am4maps.MapChart)
    map.geodata = am4geodata_japanLow
    map.projection = new am4maps.projections.Miller()
    var polygonSeries = map.series.push(new am4maps.MapPolygonSeries())
    polygonSeries.useGeodata = true
    polygonSeries.include = [
      "JP-40",
      "JP-41",
      "JP-42",
      "JP-43",
      "JP-44",
      "JP-45",
      "JP-46",
      "JP-47",
    ]
  },
  beforeDestroy () {
    if (this.map) {
      this.map.dispose()
    }
  }
}
</script>
<style scoped>
#chartdiv {
  width: 100%;
  height: 600px;
}
</style>

지도의 일부분만 배제

아까와는 반대로 구주를 배제하고 싶다!수요
규슈 이외의 ISO 코드를 include로 지정함으로써 실현할 수 있지만 번거롭다.
이럴 때 쓴다exclude.

polygonSeries.exclude = [
  "JP-40",
  "JP-41",
  "JP-42",
  "JP-43",
  "JP-44",
  "JP-45",
  "JP-46",
  "JP-47",
]

App.vue
App.vue

<template>
  <div id="chartdiv"></div>
</template>

<script>
import * as am4core from "@amcharts/amcharts4/core"
import * as am4maps from "@amcharts/amcharts4/maps"
// 日本地図のgeodataを取得
import am4geodata_japanLow from "@amcharts/amcharts4-geodata/japanHigh"

export default {
  mounted () {
    let map = am4core.create("chartdiv", am4maps.MapChart)
    map.geodata = am4geodata_japanLow
    map.projection = new am4maps.projections.Miller()
    var polygonSeries = map.series.push(new am4maps.MapPolygonSeries())
    polygonSeries.useGeodata = true
    polygonSeries.exclude = [
      "JP-40",
      "JP-41",
      "JP-42",
      "JP-43",
      "JP-44",
      "JP-45",
      "JP-46",
      "JP-47",
    ]
  },
  beforeDestroy () {
    if (this.map) {
      this.map.dispose()
    }
  }
}
</script>
<style scoped>
#chartdiv {
  width: 100%;
  height: 600px;
}
</style>

끝내다

일본어든 영어든 참고 문헌을 거의 찾지 못해 지도의 일부분만 표시하고 배제하는 방법을 써 보았다.
지난 기사부터 반년이 지났는데 일본에서 유행하는 느낌이 전혀 없네요 (~_~
정부의 샘플이 너무 높아서 참고할 수 없습니다. 이것은 병목일 수 있습니다.
만약 더 좋아한다면, 나는 세 번째 부분을 쓰고 싶다.