Polygon Polyline

この章ではポリゴン・ポリラインを地図上に表示し、制御するための方法を紹介します。

ポリゴン・ポリラインの表示方法

Map.addGeoJSON()を呼び出すことで、アプリは任意のポリゴン・ポリラインを地図上に表示できます。
また、Map.addEncodedPolyline()を呼び出すことで、EncodedPolyline形式のポリラインを表示できます。

Map.addGeoJSON()ではGeoJSON、Map.addEncodedPolyline()ではEncodedPolylineに対応しています。

ポリゴン・ポリラインを表示するGeoJSON、EncodedPolylineについては、以下に記載します。

ポリゴン

GeoJSONに対応しており、ポリゴンを表示する場合は以下の通りとなります。
geometryの"type": "Polygon" もしくは "type": "MultiPolygon"に対応しています。

GeoJSON(ポリゴン)

GeoJSON(ポリゴン)のPropertiesに設定するデータは以下の通りです。

{
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"properties": {
                // 1個目のポリゴンに対応するproperties
				"polygon1": {
                    // 1個目のポリゴンの外側のポリゴンに対応する
					// 表示スケール(最小、最大)
					"zoom": [4.25, 18.25],
					// 表示順序
					"zOrder": 1.0,
					// 表示有無(true:表示, false:非表示)
					"displayFlag": true,
					// ポリゴンの色を指定する(昼色、夜色)
					"color": ["#6610EE28","#6630b078"],
					// ポリゴンの縁線の色を指定する(昼色、夜色)
					"edgeLineColor": ["#FF108028","#FF105058"],
					// ポリゴンの縁線の幅を指定する
					"edgeLineWidth": 4.0,
					// ポリゴンの塗りつぶしモード
					"fillMode": "inner",
					// ポリゴンのIDを指定する
					"id": 1,
					// ポリゴンの名称を指定する
					"name": "defaultName",
					// ポリゴンの属性情報を指定する
					"attribute": "defaultPolygon"
				}
			},
			"geometry": {
				"type": "Polygon",
				"coordinates": [
					[
						[139.693737,35.758911],[139.6982,35.710698],[139.765835,35.714044],[139.757938,35.761279],[139.693737,35.758911]
					],
					[
						[139.706955,35.749438],[139.709873,35.720594],[139.753819,35.721988],[139.748325,35.751528],[139.706955,35.749438]
					]
				]
			}
		}
	]
}

{
	"type": "FeatureCollection",
	"features": [
        {
			"type": "Feature",
			"properties": {
                // 1個目のポリゴンに対応するproperties
				"polygon1": {
                    // 1個目のポリゴンの外側のポリゴンに対応する
					// 表示スケール(最小、最大)
					"zoom": [4.25, 18.25],
					// 表示順序
					"zOrder": 999.0,
					// 表示有無(true:表示, false:非表示)
					"displayFlag": true,
					// ポリゴンの色を指定する(昼色、夜色)
					"color": ["#80FF0000","#FFFF0000"],
					// ポリゴンの縁線の色を指定する(昼色、夜色)
					"edgeLineColor": ["#800000FF","#FF0000FF"],
					// ポリゴンの縁線の幅を指定する
					"edgeLineWidth": 5.0,
					// ポリゴンの塗りつぶしモード
					"fillMode": "inner",
					// ポリゴンのIDを指定する
					"id": 2,
					// ポリゴンの名称を指定する
					"name": "ポリゴン2",
					// ポリゴンの属性情報を指定する
					"attribute": "属性情報2"
				},
                // 2個目のポリゴンに対応するproperties
				"polygon2": {
                    // 2個目のポリゴンの外側のポリゴンに対応する
					// 表示スケール(最小、最大)
					"zoom": [4.25,18.25],
					// 表示順序
					"zOrder": 998.0,
					// 表示有無(true:表示, false:非表示)
					"displayFlag": true,
					// ポリゴンの色を指定する(昼色、夜色)
					"color": ["#8000FF00","#FF00FF00"],
					// ポリゴンの縁線の色を指定する(昼色、夜色)
					"edgeLineColor": ["#80FF0000","#FFFF0000"],
					// ポリゴンの縁線の幅を指定する
					"edgeLineWidth": 8.0,
					// ポリゴンのIDを指定する
					"id": 3,
					// ポリゴンの名称を指定する
					"name": "ポリゴン3",
					// ポリゴンの属性情報を指定する
					"attribute": "属性情報3"
				}
			},
			"geometry": {
				"type": "MultiPolygon",
				"coordinates": [
					[
                        // 1個目のポリゴン(穴抜け有り)
						[[139.854584,35.770472],[139.811325,35.755428],[139.827118,35.732579],[139.874496,35.720315],[139.913635,35.740939],[139.906769,35.768801],[139.854584,35.770472]],
						[[139.836044,35.75097],[139.862823,35.731464],[139.884109,35.73871],[139.883423,35.753199],[139.85733,35.761],[139.836044,35.75097]]
					],
					[
                        // 2個目のポリゴン(穴抜け無し)
						[[139.747467,35.694598],[139.750643,35.695295],[139.757681,35.690973],[139.762144,35.688742],[139.760771,35.68442],[139.763689,35.684072],[139.759226,35.674311],[139.75296,35.677379],[139.749527,35.676612],[139.745493,35.679819],[139.743776,35.683096],[139.745493,35.689091],[139.74781,35.689718],[139.746695,35.69174],[139.74781,35.692367],[139.747467,35.694598]]
					]
				]
			}
		}
	]
}

