2015年に実験的に試した内容。メモしておいた内容を今更ながら自分用メモとして投稿。
間違い等あったらごめんなさい。
markdown をイマイチよくわかってない。。。
条件
- 以下のfusion tableを利用する。
https://www.google.com/fusiontables/DataSource?docid=1oVouXsjBueThIMExCZh9LhYNVINnqIjzrnuc1fIT
※ 路線情報と駅名が登録されてある。詳細は GoogleMapsを利用して路線を表示する を参照 - 変更するスタイルは、ポリラインとマーカーを service_provider_type 項目の値に従って色を変更する。
- 表示確認は chorme のみ
対応内容
スタイルを変更するポイントは以下の通り
- layer = new google.maps.FusionTablesLayer で引き渡しているパラメータの内容。 query.select で 'geometry'指定し、styles に service_provider_type の値に従って色を変える指定を行う。
- 表示／非表示のサンプルとしては、query.where のコメントアウトした部分を参考にすること。
※ 対応ソースは以下に登録ずみ
https://github.com/oya3/gis_analyze.git
map_query.html
var map, layer;
function initialize() {
var center = new google.maps.LatLng(34.686871327463116, 135.52652215576177);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: center,
zoom: 11
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: "1oVouXsjBueThIMExCZh9LhYNVINnqIjzrnuc1fIT",
// where: "name CONTAINS '線'", // "線"を含むもののみ
// where: "data_type = 'rail'", // 路線だけ
// where: "data_type = 'station'", // 駅だけ
},
styles: [{
where: "service_provider_type = '1'",
polylineOptions: {
strokeColor: "#0000ff",
strokeOpacity: 1.0,
},
markerOptions: {
iconName: 'small_blue',
}
},{
where: "service_provider_type = '2'",
polylineOptions: {
strokeColor: "#00ff00",
strokeOpacity: 1.0,
},
markerOptions: {
iconName: 'small_green',
}
},{
where: "service_provider_type = '3'",
polylineOptions: {
strokeColor: "#ff0000",
strokeOpacity: 1.0,
},
markerOptions: {
iconName: 'small_red',
}
},{
where: "service_provider_type = '4'",
polylineOptions: {
strokeColor: "#ff00ff",
strokeOpacity: 1.0,
},
markerOptions: {
iconName: 'small_purple',
}
},{
where: "service_provider_type = '5'",
polylineOptions: {
strokeColor: "#ffff00",
strokeOpacity: 1.0,
},
markerOptions: {
iconName: 'small_yellow',
}
}]
});
layer.setMap(map);
}
成果物
- 以下にすべて登録ずみ。
https://github.com/oya3/gis_analyze.git
- map_query.html ... 表示サンプル
- 動作サンプル
http://oya3.net/map/map_query.html