コンテンツへスキップ

leaflet

現在地点を中心に表示する。

クリックした地点にピンを立てる。

実物はここをクリック。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Leaflet</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
  <script>
    window.addEventListener("load",function(){
        //位置情報の取得
        navigator.geolocation.getCurrentPosition(
            function(position){
                console.log(position);
                var lat = position.coords.latitude;
                var lon = position.coords.longitude;
                var disp = document.getElementById("disp");
                disp.innerHTML = "緯度" + lat + "度 / 経度:" + lon + "度";

                //leaflet
                var map = L.map('jmap');
                map.setView([lat, lon], 15);
                L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
                    attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
                }).addTo(map);

                //クリックした位置にピンを立てる
                map.on('click', function(e){
                    //alert(e.latlng);
                    L.marker(e.latlng).addTo( map);
                    //var html = '<p>ここの緯度経度=' + e.latlng + '</p>';
                    //var popup = L.popup()
                    //.setLatLng(e.latlng)
                    //.setContent(html)
                    //.openOn(map);
                    var mdisp = document.getElementById("mdisp");
                    mdisp.innerHTML = e.latlng;
                });



            }
        );
    });


  </script>
</head>

<body onload="init()">
  <div id="jmap" style="width:100%;height:1000px"></div>
  <p>現在地(GPS):
  <div id="disp"></div>
  </p>
  <p>マーク地点:</p>
  <div id="mdisp"></div>
</body>

</html>

 

#gmtdefaults -D
#
#       GMT-SYSTEM 4.5.15 [64-bit] Defaults file
#
#-------- Plot Media Parameters -------------
PAGE_COLOR              = white
PAGE_ORIENTATION        = landscape
PAPER_MEDIA             = a4
#-------- Basemap Annotation Parameters ------
ANNOT_MIN_ANGLE         = 20
ANNOT_MIN_SPACING       = 0
ANNOT_FONT_PRIMARY      = Helvetica
ANNOT_FONT_SIZE_PRIMARY = 14p
ANNOT_OFFSET_PRIMARY    = 0.2c
ANNOT_FONT_SECONDARY    = Helvetica
ANNOT_FONT_SIZE_SECONDARY       = 16p
ANNOT_OFFSET_SECONDARY  = 0.2c
DEGREE_SYMBOL           = ring
HEADER_FONT             = Helvetica
HEADER_FONT_SIZE        = 36p
HEADER_OFFSET           = 0.5c
LABEL_FONT              = Helvetica
LABEL_FONT_SIZE         = 24p
LABEL_OFFSET            = 0.3c
OBLIQUE_ANNOTATION      = 1
PLOT_CLOCK_FORMAT       = hh:mm:ss
PLOT_DATE_FORMAT        = yyyy-mm-dd
PLOT_DEGREE_FORMAT      = ddd:mm:ss
Y_AXIS_TYPE             = hor_text
#-------- Basemap Layout Parameters ---------
BASEMAP_AXES            = WESN
BASEMAP_FRAME_RGB       = black
BASEMAP_TYPE            = fancy
FRAME_PEN               = 1.25p
FRAME_WIDTH             = 0.2c
GRID_CROSS_SIZE_PRIMARY = 0c
GRID_PEN_PRIMARY        = 0.25p
GRID_CROSS_SIZE_SECONDARY       = 0c
GRID_PEN_SECONDARY      = 0.5p
MAP_SCALE_HEIGHT        = 0.2c
POLAR_CAP               = 85/90
TICK_LENGTH             = 0.2c
TICK_PEN                = 0.5p
X_AXIS_LENGTH           = 25c
Y_AXIS_LENGTH           = 15c
X_ORIGIN                = 2.5c
Y_ORIGIN                = 2.5c
UNIX_TIME               = FALSE
UNIX_TIME_POS           = BL/-2c/-2c
UNIX_TIME_FORMAT        = %Y %b %d %H:%M:%S
#-------- Color System Parameters -----------
COLOR_BACKGROUND        = black
COLOR_FOREGROUND        = white
COLOR_NAN               = 128
COLOR_IMAGE             = adobe
COLOR_MODEL             = rgb
HSV_MIN_SATURATION      = 1
HSV_MAX_SATURATION      = 0.1
HSV_MIN_VALUE           = 0.3
HSV_MAX_VALUE           = 1
#-------- PostScript Parameters -------------
CHAR_ENCODING           = ISOLatin1+
DOTS_PR_INCH            = 300
GLOBAL_X_SCALE          = 1
GLOBAL_Y_SCALE          = 1
N_COPIES                = 1
PS_COLOR                = rgb
PS_IMAGE_COMPRESS       = lzw
PS_IMAGE_FORMAT         = ascii
PS_LINE_CAP             = butt
PS_LINE_JOIN            = miter
PS_MITER_LIMIT          = 35
PS_VERBOSE              = FALSE
TRANSPARENCY            = 0
#-------- I/O Format Parameters -------------
D_FORMAT                = %.12lg
FIELD_DELIMITER         = tab
GRIDFILE_FORMAT         = nf
GRIDFILE_SHORTHAND      = FALSE
INPUT_CLOCK_FORMAT      = hh:mm:ss
INPUT_DATE_FORMAT       = yyyy-mm-dd
IO_HEADER               = FALSE
N_HEADER_RECS           = 1
NAN_RECORDS             = pass
OUTPUT_CLOCK_FORMAT     = hh:mm:ss
OUTPUT_DATE_FORMAT      = yyyy-mm-dd
OUTPUT_DEGREE_FORMAT    = D
XY_TOGGLE               = FALSE
#-------- Projection Parameters -------------
ELLIPSOID               = WGS-84
MAP_SCALE_FACTOR        = default
MEASURE_UNIT            = cm
#-------- Calendar/Time Parameters ----------
TIME_FORMAT_PRIMARY     = full
TIME_FORMAT_SECONDARY   = full
TIME_EPOCH              = 2000-01-01T12:00:00
TIME_IS_INTERVAL        = OFF
TIME_INTERVAL_FRACTION  = 0.5
TIME_LANGUAGE           = us
TIME_UNIT               = d
TIME_WEEK_START         = Sunday
Y2K_OFFSET_YEAR         = 1950
#-------- Miscellaneous Parameters ----------
HISTORY                 = TRUE
INTERPOLANT             = akima
LINE_STEP               = 0.025c
VECTOR_SHAPE            = 0
VERBOSE                 = FALSE

