GoogleMap Javascript で ポリラインGeoJSON読込

GoogleMap JavascriptでGeoJSONファイルを読み込み、ポリラインを引いてみました。
線のスタイルが同じで、Futureがひとつの場合、かなり短く書けます。

[ コード例 ]


const geojsonfnm = "geojson/SimpleLine.json";

$.getJSON(geojsonfnm, function (data) {

      const geomes = data["geometry"]["coordinates"];


      // GeoJSON を描画 //
      let lines = gmapS.data.addGeoJson(data);
      linesThisG = lines;

      // 線の設定 //
      gmapS.data.setStyle({
        strokeColor: "#FFFF00", // 黄色
        strokeWeight: 2,
        geodesic: true         // 球面線
      });

});

[ geojson/SimpleLine.json の内容]

{
  geometry:{
    coordinates:[...]   <== ここに経緯度データが入ってる
    type:LineString
  }
  type:Feature
}

注意点として、Leafletでは type:Featureを省略しても使えましたが、GoogleMapの場合、厳密に評価するようで、Feature, Featuresがないとエラーになります。

[ Leafletで使えたGeoJSON ]

{
  crs:{...}
  coordinates:[...]
  type:LineString
}

コメントを残す