ポリライン

GeoJSON、EncodedPolylineに対応しており、ポリラインを表示する場合は以下の通りとなります。
GeoJSONの場合は、geometryの"type": "LineString" もしくは "type": "MultiLineString"に対応しています。

GeoJSON(ポリライン)

GeoJSON(ポリライン)のPropertiesに設定するデータは以下の通りです。

{
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"properties": {
                // 1個目のポリラインに対応するproperties
				"polyline1": {
                    // 表示スケール(最小、最大)
                    "zoom": [4.25,18.25],
                    // 表示順序
                    "zOrder": 1.0,
                    // 表示有無(true:表示, false:非表示)
                    "displayFlag": true,
                    // ポリラインの線色を指定する(昼色、夜色)
					"color" : ["#800000FF", "#FF0000FF"],
                    // ポリラインの線の幅を指定する
					"width" : 10.0,
                    // ポリラインの縁線の色を指定する(昼色、夜色)
					"edgeLineColor" : ["#8000FF00", "#FF00FF00"],
                    // ポリラインの縁線の幅を指定する
                    "edgeLineWidth": 18.0,
                    // ポリラインの破線の設定を指定する(実色の長さ、透明度間隔の長さ)
					"dash" : [10.0, 5.0],
                    // ポリラインの矢印位置を指定する(no_arrow:矢印無し, start:開始地点, end:終了地点, start_end:開始地点・終了地点)
					"arrowMode" : "no_arrow",
                    // ポリラインの矢印の大きさを指定する
					"arrowSize" : [0.0, 0.0],
                    // ポリラインのIDを指定する
                    "id": 6,
                    // ポリラインの名称を指定する
                    "name": "ポリライン6",
                    // ポリラインの属性情報を指定する
                    "attribute": "属性情報6"
				}
			},
			"geometry": {
				"type": "LineString",
				"coordinates": [
                    // 1個目のポリライン
					[139.793472, 35.763368],[139.781284,35.682398]
				]
			}
		}
	]
}

{
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"properties": {
                // 1個目のポリラインに対応するproperties
				"polyline1": {
                    // 表示スケール(最小、最大)
					"zoom" : [4.25, 18.25],
                    // 表示順序
					"zOrder"  : 100.0,
                    // 表示有無(true:表示, false:非表示)
					"displayFlag" : true,
                    // ポリラインの線色を指定する(昼色、夜色)
					"color" : ["#800000FF", "#FF0000FF"],
                    // ポリラインの線の幅を指定する
					"width" : 6.0,
                    // ポリラインの縁線の色を指定する(昼色、夜色)
					"edgeLineColor" : ["#8000FF00", "#FF00FF00"],
                    // ポリラインの縁線の幅を指定する
					"edgeLineWidth" : 10.0,
                    // ポリラインの破線の設定を指定する(実色の長さ、透明度間隔の長さ)
					"dash" : [0.0, 0.0],
                    // ポリラインの矢印位置を指定する(no_arrow:矢印無し, start:開始地点, end:終了地点, start_end:開始地点・終了地点)
					"arrowMode" : "end",
                    // ポリラインの矢印の大きさを指定する
					"arrowSize" : [20.0, 20.0],
                    // ポリラインのIDを指定する
					"id" :  7,
                    // ポリラインの名称を指定する
					"name" : "ポリライン7",
                    // ポリラインの属性情報を指定する
					"attribute" : "属性情報7"
				},
                // 2個目のポリラインに対応するproperties
				"polyline2": {
                    // 表示スケール(最小、最大)
					"zoom" : [4.25, 18.25],
                    // 表示順序
					"zOrder"  : 10.0,
                    // 表示有無(true:表示, false:非表示)
					"displayFlag" : true,
                    // ポリラインの線色を指定する(昼色、夜色)
					"color" : ["#80000000", "#FFFFFFFF"],
                    // ポリラインの線の幅を指定する
					"width" : 10.0,
                    // ポリラインの縁線の色を指定する(昼色、夜色)
					"edgeLineColor" : ["#80000000", "#FF000000"],
                    // ポリラインの縁線の幅を指定する
					"edgeLineWidth" : 20.0,
                    // ポリラインの破線の設定を指定する(実色の長さ、透明度間隔の長さ)
					"dash" : [40.0, 20.0],
                    // ポリラインの矢印位置を指定する(no_arrow:矢印無し, start:開始地点, end:終了地点, start_end:開始地点・終了地点)
					"arrowMode" : "end",
                    // ポリラインの矢印の大きさを指定する
					"arrowSize" : [30.0, 40.0],
                    // ポリラインのIDを指定する
					"id" :  8,
                    // ポリラインの名称を指定する
					"name" : "ポリライン8",
                    // ポリラインの属性情報を指定する
					"attribute" : "属性情報8"
				}
			},
			"geometry": {
				"type": "MultiLineString",
				"coordinates": [
					// 1個目のポリライン
					[[139.727898,35.70359],[139.838448,35.707493]],
					// 2個目のポリライン
					[[139.649277,35.7571],[139.64447,35.639441],[139.733047,35.642789]]
				]
			}
		}
	]
}

