motomachix’s blog

数年前からサンプルページを作って公開していたが、説明ページがあまりにも貧弱だったので、こちらのブログにあげなおすことにした。今日から少しづつアップする。 ここに公開しているサンプルページはPC用です。動作確認したブラウザはGoogle Chromeです。プロフィールはこちら　https://nemotos-office.sakura.ne.jp/

googlemapに14条１項地図を４点補正して貼り付ける。on Leaflet

以前作ったサンプルでは、L.ImageOverlayを利用した。

画像を表示する領域を第2引数で、左下及び右上の2点を指定するため、選択した平面画像は2点で補正されて球面体に表示されてしまう。

左上及び右下の付近は画像の補正誤差が比較的大きくなる。極端に言えば、指定した2点でひっぱられた平行四辺形のイメージ。

結果、数ページにまたがる地図を張り付けてみると図郭線が離れてしまう。

大体の位置特定であれば十分であるが、不満だ。

ならば、地図図郭コーナー4点を基準に射影変換してMAPに貼り付けてみてはどうかと思いやってみた。

前回サンプルで使用したプラグイン　

github.com

　を使って4点補正（射影変換）を試みる。

具体的には、DistortableImage　の　cornersというプロパティを使う。矩形画像の4コーナーを座標指定すると、地図画像が射影変換される。

 

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

 

数ページにまたがる地図を読み込んでみる。

①1ページ目が読み込まれると貼り付けボタンが緑色に点滅する。

②貼り付けボタンをクリックすると、次ページ読み込み案内が現れる。

③OKをクリックすると次ページが読み込まれる。

最後のページまで繰り返し読み込むと読み込み画面が閉じ,地図上に全頁張り付いて表示されている。

f:id:motomachix:20200110131233j:plain

貼り付けた結果

 382番を表示している。4ページの地図データを連続して取り込んだ結果なのだが、各ページつなぎ目の筆界線がきれいに整合していることが確認できた。

いい感じだ。

 

 

googlemapに重ね合わせた公図を自由変形（アフィン変換、射影変換）してみる。on Leaflet

　　公図や地積測量図などの画像データをleafletのマップ上に重ね合わせ表示して、イラストレーターみたいに変形したり拡大縮小回転したり出来たらいいと思ったので作ってみた。

　手頃なプラグインを探したところ、アフィン変換、その拡張でホモグラフィ（射影変換）を使ったleafletプラグインLeaflet.DistortableImageが便利そう。

　画像切り取りはcropper.jsを利用したサンプルをカスタマイズした。

　対応する画像データは、pdf、png、jpeg。ただし、pdf（pdf.js)はpcのみ対応とした。

 

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

 

　使い方は、

１．ファイルを読み込む。

２．クロップ（トリミング）する範囲を決める。

３．「クロップして貼り付け」ボタンをクリックする。

４．マップに取り込んだ画像が表示される。

５．画像をクリックすると画像上段に下記ツールがアイコン表示されるので適宜編集する。

f:id:motomachix:20200104133245j:plain

画像をクリックするとツールが表示される。

ツールは左端から

１．編集ロック、ロック解除ボタン

２．移動伸縮ボタン

３．４点歪み補正（台形補正：射影変換）ボタン

４．取り込み時オリジナル画像に戻すボタン

５．移動回転ボタン

６．移動回転伸縮ボタン

７．半透明化ボタン

８．編集後画像出力ボタン

９．画像削除ボタン

 

思った以上に編集自由度が高い。

座標を持たない公図や地積測量図、建物図面などの重ね合わせができそうだ。

いいぞ。

 

 

 

 

 

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

以前、登記情報提供サービスからダウンロードした公図をPDFのまま取り込んでgoogle mapに重ね合わせるサンプルを公開したが、文字読み取りに使用した　Google　Cloud Vision APIの使用料金が無料の範囲を超えてしまったので、代替のライブラリ

github.com

を使用して書き直してみた。