■ 各種データの取得
・水深データ
日本海洋データセンターの500mメッシュ水深データを利用する。

・地図データ
国土交通省の

■ 緯度・経度の調べ方
国土地理院で緯度経度を調べる https://cyberjapandata.gsi.go.jp
緯経度グリッドの表示
画面右上の機能→グリッド表示→緯経度グリッドをオンにする

■ 海図作成に必要な知識や言葉
・緯度と経度
緯度:経度
基準:赤道:子午線
向き:北南:西東
角度:90:180

・子午線:イギリスのグリニッジ天文台跡を南北に通る線。赤道と直行する。

・赤道:南北の中心を子午線と直行する線

・測地系:500mメッシュ水深データは世界測地系(WGS-84)を採用

・GIS(Geographic Information System):地理情報システム

・GeoTIFF:地理参照情報が埋め込まれたイメージファイル形式

・シェープファイル(Shapefile):
米国Esri社が開発
3種類のファイルから成り立つ。
・*.shp:図形情報を格納するファイル
・*.shx:図形のインデックス情報を格納するファイル
・*.dbf:図形の属性情報を格納するファイル

・コンター:等高線
・QGIS:
・レイヤ
・ベクタ・データ:シェープファイル。点、線、麺で表現
・ラスタ・データ:GeoTIFF。マス目
・ベクタ・タイル
・地図投影法

■ 海図作成に使うコマンドのインストール方法 ※CentOS release 6.10 (Final)の場合
yum -y install netcdf*
yum -y install netcdf* GMT* hshhg-gmt-*
yum install gs*
yum install ghostscript*

■ GMTの基本設定
.gmtdefaultsファイルに設定する。又は、$ gmtdefaults −D コマンドで出力される。

■ 海図作成に使うコマンド
・blockmean:水深データをxyzデータに変換
-R:経度min(西)/経度max(東)/緯度min(南)/緯度max(北)
-I:格子間隔
blockmean -R135:48/135:54/33:27/33:33 -I1c > file.xyz

・surface:グリッドデータを作成
-R:経度min(西)/経度max(東)/緯度min(南)/緯度max(北)
-G:グリッドファイル
-T:テンション
-I:格子間隔
surface file.xyz -R135:48/135:54/33:27/33:33 \
-Gfile.grd -T0.4 -I1c

・grdcontour:等深線を書く
-J:地図の図法 メルカトル図法 scale15
-R:経度min(西)/経度max(東)/緯度min(南)/緯度max(北)
-W:等高線と等高線に書く数値に使うペン属性を指定
-C:等高線の間隔
-A:等高線に書く数値の間隔
-Y:プロットの原点を指定値より移動する。
-P:縦置き描画モードを選択する。指定無しはDefaultsのPAPER_MEDIAの紙サイズ
-V:標準エラー出力に経過報告を送る
-K:さらに PostScript コードが後に続くときに使用する
$ grdcontour file.grd -JM15 -R135:48/135:54/33:27/33:33 \
-W1 -C1 -A20f10t -Y4 -P -V -K > file.ps

・pscoast:海岸線を書く
-R:経度min(西)/経度max(東)/緯度min(南)/緯度max(北) dd:mm[:ss]で指定する(Defaultの指定方法)
-J:地図の図法 メルカトル図法 scale15
-D:海岸線表現精度を指定。f=完全,h=高精度,i=中精度,l=低精度,c=雑
-W:等高線と等高線に書く数値に使うペン属性を指定
-G:陸地の色を指定
-I:河川流路
-K:
-V:
-O:
pscoast -R135:48/135:54/33:27/33:33 -J -Df -W1 \
-G255/104/51 -If -K -V -O > file.ps

・psbasemap:海図の枠を書く
-R:
-J:
-B:
-O:
-V:
psbasemapp -R -J -BN -O -V >> file.ps

・ps2raster:psファイルをpngに変換
-T: 出力ラスタフォーマットを設定。g=png,f=pdf,j=jpeg
-E:ラスタの解像度を dpi 単位で設定
-A: 画像の内容に必要な最小の大きさに BoundingBox(四角の箱)を調整する
$ ps2raster file.ps -Tj -E1024 -A

・gdal_contour:シャープファイルを作成する。
-i:等高線の間隔
-a:標高属性を付ける
gdal_contour -i 1 -a elev file.grd file.shp

・geotiff:座標つきの画像ファイルを作成する。

・psxy:線や文字列を書く
-SI:size/string[[%font] sizeでフォントサイズ、stringで文字列を指定、%fontでフォントを指定

■ 参考
・http://hydro.iis.u-tokyo.ac.jp/~agata/archive/GMT334/doc/html/tutorial/node1.html