コンテンツにスキップ

GEOMAP()

Since v8.0.44

構文: GEOMAP( [geomapID()] [, tileTemplate()] [, size()] )

GEOMAP は、指定した座標に基づいて地図上にマーカーと図形を描画します。
CHART と似ていますが、スカラー値の代わりに座標を使用します。対応する座標系は WGS84 です。

入力データはJavaScriptオブジェクトで指定します。各オブジェクトには typecoordinates フィールドが必須で、properties は省略可能です。
type に応じたレイヤーを地図上に描画します。たとえば type: "circle" は、指定した座標に円を表示します。

tileTemplate()

構文: tileTemplate(url_template)

タイルサーバーのURLテンプレートを指定します。既定値は https://tile.openstreetmap.org/{z}/{x}/{y}.png です。

重要: 社内のファイアウォールやセキュリティポリシーによって既定のタイルサーバーにアクセスできない場合は、内部にタイルサーバーを構築し、tileTemplate() でURLを設定してください。
タイルサーバーの構築方法はこの文書の対象外です。詳細は https://wiki.openstreetmap.org/wiki/Tile_servers を参照してください。

tileGrayscale()

構文: tileGrayscale(scale)

  • scale float:タイル画像をグレースケールで表示する際の値(0 ≤ scale ≤ 1.0、既定値は 0

geomapID()

構文: geomapID(id)

自動生成されるIDの代わりに使用する地図のID(文字列)を指定します。

size()

構文: size(width, height)

  • width string:地図の幅(例:'800px'
  • height string:地図の高さ(例:'600px'

レイヤー

レイヤーは、地図上に表示するマーカーや図形です。
GEOMAP() の入力はJavaScriptオブジェクトで表した辞書構造です。typecoordinates フィールドは必須で、properties は省略可能です。

形式

{
    type: "circle", // marker、circleMarker、polylineなど
    coordinates: [Lat, Lon],
    properties: {
        radius: Radius,
        color: "#FF0000",
        weight: 1
    }
}
名前説明
typeStringレイヤーの種類(markercirclecircleMarker など)
coordinates[]Float, [][]Float緯度と経度の配列
propertiesDictionaryレイヤーの種類に応じたオプション。プロパティを参照

marker

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
FAKE(json({
    [38.9934, -105.5018]
}))

SCRIPT({
    var lat = $.values[0];
    var lon = $.values[1];
    $.yield({
        type: "marker",
        coordinates: [lat, lon]
    });
})

GEOMAP()

circleMarker

プロパティ

プロパティ既定値説明
radius10ピクセル単位の半径
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
FAKE(json({
    [38.935, -105.520]
}))

SCRIPT({
    var lat = $.values[0];
    var lon = $.values[1];
    $.yield({
        type: "circleMarker",
        coordinates: [lat, lon],
        properties:{
            radius: 40
        }
    });
})

GEOMAP()

circle

プロパティ

プロパティ既定値説明
radius10メートル単位の半径
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
FAKE(json({
    [38.935, -105.520]
}))

SCRIPT({
    var lat = $.values[0];
    var lon = $.values[1];
    $.yield({
        type: "circle",
        coordinates: [lat, lon],
        properties:{
            radius: 400
        }
    });
})

GEOMAP()

polyline

FAKE(json({
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
}))

SCRIPT({
    var points = [];
    function finalize() {
        $.yield({
            type: "polyline",
            coordinates: points
        });
    }
},{
    var lat = $.values[0];
    var lon = $.values[1];
    points.push( [lat, lon] );
})

GEOMAP()

polygon

FAKE(json({
    [37, -109.05],
    [41, -109.03],
    [41, -102.05],
    [37, -102.05]
}))

SCRIPT({
    var points = [];
    function finalize() {
        $.yield({
            type: "polygon",
            coordinates: points
        });
    }
},{
    var lat = $.values[0];
    var lon = $.values[1];
    points.push( [lat, lon] );
})

GEOMAP()

プロパティ

レイヤー共通のプロパティ

プロパティ既定値説明
strokeBooleantrue輪郭線を描画するかどうか
colorString'#3388ff'輪郭線の色
weightNumber3輪郭線の太さ(px)
opacityNumber1.0レイヤーの不透明度
fillColorString塗りつぶしの色(省略時は color と同じ)
fillOpacityNumber0.2塗りつぶしの不透明度
popupObjectnullポップアップを参照
tooltipObjectnullツールチップを参照

ポップアップ

レイヤーの propertiespopup オブジェクトを指定すると、クリック時にポップアップメッセージを表示します。

プロパティ既定値説明
contentStringテキストまたはHTMLコンテンツ
openBooleanfalse初期状態でポップアップを開くかどうか
maxWidthNumber300ポップアップの最大幅(px)
minWidthNumber50ポップアップの最小幅(px)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
FAKE(json({
    ["Stoll Mountain", 38.9934, -105.5018],
    ["Pulver Mountain", 39.0115, -105.5173]
}))

SCRIPT({
    var name = $.values[0];
    var lat  = $.values[1];
    var lon  = $.values[2];
    $.yield({
        type: "marker",
        coordinates: [lat, lon],
        properties: {
            popup: {
                content: '<b>'+name+'</b>'
            }
        }
    });
})

GEOMAP()

ツールチップ

Since v8.0.44

地図のレイヤー上に短いテキストを表示します。

プロパティ既定値説明
contentStringテキストまたはHTMLコンテンツ
openBooleanfalse初期状態で表示するかどうか
directionStringautoツールチップの方向(rightlefttopbottomcenterauto
permanentBooleanfalseマウスオーバーなしで常に表示するかどうか
opacityNumber0.9ツールチップの不透明度
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
FAKE(json({
    ["Stoll Mountain", 38.9934, -105.5018],
    ["Pulver Mountain", 39.0115, -105.5173]
}))
SCRIPT({
    var name = $.values[0];
    var lat  = $.values[1];
    var lon  = $.values[2];
    $.yield({
        type: "marker",
        coordinates: [lat, lon],
        properties: {
            tooltip: {
                content: '<b>'+name+'</b>',
                direction: "auto",
                permanent: true
            }
        }
    });
})
GEOMAP()

CSVファイルからテストデータを読み込み、“TRIP” テーブルに挿入します。 このTQLは、指定したURLからCSVファイルをダウンロードし、 CSV文字列を適切なデータ型に変換してから、 TRIPテーブルにレコードを挿入します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// CSV形式: TIME, LAT, LON
CSV(file("https://docs.machbase.com/assets/example/data-trajectory-firenze.csv"))
DROP(1) // ヘッダーを除外
SCRIPT({
    // tripテーブルがなければ作成
    $.db().exec("CREATE TAG TABLE IF NOT EXISTS TRIP ("+
        "name varchar(100) primary key, "+
        "time datetime basetime, "+
        "value double summarized, "+
        "lat double, "+
        "lon double "+
    ")")
    // CSV文字列 '23-04-21 16:53:21:123000' を時刻として解析
    function parseTime(str) { 
        y = "20"+str.substr(0,2);
        m = str.substr(3,2) - 1;
        d = str.substr(6,2);
        hours = str.substr(9, 2);
        mins = str.substr(12,2);
        secs = str.substr(15, 2);
        milli = str.substr(18, 3)
        var D = new Date(y, m, d, hours, mins, secs, milli);
        return (D.getFullYear() == y && D.getMonth() == m && D.getDate() == d) ? D : 'invalid date';
    }
}, {
    var ts = parseTime($.values[0]).getTime(); // エポックミリ秒
    var lat = parseFloat($.values[1]);
    var lon = parseFloat($.values[2]);
    // name、time、value、lat、lonを出力
    $.yield("firenze", ts, 0, lat, lon)
})
// エポック値をミリ秒からナノ秒に換算してdatetime型に変換
MAPVALUE(1, time(value(1)*1000000))
// tripテーブルに挿入
SQL(`INSERT INTO TRIP (name, time, value, lat, lon) values(?,?,?,?,?)`, 
    value(0), value(1), value(2), value(3), value(4))

軌跡

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
SQL(`SELECT time, lat, lon FROM TRIP
     WHERE name = 'firenze' ORDER BY time`)
SCRIPT({
    // 時刻をエポックナノ秒に変換してDate(JavaScript)を生成
    var timestamp = new Date($.values[0].unixNano()/1000000); 
    // coordinate [lat, lon]
    var coord = [$.values[1], $.values[2]]; 
    $.yield({
        type:"circle",
        coordinates: coord,
        properties: {
            radius: 15,
            tooltip: {
                content: ""+timestamp
            }
        }
    });
})
GEOMAP()

距離と速度

ハバーサインの公式で2地点間の移動距離をメートル単位で計算し、 2地点の時刻差から移動速度を時速(km/h)で計算します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
SQL(`SELECT time, lat, lon FROM TRIP
     WHERE name = 'firenze' ORDER BY time`)
// 距離と速度を計算
SCRIPT({
    var EarthRadius = 6378137.0; // meters
    function degreesToRadians(d) { return d * Math.PI / 180; }
    function distance(p1, p2) {  // ハバーサインの公式による距離
        lat1 = degreesToRadians(p1[0]);
        lon1 = degreesToRadians(p1[1]);
        lat2 = degreesToRadians(p2[0]);
        lon2 = degreesToRadians(p2[1]);
        diffLat = lat2 - lat1;
        diffLon = lon2 - lon1;
        a = Math.pow(Math.sin(diffLat/2), 2) + Math.cos(lat1)*Math.cos(lat2)*Math.pow(Math.sin(diffLon/2), 2);
        c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        return c * EarthRadius;
    }
    var prevLoc, prevTs, dist;
},{
    var ts = $.values[0].unix(); // Unixエポック秒
    var coord = [$.values[1], $.values[2]];
    dist = prevLoc === undefined ? 0 : distance(prevLoc, coord);
    speed = prevTs === undefined ? 0 : dist*3.600 / (ts - prevTs);
    prevLoc = coord;
    prevTs = ts;
    $.yield({
        type:"circleMarker",
        coordinates: coord,
        properties: {
            radius: 4,
            tooltip: {
                content: "speed: "+speed.toFixed(0)+" KM/H<br/>"+
                         "dist: "+dist.toFixed(0)+" m",
            }
        }
    });
})
GEOMAP()
最終更新日