![ステップ２
• Canvasへのポリラインの描画
– javafx.scene.canvas.GraphicsContext
public void strokePolyline(
double[] xPoints, double[] yPoints, int nPoints
);
なお、javafx.scene.shape.Polyline は、1つの配列で
x,yを取るのでAPIにインピーダンスミスマッチがある
Polyline polyline = new Polilyne(
0, 0, // (x1, y1)
10, 100, // (x2, y2)
20, 400, // (x3, y3)
);](https://image.slidesharecdn.com/javafx7-161203090344/85/JJUG-CCC-2016-Fall-World-is-not-a-square-rendering-world-coastline-map-with-Java-JavaFX-shapefile-reader-and-proj4J-43-320.jpg)
![ステップ２
• 独自クラス TinyMapPolyline を作成
public class TinyMapPolyline {
private final double[] xArray;
private final double[] yArray;
public double[] getXArray() {
return xArray;
}
public double[] getYArray() {
return yArray;
}
:
X座標の値の配列
Y座標の値の配列
で表現](https://image.slidesharecdn.com/javafx7-161203090344/85/JJUG-CCC-2016-Fall-World-is-not-a-square-rendering-world-coastline-map-with-Java-JavaFX-shapefile-reader-and-proj4J-44-320.jpg)
![ステップ４
• ポリライン読み込み処理
TinyMapPolyline createMapPolyline(PolylineShape shape, int part) {
PointData[] gcsPoints = shape.getPointsOfPart(part);
double[] xArray = new double[gcsPoints.length];
double[] yArray = new double[gcsPoints.length];
for (int i = 0; i < gcsPoints.length; i++) {
Point2D pcsPoint = projection.apply(gcsPoints[i]);
xArray[i] = pcsPoint.getX();
yArray[i] = pcsPoint.getY();
}
return new TinyMapPolyline(xArray, yArray);
}
x, y座標値の配列へ
の詰め込み
// 緯度経度をmに単純変換する投影
projection = p -> new Point2D(
p.getX() * 100_000,
p.getY() * 100_000
);](https://image.slidesharecdn.com/javafx7-161203090344/85/JJUG-CCC-2016-Fall-World-is-not-a-square-rendering-world-coastline-map-with-Java-JavaFX-shapefile-reader-and-proj4J-63-320.jpg)
![ステップ５.0
• サンソン図法の変換を自前で実装
public static final double R = 6_371_007.181; // 地球真球半径[m]
private Function<PointData, Point2D> sansonProjection = p -> {
double radX = Math.toRadians(p.getX());
double radY = Math.toRadians(p.getY());
double sx = R * radX * Math.cos(radY);
double sy = R * radY;
return new Point2D(sx, sy);
};](https://image.slidesharecdn.com/javafx7-161203090344/85/JJUG-CCC-2016-Fall-World-is-not-a-square-rendering-world-coastline-map-with-Java-JavaFX-shapefile-reader-and-proj4J-67-320.jpg)
JJUG CCC 2016 Fall: World is not a square, rendering world coastline map with Java, JavaFX, shapefile reader and proj4J.
- 1. 世界は四角ではない ～JavaFXで地図を描く～ JJUG CCC Fall 2016 #ccc_e2 高橋 徹
- 2. 高橋 徹の自己紹介 – コミュニティ活動 http://www.javareading.com/bof/ 毎月1回読書会開催中 次回12/17 – ブログ等 • http://www.torutk.com • http://d.hatena.ne.jp/torutk/ • Twitter @boochnich 2016-12～ 2016-09～11
- 3. アジェンダ 1. 地図の歪み 2. 地図投影の原理 3. JavaFXで投影地図を描く
- 4. アジェンダ 1. 地図の歪み 2. 地図投影の原理 3. JavaFXで投影地図を描く
- 5. この素晴らしい世界に祝福を • インターネットで簡単に地図を利用 1. 手に取って 2. タップして 3. しゃべって の3ステップでOK 地図データ: Google
- 6. だがしかし • 世界全体を表示してみると‥‥ 1. 四角い 2. 北と南が巨大化 3. 南北端が切り捨て メルカトル図法で 投影した地図 地図データ: Google
- 8. 地図に面積を求めるのは間違って いるのだろうか 3) インド 2) カザフスタン 1) アラスカ 問題）面積の大きい順 に並べると？ A: 1) > 2) > 3) B: 3) > 2) > 1)
- 9. 地図に面積を求めるのは間違って いるのだろうか 3) インド 2) カザフスタン 1) アラスカ 問題）面積の大きい順 に並べると？ A: 1) > 2) > 3) B: 3) > 2) > 1)
- 10. 地図に面積を求めるのは間違って いるのだろうか 3) インド 2) カザフスタン1) アラスカ グード図法で投影した世界地図、正積図法
- 11. 地図に面積を求めるのは間違って いるのだろうか 国・州名 メルカトル図法 グード図法 統計データ 1) アラスカ州 781万 km2 142万 km2 172万km2 2) カザフスタン 639万 km2 284万 km2 282万km2 3) インド 377万 km2 317万 km2 329万km2 投影法により投影された地図上の面積 問題）面積の大きい順に並べると？ A: 1) > 2) > 3) B: 3) > 2) > 1)
- 14. アジェンダ 1. 地図の歪み 2. 地図投影の原理 3. JavaFXで投影地図を描く
- 15. Re:ゼロから始める地図投影 • 地球上の位置の表現（緯度経度） グリニッジ子午線 赤道 経度λ 緯度φ 「準拠回転楕円体」 GRS80 WGS84 長半径 6,378,137m 6,378,137m 短半径 6,356,752.31414m 6,356,752.314245m
- 16. Re:ゼロから始める地図投影 • 緯度経度の点を平面座標の点に変換 x = f(λ, φ) y = g(λ, φ) 点（λ, φ） 点（ｘ, ｙ） 変換には何らかの歪みが生じる。 • 面積比を維持：正積図法 • 角度を維持： 正角図法 • 距離をある点で維持†1：正距図法 • 方位をある点で維持†1：方位図法
- 17. Re:ゼロから始める地図投影 • JavaFXでの地図表示 y x y x JavaFXの変換 （Transform または Affine）を使用 スクロール、回転、拡大縮小が容易に実現 地図平面座標系 画面座標系
- 18. Re:ゼロから始める地図投影 • 地図データの入手（無償） – 全世界の海岸線データ（ベクターデータ） GSHHG GSHHS Natural Earth Coastline 提供元 NOAA （アメリカ海洋大気庁） ボランティアベース （NACIS†1 支援） ライセンス LGPL パブリックドメイン 解像度（縮尺） 1/100万 179,819レコード 1/1千万 4,132レコード データ形式 独自バイナリ形式、 シェープファイル形式 シェープファイル形式 URL http://www.soest.hawai i.edu/pwessel/gshhg/in dex.html http://www.naturalearthd ata.com/downloads/
- 19. Re:ゼロから始める地図投影 • 地図データの入手（無償） – データ解像度を対馬南部（1/75万縮尺）で比較 GSHHG GSHHS Natural Earth coastline
- 20. アジェンダ 1. 地図の歪み 2. 地図投影の原理 3. JavaFXで投影地図を描く
- 21. JavaFX駆け足紹介 • JavaFXの提供機能 – ボタン、ラベル、グラフ等のUI部品 – 2Dグラフィックス（ベクトル、画像） – 3Dグラフィックス（ポリゴン） – エフェクト（特殊効果） – アニメーション – サウンド – 動画 – Web表示 「Java SE Development Kit 8u112 Demos and Samples」に含まれる Ensemble を動かしてみると一通り 確認できます。
- 22. JavaFX駆け足紹介 アプローチ １）すべてJavaコードで記述 ２）画面レイアウトと見栄えをFXMLで記述、制御をJavaコードで記述 ３）画面レイアウトをFXMLで記述、見栄えをCSSで記述、制御をJava コードで記述 １） ２） ３） Javaソース ✔ ✔ ✔ FXML ✔ ✔ CSS ✔
- 23. JavaFX開発環境（例） 今回使用した環境 統合開発環境（IDE） NetBeans IDE 8.2 （nightly build 20161122） 画面レイアウトツール Scene Builder 8.2.0 Java開発キット Java SE Development Kit 8u112 入手先 • NetBeans https://netbeans.org/downloads/ • Scene Builder http://gluonhq.com/labs/scene-builder/#download • Java SE http://www.oracle.com/technetwork/java/javase/downloads/
- 27. ステップ０ ステップ０ NetBeans JavaFX FXML アプリケーションの雛形生成
- 29. ステップ０ • JavaFX FXMLアプリケーション雛形 – NetBeans IDEで新規プロジェクト作成
- 31. ステップ０
- 35. ステップ１ • バインディング（インジェクション） @FXML private Label scaleLabel; @FXML private Canvas mapCanvas; Scene Builder （TinyMapView.fxml) Controller （TinyMapViewController.java) FXMLファイルをJavaFXがロードした際に、コントローラのインスタン スが生成され、@FXMLアノテーションが付いたフィールドには、UIコ ントロールのインスタンスがインジェクションされる。
- 36. Scene Builder （TinyMapView.fxml) ステップ１ @FXML private void loadShapefile(ActionEvent event) { // … } Controller （TinyMapViewController.java) • バインディング
- 37. ステップ１ • Canvasの大きさをウィンドウの大きさに 追従させる @FXML private Canvas mapCanvas; @FXML private Pane rootPane; : @Override public void initialize(URL url, ResourceBundle rb) { mapCanvas.widthProperty().bind( rootPane.widthProperty().subtract(120) ); mapCanvas.heightProperty().bind( rootPane.heightProperty() ); }
- 38. ステップ１
- 42. ステップ２ • 地図データ（海岸線） – ポリライン（折れ線）データ – Canvasにポリライン（折れ線）を描く – ポリラインを表現するクラスは？ （１） javafx.scene.shape.Polyline （２） 独自クラスを定義 (x1, y1) (x2, y2) (x3, y3) (x4, y4)
- 43. ステップ２ • Canvasへのポリラインの描画 – javafx.scene.canvas.GraphicsContext public void strokePolyline( double[] xPoints, double[] yPoints, int nPoints ); なお、javafx.scene.shape.Polyline は、1つの配列で x,yを取るのでAPIにインピーダンスミスマッチがある Polyline polyline = new Polilyne( 0, 0, // (x1, y1) 10, 100, // (x2, y2) 20, 400, // (x3, y3) );
- 44. ステップ２ • 独自クラス TinyMapPolyline を作成 public class TinyMapPolyline { private final double[] xArray; private final double[] yArray; public double[] getXArray() { return xArray; } public double[] getYArray() { return yArray; } : X座標の値の配列 Y座標の値の配列 で表現
- 45. ステップ２ • モデルクラス TinyMapModel を作成 – シェープファイルの指定 – ポリライン集合の取得 – 投影法の指定 public class TinyMapModel { public TinyMapModel(File file) {…} public void loadLines() {…} public Stream<TinyMapPolyline> stream() {…}
- 46. ステップ２ • テストパターンの表示 – TinyMapViewController private void drawMapCanvas() { GraphicsContext gc = mapCanvas.getGraphicsContext2D(); gc.setStroke(Color.LIGHTGREEN); mapModel.stream().forEach(polyline -> gc.strokePolyline(polyline.getXArray(), polyline.getYArray(), polyline.size()); ); }
- 47. ステップ２
- 51. ステップ３ • マウスドラッグで平行移動 // ドラッグで平行移動するための開始場所保持 mapCanvas.setOnMousePressed(ev -> { dragStartPoint = new Point2D(ev.getSceneX(), ev.getSceneY()); mapTranslateAtDragStart = mapTranslate; }); // ドラッグで平行移動 mapCanvas.setOnMouseDragged(ev -> { Point2D drag = new Point2D(ev.getSceneX(), ev.getSceneY()); mapTranslate = mapTranslateAtDragStart.add( drag.subtract(dragStartPoint)); mapTransform.setToTransform( scaleProperty.get(), 0f, mapTranslate.getX(), 0f, -scaleProperty.get(), mapTranslate.getY()); drawMapCanvas(); });
- 52. ステップ３ • マウスホイールで拡大・縮小 mapCanvas.setOnScroll(ev -> { scaleProperty.set(ev.getDeltaY() >= 0 ? scaleProperty.get() * SCALE_RATE : scaleProperty.get() / SCALE_RATE); mapTransform.setToTransform( scaleProperty.get(), 0, mapTranslate.getX(), 0, -scaleProperty.get(), mapTranslate.getY()); drawMapCanvas(); });
- 53. ステップ３ • JavaFX Beansプロパティ – 値の変更を伝搬（通知）する private DoubleProperty scaleProperty = new SimpleDoubleProperty(1); scaleProperty.addListener((target, oldValue, newValue) -> { scaleLabel.setText(String.format("1/%,d", (int) (1 / (newValue.doubleValue() * dotPitchInMeter)))); }); プロパティの値が変更されたら処理を実行する プロパティの定義 scaleProperty.set(1 / mapToScale(15_000_000)); プロパティに値を設定 scaleProperty.get() * SCALE_RATE プロパティから値を取り出し
- 54. ステップ３
- 58. ステップ４ • シェープファイル読み込みライブラリ Java ESRI Shape File Reader https://sourceforge.net/projects/javashapefilere/ APL2.0ライセンス JARファイル提供（1ファイル・37KB）
- 60. ステップ４ • シェープファイルの選択画面 FileChooser chooser = new FileChooser(); chooser.setTitle("シェープファイルを選択してね"); chooser.setInitialDirectory( Paths.get(System.getProperty("user.dir")).toFile()); chooser.getExtensionFilters().add( new FileChooser.ExtensionFilter("Shapefile", "*.shp")); File selected = chooser.showOpenDialog(mapCanvas.getScene().getWindow()); mapModel = new TinyMapModel(selected); try { mapModel.loadLines(); } catch (TinyMapException ex) { showError("シェープファイルの読み込みでエラーが発生しました。", ex); }
- 61. ステップ４ • シェープファイルの読み込み ValidationPreferences pref = new ValidationPreferences(); pref.setAllowUnlimitedNumberOfPointsPerShape(true); • 1万頂点以上のポリラインを読み込み許可 try (InputStream inStream = new BufferedInputStream( new FileInputStream(mapFile)) ) { } catch (IOException | InvalidShapeFileException ex) { throw new TinyMapException("シェープファイル読み込み時に例外発生", ex); } 海岸線（ポリライン）読み込み処理 • ファイル読み込み処理の骨格
- 62. ステップ４ • ポリライン読み込み処理 ShapeFileReader reader = new ShapeFileReader(inStream,pref); AbstractShape shape = reader.next(); while (shape != null) { if (shape.getShapeType() != ShapeType.POLYLINE) { continue; } PolylineShape polyline = (PolylineShape) shape; for (int i = 0; i < polyline.getNumberOfParts(); i++) { TinyMapPolyline mapPolyline = createMapPolyline(polyline, i); polylines.add(mapPolyline); } shape = reader.next(); } マルチパート対応処理 1つのレコードに連続しない複数のポリラインが格納さ れている場合の対応 ポリライン以外の 形状は読み飛ばし
- 63. ステップ４ • ポリライン読み込み処理 TinyMapPolyline createMapPolyline(PolylineShape shape, int part) { PointData[] gcsPoints = shape.getPointsOfPart(part); double[] xArray = new double[gcsPoints.length]; double[] yArray = new double[gcsPoints.length]; for (int i = 0; i < gcsPoints.length; i++) { Point2D pcsPoint = projection.apply(gcsPoints[i]); xArray[i] = pcsPoint.getX(); yArray[i] = pcsPoint.getY(); } return new TinyMapPolyline(xArray, yArray); } x, y座標値の配列へ の詰め込み // 緯度経度をmに単純変換する投影 projection = p -> new Point2D( p.getX() * 100_000, p.getY() * 100_000 );
- 64. ステップ４
- 67. ステップ５.0 • サンソン図法の変換を自前で実装 public static final double R = 6_371_007.181; // 地球真球半径[m] private Function<PointData, Point2D> sansonProjection = p -> { double radX = Math.toRadians(p.getX()); double radY = Math.toRadians(p.getY()); double sx = R * radX * Math.cos(radY); double sy = R * radY; return new Point2D(sx, sy); };
- 70. ステップ５ • 複数の投影法の選択UI public enum MapProjection { MOLLWEIDE("ESRI:54009"), MERCATOR("ESRI:54004"), ECKERT6("ESRI:54010"), CASSINI("ESRI:54028"); : public void initialize(URL url, ResourceBundle rb) { ObservableList<MapProjection> list = FXCollections.observableArrayList( MapProjection.values() ); projectionComboBox.getItems().addAll(list);
- 71. ステップ５ • 投影法をenumに実装 public static enum MapProjection { MOLLWEIDE("ESRI:54009"), MERCATOR("ESRI:54004"), ECKERT6("ESRI:54010"), CASSINI("ESRI:54028"); private MapProjection(String name) { .. } public Function<PointData, Point2D> projection() { ..} } 空間座標系コードで投影法 を指定 空間座標系コードを引数 に取り初期化 投影変換の関数インタ フェース実装を返す
- 72. ステップ５ • 投影法をenumに実装（フィールド） public static enum MapProjection { : private CRSFactory crsFactory = new CRSFactory(); private CoordinateTransformFactory ctFactory = new CoordinateTransformFactory(); private CoordinateReferenceSystem crsWgs84; private CoordinateReferenceSystem crsProjected; private CoordinateTransform transform; : } 変換前の緯度経度 座標系 変換後の地図座標系 投影変換
- 73. ステップ５ • 投影法をenumに実装（コンストラクタ） public static enum MapProjection { : private MapProjection(String name) { crsWgs84 = crsFactory.createFromName("EPSG:4326"); crsProjected = crsFactory.createFromName(name); transform = ctFactory.createTransform( crsWgs84, crsProjected); } : } 変換前の緯度経度 座標系 変換後の地図座標系 投影変換
- 74. ステップ５ • 投影法をenumに実装（投影） public static enum MapProjection { : public Function<PointData, Point2D> projection() { return point -> { ProjCoordinate gcsPoint = new ProjCoordinate(point.getX(), point.getY()); ProjCoordinate pcsPoint = new ProjCoordinate(); pcsPoint = transform.transform(gcsPoint, pcsPoint); return new Point2D(pcsPoint.x, pcsPoint.y); }; } } 変換前の緯度経度座標 変換後の地図座標 投影変換
- 75. ステップ５
- 76. 地図ライブラリについて • Javaで本格的に地図を使用するなら、本 格的なライブラリが有用（必要） GeoTools （オープンソース LGPL） http://www.geotools.org • 地図データ処理等充実 • GUIはおまけ程度 ArcGIS Runtime SDK for Java （商用製品） https://developers.arcgis.com /java/latest/ • JavaFX GUI対応
- 77. • 緯度経度、測地系 – 書籍「地図投影法」 政春尋志 著、朝倉書店、2011年 – 国土地理院 基本測量 日本の測地系 http://www.gsi.go.jp/sokuchikijun/datum-main.html – 「地図投影法学習のための地図画像素材集」 から図を引用しました http://user.numazu-ct.ac.jp/~tsato/tsato/graphics/map_projection/ 参考資料
- 79. Q&A • Q)地図データは間引かなくも使えますか？ – A) Natural Earth Coastline は比較的粗いデータなので全 世界表示でもなんとか表示できましたが、GSHHSのフルデータは 重くて表示困難でした。GSHHSは5段階の間引きデータを提供し ているので、表示する縮尺に応じて間引きレベルを選択するの がよいです。
- 80. デモでの失敗 • プロジェクタを接続し、画面設定を「複製」にしていたとこ ろ、デモプログラムの縮尺表示が「1/0」となり、データが 何も描画されない問題が発生した。 – 画面設定を拡張にしてデモプログラムを起動、それをプロジェクタ 画面へ移動したところ縮尺表示が「1/200,000,000」のように正常 となり地図が表示された。 – 実行時に次のように画面解像度（ドットピッチ）を取得し、そこか ら地図縮尺を計算していた。プロジェクタ使用時（複製モード）に この値がどうなっているかを追って調査する。 // 実行環境でのドットピッチを計算 dotPitchInMeter = 1 / Screen.getPrimary().getDpi() * METER_PER_INCH;
- 82. メモ • シェープファイル（Shapefile）形式 – ベクトルデータと属性情報など複数ファイル で構成される – 地図データでよく用いられる形式 – 仕様書が公開（以下URLは日本語訳版） https://www.esrij.com/cgi-bin/wp/wp- content/uploads/documents/shapefile_j.pdf
Editor's Notes
- #3: Java読書会BOF開催データ 通算206回、30冊目、平均参加者数11.7人
- #7: Q1) メルカトル図法って知っていますか？ Note1) 厳密にはWebメルカトル投影図法、準拠回転楕円体ではなく球体を使用
- #8: Q1) メルカトル図法って知っていますか？ Note1) 厳密にはWebメルカトル投影図法、準拠回転楕円体ではなく球体を使用
- #16: 今回は標高を扱わないので、回転楕円体面とジオイドには言及せず
- #17: †1）特定の1点または2点から、すべての点への距離または方位が地図上でも正しく表される
- #19: †1 NACIS: North American Cartographic Information Society
- #27: 「ベイビーステップ」
- #33: 「ベイビーステップ」
- #40: 「ベイビーステップ」
- #41: 「ベイビーステップ」
- #49: 「ベイビーステップ」
- #50: 「ベイビーステップ」
- #56: 「ベイビーステップ」
- #57: 「ベイビーステップ」
- #66: 「ベイビーステップ」
- #67: 「ベイビーステップ」