GeoJSONのみでポリゴン・ポリラインを表示する場合のサンプルコードは以下の通りです。

// GeoJSONのfilePathを取得

try {
	// GeoJSONのファイルを読み込んでStringに変換する
	BufferedReader reader = new BufferedReader(new FileReader(filePath));
	String line;
	StringBuilder stringBuilder = new StringBuilder();
	while ((line = reader.readLine()) != null) {
		stringBuilder.append(line).append("\n");
	}
	reader.close();

	// 地図上にポリゴン・ポリラインを追加する(GeoJSONにpropertiesが記載されている場合)
	map.addGeoJSON(new JSONObject(stringBuilder.toString()));

} catch (JSONException | IOException e) {
	// エラー処理
}

EncodedPolyline

EncodedPolylineについては、Google Maps Platformのこちらの記事を参考にしてください。

複数の緯度・経度をエンコードした文字列は以下のようになります。

// 35.68960,139.69227(東京都庁前)
// 35.93232,139.47171(パイオニア川越)
_syxEusrsY_ln@naj@

EncodedPolyline

EncodedPolylineを使用して、ポリラインを表示するサンプルコードは以下の通りです。

// ポリラインのデザインを設定する
MapShapeDesign.PolylineDesign design = new MapShapeDesign.PolylineDesign();
design.setLineWidth(10.0f);
design.setEdgeLineWidth(3.0f);
design.setDayColor(Color.valueOf(Color.parseColor("#800000FF")));
design.setNightColor(Color.valueOf(Color.parseColor("#FF0000FF")));
design.setDayEdgeLineColor(Color.valueOf(Color.parseColor("#8000FF00")));
design.setNightEdgeLineColor(Color.valueOf(Color.parseColor("#FF00FF00")));
design.setDashLength(10.0f);
design.setDashInterval(5.0f);
design.setArrowMode(MapShapeDesign.PolylineDesign.ArrowMode.END);
design.setArrowWidth(10.0f);
design.setArrowHeight(5.0f);

// ポリライン情報の設定
MapShape shape = new MapShape(4.25, 18.25, 1.f, true, 10, "エンコードポリライン", "EncodedPolyline");

// エンコード文字列を設定
// 35.68960,139.69227(東京都庁前)
// 35.93232,139.47171(パイオニア川越)
String encodedString = "_syxEusrsY_ln@naj@";

// 地図上にポリライン(EncodedPolyline)を追加する
map.addEncodedPolyline(encodedString, design, shape);

ポリゴン・ポリラインの設定

GeoJSONのpropertiesにデータを記載するのではなく、MapShape、MapShapeDesign.PolygonDesign、MapShapeDesign.PolylineDesignを使用してポリゴン・ポリラインの各種データを設定することも可能です。

ポリゴン・ポリライン共通設定

ポリゴンデザイン設定

ポリラインデザイン設定

以下は、ポリラインを例に MapShape とデザイン情報を指定するサンプルです。 MapShape はポリゴン・ポリラインで共通して使用できます。

// GeoJSONのfilePathを取得

