標高タイル-完-


取り敢えずこんなもんで。
単純ミスで良かったが変数名とか直してないのでやはり適当。
万が一参考にするようなことがある際は注意

DEM-MAP

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

取り敢えずコードは以下のように

//標高からRGB色へ
function elev2argb(elv) {
  var r = 0;
  var g = 0;
  var b = 0;
  var alp = elv < 0 ? 0 : 180;

  if (elv == 'e') {
    pxData = 0;
    b = 256;
    alp = 60;
  } else {
    elv = elv * 100;

    b = parseInt(elv / (256 * 256));
    g = parseInt((elv - b) / 256);
    r = parseInt(elv - b - g);
  }
  return { a: alp, r: r, g: g, b: b };
}
//RGB色から標高へ
function rgba2elev(rgba) {
  var r, g, b, alp;
  r = rgba[0];
  g = rgba[1] * 256;
  b = rgba[2] * 256 * 256;
  alp = rgba[3];
  var returnZ = (r + g + b) / 100;

  if (alp < 1 && returnZ != 0) {
    returnZ = returnZ * -1;
  } else if (alp < 61 && 255 < b) {
    returnZ = 'n/a';
  } //end if
  return returnZ;
} //end function

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

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

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

  drawTile: function (canvas, tilePoint) {

    if (this._getZoomForUrl() != 14) {
      //レベル14でなければ枠を描画して終わる
      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) {
      //不要な改行を取り除く
      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 = 256;
      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 = (col + row * width) * 4;

          var pxData = txtData[col + row * width];
          var argb = elev2argb(pxData);

          imgDt[imgInx + 0] = argb.r; //r
          imgDt[imgInx + 1] = argb.g; //g
          imgDt[imgInx + 2] = argb.b; //b
          imgDt[imgInx + 3] = argb.a; //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 z = rgba2elev(p);
        var msg = 'x=' + x + ' y=' + y + '  Z=' + z;

        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);
カテゴリー: 開発 タグ: パーマリンク