2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【MapLibre GL JS】flyToで目的地までジャンプする

Posted at

はじめに

この記事は#30DayMapChallenge2022 6日目の記事です。
テーマはNetworkです。
MapLibre GL JSを使って羽田空港と新千歳空港のマーカーを地図上に表示して、2地点間をジャンプしてみます。

image

地図表示

東京と北海道が収まるように表示してみます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>サンプル</title>
    <meta name="description" content="サンプルです">
    <link href="style.css" rel="stylesheet">
    <!-- MapLibre -->
    <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
    <div id="map"></div>
    <script src="main.js"></script>
</body>
</html>
style.css
body {
    margin: 0;
    padding: 0;
}
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
main.js
var map = new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: [138.508, 40.351], // 中心座標
    zoom: 5.5, // ズームレベル
    pitch: 0, // 傾き
});

image.png

空港のマーカー表示

今回は羽田空港と新千歳空港のマーカーを表示してみます。

var map = new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: [138.508, 40.351], // 中心座標
    zoom: 5.5, // ズームレベル
    pitch: 0, // 傾き
});

+var haneda_marker = new maplibregl.Marker()
+    .setLngLat([139.7663947, 35.5437833])
+    .addTo(map);

+var shinchitose_marker = new maplibregl.Marker()
+    .setLngLat([141.681229, 42.7875897])
+    .addTo(map);

image.png

flyOptionsを追加する

flyOptionsでflyToを使用して、目的の空港へとジャンプします
公式のサンプルコードを参考に実装しました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>サンプル</title>
    <meta name="description" content="サンプルです">
    <link href="style.css" rel="stylesheet">
    <!-- MapLibre -->
    <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
    <div id="map"></div>
+   <button id="fly">空港にジャンプ!</button>
    <script src="main.js"></script>
</body>
</html>
body {
    margin: 0;
    padding: 0;
}
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

+#fly {
+    display: block;
+    position: relative;
+    margin: 30px auto;
+    width: 15%;
+    height: 50px;
+    padding: 10px;
+    border: none;
+    border-radius: 50px;
+    font-size: 20px;
+    text-align: center;
+    color: #fff;
+    background: #0067c0;
+    cursor: pointer;
+}
+#fly:hover {
+    transform: scale(1.1, 1.1);
+}
var haneda_location = [139.7663947, 35.5437833];
var shinchitose_location = [141.681229, 42.7875897];

var map = new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: haneda_location, // 中心座標
    zoom: 11, // ズームレベル
    pitch: 0, // 傾き
});

var haneda_marker = new maplibregl.Marker()
    .setLngLat(haneda_location)
    .addTo(map);

var shinchitose_marker = new maplibregl.Marker()
    .setLngLat(shinchitose_location)
    .addTo(map);

var isAtStart = true;

document.getElementById('fly').addEventListener('click', function () {
    var target = isAtStart ? shinchitose_location : haneda_location;
    isAtStart = !isAtStart;

    map.flyTo({
        center: target,
        zoom: 9,
        bearing: 0,
        speed: 0.4,
        curve: 1,
        easing: function (t) {
            return t;
        },
        essential: true,
    });
});

fly7.gif

ボタンをクリックすると羽田空港から新千歳空港へジャンプできました!
新千歳空港から羽田空港にも飛べます。

余談: GIF作成

使用したアプリ

Qiitaに挿入したGIFの作成には「ScreenToGIF」を使いました。
窓の杜から、ストアアプリ版をダウンロードしました。

普通に録画して保存したところ115MBで、Qiitaの制限を超えてしまいました。

画像のアップロード方法
ファイル単体で10MBまでの画像ファイルをアップロードすることが可能です。
画像ファイルは月に合計100MBまでしかアップロードできません。

ファイルサイズ削減

ファイルサイズを下げるため以下の2点を実施しました。これで115MB→7MBまで削減しました。

  • フレームの重複削除
  • フレーム数削減
    • GIFがカクカクなのはこのためです(T_T)

再生速度調整

再生を早くするために以下を実施しました。

  • スケールを50%に設定
    • 2倍速になりました!

参考文献

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?