標高タイルのデバッグ


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

標高タイル-完-

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

とりあえず昨日の続き
地理院地図標高タイルを描画

デバック用サンプルつくっただけだが。
DEM-DEBUG

仮置き場
http://jpusergis.site44.com/GSILayer70DEM-DEBUGAPP.html

コード概要下記

var std = L.gsiLayer('std');

var map = L.map('map', {
  center: new L.LatLng(36.0, 140.0),
  zoom: 14
});
std.addTo(map);

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

  drawTile: function (canvas, tilePoint) {

    if (this._getZoomForUrl() != 14) {
      //レベル14でなければc1-28567?当に描画して終わる
      var ctx = canvas.getContext('2d');
      ctx.font = "24px Arial";
      ctx.fillText("L" + this._map.getZoom() +
                " X" + tilePoint.x +
                " Y" + tilePoint.y, 50, 50);

      ctx.lineWidth = 2;
      ctx.strokeStyle = 'black';
      ctx.strokeRect(10, 10, 245, 245);
      return;
    }

    //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) {
      //不c1-30335?な改c1-30644?を取りc1-27036?く
      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];

          var r = 0;
          var g = 0;
          var b = 0;
          var alp = pxData < 1 ? 0 : 180;
          //if (pxData.replace(/(^\s+)|(\s+$)/g, "") == 'e') {
          if (pxData == 'e') {
            pxData = 0;
            r = 255;
            alp = 60;
          } else {
            r = parseInt(pxData / 100.0);
            g = parseInt(pxData - (r * 100));
            b = parseInt((pxData - (r * 100) - g) * 100);
          }
          imgDt[imgInx + 0] = r; //r
          imgDt[imgInx + 1] = g; //g
          imgDt[imgInx + 2] = b; //b
          imgDt[imgInx + 3] = alp; //a
        }
      }
      canvas.onclick = function (e) {

        var x = e.offsetX;
        var y = e.offsetY;

        var ctx2d = this.getContext('2d');
        var p = ctx2d.getImageData(x, y, 1, 1).data;

        var ll = map.mouseEventToLatLng(e);
        var marker = L.marker(ll).addTo(map);
        var msg = 'x=' + x + ' y=' + y + '  Z=' + (p[0] * 100.0 + p[1] + p[2] / 100.0);

        /* r = 255; alp = 60; */
        if (p[0] == 255 && alp == 60) {
          msg = 'x=' + x + ' y=' + y + '  Z=N/A';
        }

        msg += "<br />" + ll.lat + " : " + ll.lng;
        msg += "<br />" + "<a href=\"" + url + "\">txt</a>";

        marker.bindPopup(msg).openPopup();

      };

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

    });
  }
});

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