Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@masaminh

Leafletでマンデルブロ集合の表示してみる (2)

これまでのお話

前のお話
突然ですが、なんの脈絡もなく、マンデルブロ集合を描きたくなりました。
どうせやるならGoogle Mapみたいにスクロールしたり拡大したり…というのをやってみよう…ということで、手を動かしてみました。
で、前の話では、こんな構成でタイル画像を作ってみましたというところまでやりました。
↓こんな感じ↓
qiita_mandelbrot_tile.png

Leaflet

で、Leafletはこういうタイル画像を使ってスクロールや拡大縮小できるようにうまくやってくれるJavascriptライブラリです。

基本的に地図を表示するときと同じ使い方でいけるのですが、国土地理院の地理院タイル仕様に記載があるように

西経180度、北緯約85.0511度の北西端を端点にもつタイルを(0,0)として東方向をX正方向、南方向をY正方向にとります。

という座標系、ビットマップを描画する場合、左上が原点で、1ピクセル=1座標値、の方が都合よかったりするので、座標系として「L.CRS.Simple()」を指定するようにしています。
setViewで(-256 / 2, 256 / 2)としていますが、これは初期の中心座標を画像の中心にしている、ということ。
左上が原点で、上方向と右方向がプラス方向、緯度(y)経度(x)方向の順での指定なので、このような指定になっています。

<!DOCTYPE html>
<html>
<head>
    <title>Mandelbrot set</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
        integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
        crossorigin=""></script>
</head>
<body>
    <div id="map" style="width: 600px; height: 400px;"></div>
    <script>
        var mymap = L.map('map', {
            crs: L.CRS.Simple
        });
        mymap.setView(L.latLng(-256 / 2, 256 / 2), 0);
        L.tileLayer('https://masaminh.github.io/mandelbrot/tile/grayscale/{z}/{x}/{y}.png', {
            maxZoom: 6
        }).addTo(mymap);
    </script>
</body>
</html>

完成品

完成品はこちら

それなりに楽しめました(笑)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?