少しレスポンスが遅いようであるが十分機能するようだ。

  • 平面直角座標系から緯度経度への変換には、国土地理院のＡＰＩが公開されているが、レスポンスが遅すぎるようなので

    github.comwoを使用しました。このライブラリについては改めて別の機会に具体的な使い方をアップしたいと思います。

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

 

 

書き直したサンプルはこちら

https://nemotos-office.sakura.ne.jp/tesrctgpdfkmz.html

 使い方は変わらなない。

  1. ブラウザは　 google chrome を使用してください。
  2. f:id:motomachix:20190204103112j:plainのf:id:motomachix:20190204103055j:plainをクリック。
  3. 画面の下にf:id:motomachix:20190204103320j:plainが現れるので、これをクリックしてＰＤＦファイルを取り込みます。
  4. ファイルが読み込まれるとf:id:motomachix:20190204103508j:plainのような画像が現れるので、下のf:id:motomachix:20190204103448j:plainをクリックすると縮尺と座標の自動読み取りが開始されます。
  5. 読み取りが終了すると結果が表示される。f:id:motomachix:20190204103734j:plain
  6. 貼り付ける地図の背景色と線の種類を選択。デフォルトは背景が透明で線色は黄色。

    f:id:motomachix:20190204104517j:plain

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

  9. ちょっと拡大してみるとf:id:motomachix:20190204104739j:plainこんな感じになります。

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

  11. f:id:motomachix:20190204111350j:plain

 

 

 

 

 

 

 

 

 

 

 

今までのサンプルをひとまとめにしたものを作ってみた。

作ったページは

衛星写真、航空写真と公図（PDF)を重ね合わせるサンプル on Leaflet

機能は

①　住所を入力して位置検索

住所をテキストボックスに入力して位置検索ボタンをクリックすると検索結果の位置に移動します。

②　公図（ＰＤＦ）を取り込んで地図に表示

公図取込ボタンをクリックして公図（登記情報提供サービスからダウンロードしたＰＤＦファイル）を取り込み地図に表示します。

③　google衛星写真を表示

google衛星写真ボタンをクリックすると表示されている地図倍率に応じたgoogle衛星写真が表示されます。

④　YAHOO航空写真を表示

（令和２年１０月３１日　使用しているＡＰＩサービスは終了しました。）

yahoo航空写真の大きさを選択してYAHOO航空写真ボタンをクリックするとYAHOO航空写真が表示されます。

⑤　②の公図を透明化して境界線の色を変更

イエロー、レッド、ブルーをクリックすると②で表示した公図が透明化し、線色がクリックしたカラーに変わります。

 

  • 平面直角座標系から緯度経度への変換には、国土地理院のＡＰＩが公開されているが、レスポンスが遅すぎるようなので

    github.comwoを使用しました。このライブラリについては改めて別の機会に具体的な使い方をアップしたいと思います。

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

 

都市再生街区基準点をGoogleMapに表示する

平成18年から国土交通省が全国のDID（人口集中地域）. を対象に実施した「都市再生街区基本調査」により設置された測量の基準点が町中にあります。

この点をgoogle mapに表示できたら探しやすいとおもい、やってみた。

作ったサンプルページが

https://nemotos-office.sakura.ne.jp/gaikuviewer.html

 

ＰＣに少し負担をかけるのでメモリーが不足気味の場合、読み込みに時間がかかるかもしれません。

 

  1. サンプルページ画面上段の都市再生街区基本調査成果提供サービスリンクメニューから、ほしい都市の街区基準点データをデスクトップにダウロードします。f:id:motomachix:20190204141827j:plain
  2. T_S_38201.csvというようなファイルがダウンロードされますので、このファイルをメニュー中央のファイル選択ボタンから読み込みます。直角平面座標系は自動で設定されます。f:id:motomachix:20190204144003j:plain
  3. 拡大してf:id:motomachix:20190204144253j:plain
  4. 試しに　2A120　をストリートビューで見てみるとf:id:motomachix:20190204144406j:plain
  5. 拡大すると

