GoogleMaps JavaScript APIで公図(14条1項地図）を google mapに取り込んで衛星画像に重ねてみる。②

前回の続きで、今回は②をアップする。登記情報提供サービスからダウンロードした公図(14条1項地図　PDFファイル）をPDFのまま取り込んでgoogle mapに重ね合わせるサンプル

作ったサンプルはこちら。

 （令和4年8月２8日追記　google cloud APIの無料使用可能回数を越えた場合、APIを使用していないバージョンに誘導する場合があります。ご了承ください。）

作成にあって、前回のサンプルでは縮尺、座標を手入力したのだが、めんどくさいので自動読み取りさせてみることにした。

OCR（テキスト読み取り）APIはいくつか公開されているがどれも日本語の識別能力がいまいちなのと横書きと縦書きが混在するときの読み取り精度が実用に耐えられないぐらい低かった。

しかし、Google先生はさすがであった。

今回文字読み取りに使用したAPIは、Google　Cloud Vision API。最近よく聞くAI（人工知能）だそうだ。

面白そうなので使ってみることにした。*1

gist.github.com

を参考にゴリゴリ書いてみた。

まあ素人が動けばよい程度で書いたのでソースのわかりにくさや粗雑さはご勘弁。

PDFの読み込みには、PDF.jsを利用。

何回かファイルをそのままGoogle Cloud Vision APIに読ませてみたが、読み取り結果が不安定であったため、読みとってほしいところをトリミング処理したら正解率が大幅アップした。いいぞAI君。でも、ローマ数字で表示された座標系の読み取りがどうも不得意のようである。仕方がないので座標系は手入力（selectで選択）にした。

流れは次の通り。

• pdf をcanvasに表示して、読み取りたいところをトリミングする。
• トリミング後の画像データをCloud Vision APIに読ませて結果をテキストボックスに表示する。
• あとはそのデータを使って前回と同じようにgoogle mapにGroundOverlayとして貼り付ける。*2

前回は貼り付けた地図をそのまま半透明にして、一目で１４条一項地図を張り付けたことわかるようにしたのだが、

今回は、この表示のほかに、RGBAを少しいじって、境界線に黒以外の見やすい色を付け、白部分を透過させる選択メニューをつけてみた。

では使い方。

1. ブラウザは　 google chrome を使用してください。
2. のをクリック。
3. 画面の下にが現れるので、これをクリックしてＰＤＦファイルを取り込みます。
4. ファイルが読み込まれると下のように結果が表示される。

   

   
5. 貼り付ける地図の背景色と線の種類を選択。デフォルトは背景が透明で線色は黄色。

   

6. 地図に記載されている座標系番号を選択して（例の場合であれば８系）実行ボタンをクリック。
7. 数秒後に

8. ちょっと拡大してみるとこんな感じになります。

9. でｋｍｚファイルをダウロードできます。デフォルトのファイル名は、DownLoad.kmz。google Earth proで開くと境界線が薄く表示されますが、イメージオーバーレイを右クリックして、プロパティで透過度を不透明に調整すれば見やすくなります。

10. 

opacity

*1:ＡＰＩ使用料金が無料の範囲で公開しますので、節度ある利用をお願いします。

*2:

平面直角座標系から緯度経度への変換には、国土地理院のＡＰＩが公開されているが、レスポンスが遅すぎるようなので地理院が以前公開していたプログラムソースを利用した。なので、お約束の告知を表示する。

サンプルページ　の　javascript ソース　function　doCalcxy2bl(X,Y)　は、国土地理院長の承認を得て、同院の技術資料Ｈ１－Ｎｏ．２「測地成果２０００のための座標変換ソフトウェア TKY2JGD 」のＶＢ計算ルーチンを利用し作成したものです。（承認番号　国地企調第３７０号　平成２４年３月７日）  

　 世界測地系（測地成果 2000 、または　測地成 2011）専用です。旧日本測地系では正しい位置に表示されません。また、地震等による地殻変動が生じた地域等で、必要としている精度を確保できない場合があることをご了承ください。また、このサンプルページを使用したことによって発生したあらゆる損害について作者は一切の責任を負わないこととさせて頂きます。