try {
	// GeoJSONのファイルを読み込んでStringに変換する
	BufferedReader reader = new BufferedReader(new FileReader(filePath));
	String line;
	StringBuilder stringBuilder = new StringBuilder();
	while ((line = reader.readLine()) != null) {
		stringBuilder.append(line).append("\n");
	}
	reader.close();

	// ポリゴンの場合
	MapShapeDesign.PolygonDesign polygonDesign = new MapShapeDesign.PolygonDesign();
	polygonDesign.setDayColor(Color.valueOf(Color.parseColor("#80FF0000")));
	polygonDesign.setNightColor(Color.valueOf(Color.parseColor("#FFFF0000")));
	polygonDesign.setDayEdgeLineColor(Color.valueOf(Color.parseColor("#800000FF")));
	polygonDesign.setNightEdgeLineColor(Color.valueOf(Color.parseColor("#FF0000FF")));
	polygonDesign.setEdgeLineWidth(10.f);
	polygonDesign.setFillMode(MapShapeDesign.PolygonDesign.FillMode.INNER);

	// ポリラインの場合
	MapShapeDesign.PolylineDesign polylineDesign = new MapShapeDesign.PolylineDesign();
	polylineDesign.setDayColor(Color.valueOf(Color.parseColor("#800000FF")));
	polylineDesign.setNightColor(Color.valueOf(Color.parseColor("#FF0000FF")));
	polylineDesign.setLineWidth(5.f);
	polylineDesign.setDayEdgeLineColor(Color.valueOf(Color.parseColor("#8000FF00")));
	polylineDesign.setNightEdgeLineColor(Color.valueOf(Color.parseColor("#FF00FF00")));
	polylineDesign.setEdgeLineWidth(10.f);
	polylineDesign.setDashLength(10.f);
	polylineDesign.setDashInterval(5.0f);
	polylineDesign.setArrowMode(MapShapeDesign.PolylineDesign.ArrowMode.NO_ARROW);
	polylineDesign.setArrowWidth(10.f);
	polylineDesign.setArrowHeight(5.0f);
	MapShapeDesign shapeDesign = new MapShapeDesign(polygonDesign, polylineDesign);

	// ポリゴン・ポリライン情報の設定
	// 以下はポリラインを例にした設定
	MapShape shape = new MapShape(6, 10, 888.f, true, 6, "ポリライン1", "ポリラインの属性");

	// GeoJSONに記載されているポリゴン・ポリラインの数分のデザイン情報・ポリゴン・ポリライン情報のペアが必要
	List> properties = new ArrayList<>();
	properties.add(new Pair<>(shapeDesign, shape));

	// 地図上にポリゴン・ポリラインを追加する(GeoJSONにpropertiesが記載されていない場合)
	map.addGeoJSON(new JSONObject(stringBuilder.toString()), properties);

} catch (JSONException | IOException e) {
	// エラー処理
}

ポリゴン・ポリラインの制御方法

Map.addGeoJSON(),Map.addEncodedPolyline()を含め、ポリゴン・ポリラインに関する主な制御関数は以下の通りです。

ポリゴン・ポリラインの取得・更新

ポリゴン・ポリラインの情報を取得ならびに更新が可能です。 サンプルコードは以下の通りです。

//ポリゴン・ポリラインの情報を全取得
List mapShapeList = map.getAllMapShape();

// ID:1のポリゴン・ポリラインの情報を取得して、最小スケールを6・ポリゴンデザインを変更
List mapShape1List = map.getMapShape(1);
mapShape1List.forEach(mapShape -> {
	mapShape.setMinZoom(6);
	// ポリゴンの場合
	MapShapeDesign.PolygonDesign polygonDesign = new MapShapeDesign.PolygonDesign();
	polygonDesign.setDayColor(Color.valueOf(Color.parseColor("#FFF8ED3A")));
	polygonDesign.setNightColor(Color.valueOf(Color.parseColor("#FFC8BD3A")));
	polygonDesign.setDayEdgeLineColor(Color.valueOf(Color.parseColor("#FF8E7600")));
	polygonDesign.setNightEdgeLineColor(Color.valueOf(Color.parseColor("#FF4E3600")));
	polygonDesign.setEdgeLineWidth(10.f);
	polygonDesign.setFillMode(MapShapeDesign.PolygonDesign.FillMode.INNER);
	MapShapeDesign design = new MapShapeDesign(polygonDesign);
	// ポリゴンを更新
	map.updateMapShape(design, mapShape);
});

デザイン変更

ポリゴン・ポリラインの表示順序変更

ポリゴン・ポリラインの表示順序の変更が可能です。
以下は、ポリラインの表示順序を変更するサンプルです。

// ID:2のポリゴン・ポリラインの表示順序を変更
map.changeZOrderMapShape(2, 2.0f);

表示順序変更

ポリゴン・ポリラインの表示有無変更

ポリゴン・ポリラインの表示有無の変更が可能です。
以下は、ポリゴンを非表示へ変更するサンプルです。

// ID:3のポリゴン・ポリラインを非表示に変更
map.changeDisplayMapShape(3, false);

表示有無変更