f:id:motomachix:20190204144615j:plain

 おっと、電柱下にそれらしきものを発見。マーカーとはずれているが、ストリートビューの精度を考えれば、まあいいか。

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. のf:id:motomachix:20190204103055j:plainをクリック。
  3. 画面の下にf:id:motomachix:20190204103320j:plainが現れるので、これをクリックしてＰＤＦファイルを取り込みます。
  4. ファイルが読み込まれると下のように結果が表示される。

    f:id:motomachix:20190204102438j:plain

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

    f:id:motomachix:20190204104517j:plain

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

  8. ちょっと拡大してみるとf:id:motomachix:20190204104739j:plainこんな感じになります。

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

  10. f:id:motomachix:20190204111350j:plain

 

 

 

f:id:motomachix:20200414112433j:plain

opacity

 

 

 

 

 

 

 

 

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

*2:

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

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

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

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

登記情報提供サービスから公図(PDFファイル）をダウンロードできるが、この公図のうち不動産登記法第１４条１項地図に分類されるものがある。

この地図には座標位置が記載されていて、この数字が実際の位置を示している。

ならば、この地図の座標位置を使って衛星画像にその地図を貼り付けるとこができれば一目でその大まかな位置がわかるのではないかと思ったので、やってみた。

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

https://nemotos-office.sakura.ne.jp/gkmz.html

各社地図APIを公開しているが、一番細かい操作が可能なGoogleMaps JavaScript APIを使ってみる。

ダウンロードした地図ファイルはPDF形式。画像データに変換して貼り付けることになるのだが、①事前にPNG形式に変換したファイルを取り込んで貼り付けるサンプルと②PDFファイルをダイレクトに取り込んで貼り付けるサンプルの２つをつくってみた。

 

今回はまず①をアップする。

流れは以下の通り。

  • 縮尺、地図図郭左下座標値を手入力。
  • 左下座標値から右上座標値を計算で求める。
  • 平面直角座標を緯度経度に変換する。*1
  • google map上にGroundOverlayとして貼り付ける。
  • KMZファイルを生成してダウンロー出来るようにする。

 

で、サンプルの操作方法 

  1. ブラウザは　 google chrome を使用してください。
  2. 登記情報提供サービスからダウロードした不動産登記法第１４条１項地図（ＰＤＦ）をｐｎｇ、ｇｉｆ、ｊｐｇのいずれかの形式に変換したファイルを準備してくだい。　　　　　　　　　　　　　　　　　　　　
  3. f:id:motomachix:20190202154119j:plainの真ん中に平面直角座標系選択メニューがあるので地図に記載されている座標系番号を選択してください。
  4.  f:id:motomachix:20190202152909j:plainをクリックすると次のような画面が表示されます。f:id:motomachix:20190202153407j:plain　
  5. f:id:motomachix:20190202153258j:plainをクリックして、はじめに準備した画像ファイル（ｐｎｇ、ｇｉｆ、ｊｐｇのいずれか）を読み込みます。画面下部分に読み込んだ図面の座標、所在、縮尺等が拡大表示されます。

    f:id:motomachix:20190204102438j:plain

    縮尺を②に入力します。例の場合は　500　を入力。

  6. ③図郭左下Ｘ座標（例の場合は、+10327.337）を入力したらＴａｂキーを押します。すると⑤の図郭右上Ｘ座標を自動計算します。
  7. ③同様に図郭左下Ｙ座標（例の場合は、+21953.532）を入力したらＴａｂキーを押します。 同様に自動計算します。
  8. ⑦貼り付けの実行をクリックすると次のように googlemap 上に地図が表示されます。

    f:id:motomachix:20190202155043j:plain

  9. 地図を右クリックすると透過度の変更が可能です。
  10. f:id:motomachix:20190202155400j:plainで取り込んだ地図画像を削除できます。

  11. f:id:motomachix:20190202160033j:plainでｋｍｚファイルをダウロードできます。f:id:motomachix:20190202160528j:plain

  12. 生成したｋｍｚファイルは、 Google Earth Pro で開くことができます。

    Google Earth Pro の地形チェックボックスをオンにすれば高さ情報を考慮した表示をしてくれます。

*1:

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

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

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