Vue.jsとamCharts 4を使って地図を表示する パート2

はじめに

この記事は「Vue.jsとamCharts 4を使って地図を表示する」の続編です。
前回の記事で断念した、地図の一部のみを表示・除外する方法を書いていきます。

プロジェクトの作成方法や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>

地図の一部のみを表示する

MapPolygonSeriesの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>

おわり

日本語・英語問わずほとんど参考文献の見つからない、地図の一部のみを表示・除外する方法を書いてみました。
前回の記事から半年経ちますが、日本で流行ってる感じは全くしませんね(~_~;)
公式のサンプルがハイレベルすぎて参考にならないのがネックなのかもしれません。
また気が向いたらパート3を書こうと思います。