地理院地図標高タイルを描画


完成版は下記なので下記を見るべし。

標高タイル-完-

 
以下単純ミス等が含まれる内容。

とりあえずJQueryでgetして10m以下を青く塗ってみる。

ライブサンプル仮置場
http://jpusergis.site44.com/GSILayer70Height.html

demtile

ん!? 間違ったかな?
ところどころ接合されてところどころ切れてる?。
そのうち修正するかも
下記記事の標高タイル仕様から作成
地理院地図が更新

コード概要はこんな感じ

  var TestCanvas = L.TileLayer.Canvas.extend({

    drawTile: function (canvas, tilePoint) {
      //http://cyberjapandata.gsi.go.jp/xyz/dem/14/14547/6463.txt
      var url = L.Util.template("http://cyberjapandata.gsi.go.jp/xyz/dem/{z}/{x}/{y}.txt",
                  L.extend({
                    x: tilePoint.x,
                    y: tilePoint.y,
                    z: this._getZoomForUrl()
                  }, this.options));
      $.get(url, function (data) {
        //不要な改行を取り除く
        var txtData = data.replace(/[\n\r]/g, ",");
        txtData = txtData.split(",");
        //console.log("c1-28339?列数:" + txtData.length);
        var ctx = canvas.getContext('2d');
        var top, left, width, height;
        top = left = 0;
        width = height = 255;
        var imageData = ctx.getImageData(top, left, width, height);
        var imgDt = imageData.data;

        for (var row = 0; row < 256; row++) {
          for (var col = 0; col < 256; col++) {
            var imgInx = (row + col * width) * 4;

            var pxData = txtData[row + col * width];

            //if (pxData.replace(/(^\s+)|(\s+$)/g, "") == 'e') {
            if (pxData == 'e') {
              pxData = 0;
            }
            if (pxData < 10) {
              pxData = 255;
            } else {
              pxData = 0;
            }

            imgDt[imgInx + 0] = 0;//r
            imgDt[imgInx + 1] = 0;//g
            imgDt[imgInx + 2] = pxData;//b
            imgDt[imgInx + 3] = 100;//a
          }
        }

        imageData.data = imgDt;
        ctx.putImageData(imageData, 0, 0);

      });
    }
  });

  (new TestCanvas()).addTo(map);
カテゴリー: 開発 タグ: パーマリンク