地域メッシュをJSのみで作成


下記二つと関連Lib組み合わせただけ。

js2shapefile
https://code.google.com/p/js2shapefile/

Esri/geojson-utils
https://github.com/Esri/geojson-utils

仮置き場 ( Chromeでないと駄目かも )
http://jpusergis.site44.com/GeoJsonShp.html

右上で制御 表示範囲で適当にメッシュを作る
mesh_export

mesh_shp

前記事のコードに足して

コード主要部 ( libはJavascriptでShapefileを出力の記事参照 )

L.Control.JpnMesh = L.Control.extend({
  onAdd: function (map) {
    this.map = map;
    this.group = L.layerGroup();
    this.group.addTo(map);

    map.on("move", this._onMapMove.bind(this));

    var container = L.DomUtil.create('div', '');
    container.style.border = 1;
    container.style.backgroundColor = 'white';
    container.style.borderRadius = 10;

    var dt = new Date();
    container.id = 'JpnMeshDiv' + String(dt.getHours())
      + String(dt.getMinutes()) + String(dt.getSeconds()) + String(dt.getMilliseconds());
    this._id = container.id;

    var input = L.DomUtil.create('input', '', container);
    input.type = 'button';
    input.value = 'ShapeFile出力';
    //L.DomEvent.on(input, 'change', this._handleFileSelect, this);
    L.DomEvent.on(input, 'click', this._exportShp, this);
    input.disabled = true;
    this._input = input;

    if (!this.meshUtil)
      this.meshUtil = new JpnMesh();

    L.DomUtil.create('br', '', container);

    var select = L.DomUtil.create('select', '', container);

    var opt1 = L.DomUtil.create('option', '', select);
    opt1.value = 1;
    opt1.innerText = '1次メッシュ';

    for (var key in this.meshUtil._meshSplit) {
      var opt = L.DomUtil.create('option', '', select);
      opt.value = key;
      if (key < 4)
        opt.innerText = String(key) + '次メッシュ'
      else
        opt.innerText = '1/' + String(Math.pow(2, (key - 3))) + '地域メッシュ';
    }//end loop
    this._select = select;
    L.DomEvent.on(select, 'change', this._onMapMove, this);

    this._input = input;
    return container;
  },
  onRemove: function (map) {
    this._input.style.diplay = 'none';
  },
  _onMapMove: function () {
    if (this._handle) {
      window.clearTimeout(this._handle);
      this._handle = null;
    }
    var map = this.map;
    var group = this.group;
    var input = this._input;
    input.disabled = true;

    if (!this.meshUtil)
      this.meshUtil = new JpnMesh();
    var meshUtil = this.meshUtil;

    var select = this._select;
    select.disabled = true;
    var opt = select.options[this._select.selectedIndex];

    var inx = parseInt(opt.value);
    var preInx = inx - 1;;
    if (inx < 2)
      preInx = 1;
    else if (inx > 3)
      preInx = 2;


    this._handle = window.setTimeout(function () {
      console.log('Move');
      //var swAO = map.getBounds().getSouthWest();

      var center = map.getCenter();
      meshUtil.setLatLon(center.lat, center.lng);

      group.clearLayers();
      
      var res = meshUtil.latlonResults[preInx];
      var array = meshUtil.createTiles(res, inx);

      for (var i = 0; i < array.length; i++) {
        if (array[i].meshNo != inx)
          continue;

        var rect = L.rectangle(array[i].shp, { color: "#000", fillColor: "#80FF80", weight: 2 });
        rect.bindPopup(array[i].code);
        
        //rect.addTo(map);
        group.addLayer(rect);
        //console.log(jsonconverter.toEsri(rect.toGeoJSON()));
      }//end loop

      select.disabled = false;
      input.disabled = false;
    }, 1000);
  },
  _exportShp: function () {
    var group = this.group;
    var input = this._input;

    if (!this.jsonconverter)
      this.jsonconverter = geoJsonConverter();
    var jsonconverter = this.jsonconverter;

    var jsons = {
      type: 'FeatureCollection',
      features: []
    };
    group.eachLayer(function (layer) {
      var geoJson = layer.toGeoJSON();
      geoJson.properties['code'] = layer._popup.getContent();
      
      jsons.features.push(geoJson);
    });

    var esriFeatures = jsonconverter.toEsri(jsons);//group.toGeoJSON());
    for (var i = 0; i < esriFeatures.features.length; i++) {
      esriFeatures.features[i].geometry.type = 'polygon';
    }

    var shapewriter = new Shapefile();
    shapewriter.addESRIGraphics(esriFeatures.features);
    var outputObject = {
      points: shapewriter.getShapefile("POINT"),
      lines: shapewriter.getShapefile("POLYLINE"),
      polygons: shapewriter.getShapefile("POLYGON")
    }
    var saver = new BinaryHelper();
    var anythingToDo = false;
    for (var shapefiletype in outputObject) {
      if (outputObject.hasOwnProperty(shapefiletype)) {
        if (outputObject[shapefiletype]['successful']) {
          anythingToDo = true;
          for (actualfile in outputObject[shapefiletype]['shapefile']) {
            if (outputObject[shapefiletype]['shapefile'].hasOwnProperty(actualfile)) {
              saver.addData({
                filename: shapefiletype + "_mesh",
                extension: actualfile,
                datablob: outputObject[shapefiletype]['shapefile'][actualfile]
              });
            }
          }
        }
      }
    }//end loop
    if (anythingToDo) {
      var ct = document.getElementById(this._id);
      L.DomUtil.create('br', '', ct);
      saver.createSaveControl(this._id, true);

      ct.childNodes[ct.childElementCount - 1].value = '保存';
    }


  }//end func

});
L.control.jpnMesh = function (options) {
  return new L.Control.JpnMesh(options);
};
カテゴリー: 開発 タグ: パーマリンク