リーフレットとレイヤーコントロールを持つシェイプファイルを表示

Question

こんにちは ローカルのホストシェイプファイルを表示するために、リーフレットを実装しようとしました。シェイプファイルの表示は機能しますが、レイヤーコントロール（トグルシェイプファイルレイヤー）を追加します。 プラグインのリンク：https://github.com/calvinmetcalf/shapefile-js

デモリンク：http://leaflet.calvinmetcalf.com/#3/32.69/10.55

私はデモページ

<script> 
var m = L.map('map').setView([0, 0 ], 10); 
var watercolor = 
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: 'Map tiles by <a href="http://stamen.com">Stamen 
Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 
3.0</a> &mdash; Map data &copy; <a 
href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a 
href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' 
    }).addTo(m); 

    var shpfile = new L.Shapefile('Fr_adm.zip', { 
     onEachFeature: function(feature, layer) { 
      if (feature.properties) { 
       layer.bindPopup(Object.keys(feature.properties).map(function(k) { 
        return k + ": " + feature.properties[k]; 
       }).join("<br />"), { 
        maxHeight: 200 
       }); 
      } 
     } 
    }); 
    shpfile.addTo(m); 
    shpfile.once("data:loaded", function() { 
     console.log("finished loaded shapefile"); 
    }); 
    // initialize stylable leaflet control widget 
var control = L.control.UniForm(null, overlayMaps, { 
     collapsed: false, 
     position: 'topright' 
    } 
); 
// add control widget to map and html dom. 
control.addTo(m); 


</script> 

Fr_adm.zipが表示されているシェープファイル上の層の制御、ない層制御を実装したいです。 ありがとうございます。

Answer 1

overlayMapsは定義されていません。コンソールを開くと、これを示すエラーが表示されます。

L.control.UniFormマップ（リーフレットのan extension）のドキュメントを見ると、私たちが見ることができます：

/ ** 
* standard leaflet code. 
**/
// initialize stylable leaflet control widget 
var control = L.control.UniForm(null, overlayMaps, { 
     collapsed: false, 
     position: 'topright' 
    } 
); 

はこの中overlayMapsは何ですか？答えるには、標準リーフレットコードのdocumentationを参照する必要があります。 overlayMapsは、キーとオブジェクトのペアのリストです。

... 2つのオブジェクトを作成します。 1つは基本レイヤーを含み、 は1つはオーバーレイを含みます。これらは、 のキーと値のペアを持つ単純なオブジェクトです。キーはコントロール （例：「Streets」）のレイヤーのテキストを設定し、対応する値は レイヤー（ストリートなど）への参照です。

var baseMaps = { 
    "Grayscale": grayscale, 
    "Streets": streets 
}; 

var overlayMaps = { 
    "Cities": cities 
}; 

その結果、あなたの例ではoverlayMapsは、次のようになります。あなたは通常どおり層のコントロールを作成することができるはず定義したら

var overlayMaps = {"Name To Display":shpfile } 

。

Answer 2

コード内に間違いがあります。オーバーレイ値はありません。だから私は、これで試してみてください。

<script type="text/javascript" charset="UTF-8"> 

//---------------- 
var watercolor = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 

     }); 
    var geo = L.geoJson({features:[]},{onEachFeature:function popUp(f,l){ 
      var out = []; 
      if (f.properties){ 
       for(var key in f.properties){ 
       out.push(key+": "+f.properties[key]); 
     } 
     l.bindPopup(out.join("<br />")); 
    } 
    }}); 
    var m = L.map('map', { 
    center: [10, -1], 
    zoom: 6, 
    layers: [watercolor, geo ] 
}); 

//}}).addTo(m); 
     var base = 'Fr_admin.zip'; 
     shp(base).then(function(data){ 
     geo.addData(data); 
     }); 

    var baseMaps = { 
    "BaseLayer": watercolor 
}; 
var overlays = { 
     "shapefile": geo 
    }; 
L.control.layers(baseMaps,overlays).addTo(m); 




     </script> 

それは仕事が、私はシェープファイルを表示するかどうかを選択できます。 ここではすべてのセグメント化を返しません：http://leaflet.calvinmetcalf.com/#3/32.69/10.55

ありがとう