2021年4月21日（水）にリリースした「Wijmo（ウィジモ）」の最新バージョン「2021J v1」では、地理空間データを可視化できるコントロール「FlexMap」をベータ版として提供しています。
前回の記事では、オープンデータの地図データをFlexMapで使用する方法をご紹介しました。
FlexMapには前回紹介した地図情報を表示する「GeoMapLayer」の他にも、位置情報をプロットする「ScatterMapLayer」というレイヤーが存在します。このScatterMapLayerを使うことで、散布図マップやバブルマップといったデータ分析に役立つ地図を作成することができます。
今回の記事では、ScatterMapLayerを使用して、前回作成した宮城県の地図の上に東北新幹線の停車駅の位置情報をプロットして、散布図マップを作成してみたいと思います。
プロットするデータの作成
前回ご紹介した通り、FlexMapではGeoJSON形式のデータを使用して地図を表示しますが、ScatterMapLayerでは地理座標（緯度、経度）の配列を含むJSON形式のデータで位置情報を定義します（GeoJSON形式のデータは使用できません）。
地理座標の情報は「Google マップ」などから調べることも可能ですが、前回同様、国土地理院の国土数値情報データから取得することもできます。今回は「鉄道データ」から宮城県の新幹線の停車駅の情報を使用したいと思います。
ダウンロードしたファイルを解凍し、中に含まれる「N02-19_Station.geojson」をエディタ等で開き、東北新幹線の停車駅の位置情報を取得します。駅の位置情報は「LineString」の形式で定義されており、正確には直線で地図上に表現されますが、今回はこのうち1点のみの位置情報を使用したいと思います。
今回は宮城県の東北新幹線停車駅の情報のみをピックアップし、以下のように「miyagi-station-data.json」として保存します。
[
{
"coordinates": "140.96747,38.56948",
"stationName": "古川"
},
{
"coordinates": "141.07157, 38.74885 ",
"stationName": "くりこま高原"
},
{
"coordinates": "140.88181,38.25865",
"stationName": "仙台"
},
{
"coordinates": "140.63377,37.99595",
"stationName": "白石蔵王"
}
]作成したファイルは、前回の記事で作成したプロジェクトの中の「src/data」フォルダ配下に保存します。
FlexMapへの設定
JSONファイルを配置したら、「src/index.js」の中身を以下のように変更します。
import "@grapecity/wijmo.styles/wijmo.scss";
import "@grapecity/wijmo.cultures/wijmo.culture.ja";
import { FlexMap, GeoMapLayer , ScatterMapLayer} from "@grapecity/wijmo.chart.map";
import data from "./data/N03-20_04_200101.json";
//jsonData
import scatterJsonData from "./data/miyagi-station-data.json";
let geoMapLayer = new GeoMapLayer({
style: { fill: "rgba(200,200,200,1)" },
itemsSource: data
});
let scatterMapLayer = new ScatterMapLayer({
itemsSource: scatterJsonData,
style: {
fill: "rgba(10,10,10,1)"
},
binding: "coordinates",
symbolSize: 10
});
let map = new FlexMap("#map", {
header: "宮城県の新幹線停車駅",
layers: [geoMapLayer, scatterMapLayer],
tooltip: { content: "{stationName}" }
});
map.zoomTo(geoMapLayer.getGeoBBox());以上で設定は完了です。以下のコマンドを実行し、プロジェクトをビルドします。
> npm run buildビルドが完了したら、ローカル環境で動作を確認します。今回はVisual Studioの拡張機能「Live Server」を使用します。「dist」フォルダ配下に作成された「index.html」を右クリックし「Open with Live Server」を実行します。
ブラウザが起動し、ページ内のFlexMap上に宮城県の地図とともに、東北新幹線の停車駅がプロットされます。もちろんカーソルをあてた時にツールチップも表示できます。
地図の外観のカスタマイズ
FlexMapでは、地図やプロットするマーカー（シンボル）の外観をカスタマイズできます。以下の例では「src/index.js」ファイルのGeoMapLayerの「style」プロパティの「fill」と「stroke」の項目で、地図と市町村の境界線の色をカスタマイズしています。
同様に、ScatterMapLayerでは「style」プロパティの「fill」、「stroke」、「strokeWidth」でマーカーと罫線の色と太さ、「symbolSize」プロパティでマーカー自体のサイズをカスタマイズしています。
・・・（中略）
let geoMapLayer = new GeoMapLayer({
style: {
fill: "rgba(155,212,163,1)" , stroke: 'white'
},
itemsSource: data
});
let scatterMapLayer = new ScatterMapLayer({
itemsSource: scatterJsonData,
style: {
fill: "rgba(252,190,193,1)", stroke: 'red', strokeWidth: 2
},
binding: "coordinates",
symbolSize: 30
});
・・・（中略）
さいごに
以上がFlexMapのScatterMapLayerを使用して散布図マップを作成する方法でした。
製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。