- GoogleMap
- 2019-04-03
GoogleMapに図形等を描画するのに非常に便利な方法がありました。
//GoogleMapインスタンスを生成(v3) map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(35.6585809608813, 139.74543258547783) } ); // GeoJsonを読み込む map.data.loadGeoJson('sample.geojson'); // スタイルを設定 map.data.setStyle(function(feature) { var myStyle = { fillColor: "#9AD2AE", fillOpacity: 0.5, strokeColor: "#1EB26A", strokeOpacity: 0.8, strokeWeight: 2, clickable: true, visible: true, zIndex: 1 }; return (myStyle); });
sample.geojsonの内容
{ "type": "FeatureCollection", "name": "sample", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [ { "type": "Feature", "properties": { "name": "サンプル1" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 139.74472479682004, 35.659171090464596 ], [ 139.74610447883606, 35.659171090464596 ], [ 139.74610447883606, 35.65809388391181 ], [ 139.74472479682004, 35.65809388391181 ], [ 139.74472479682004, 35.659171090464596 ] ] ] } } ] }
今回はポリゴンのみですが、他にポイントやポリラインもGeoJsonで読み込み可能です。
GeoJsonは統一された規格なので汎用性があり便利です。
3,291 views