8
私はリーフレットで過去2日間非常に単純な地図を作って壁に当っています。d3を使用してチラシにtopojsonレイヤーを表示するにはどうすればよいですか？
私は以前のgeoJSONファイルから作られたtopoJSONファイルを持っています：5州の米国の郵便番号と5州のポリゴン。
これらをリーフレットに表示したいのですが、geoJSONの代わりにtopoJSONを使用することが重要です。なぜなら、郵便番号層のファイルサイズが小さいためです。
問題は私の人生のために私のtopoJSONファイル内の小さな州の層さえ地図上に表示することはできません。私はWeb上でたくさんの例を見てきて、Mike Bostockの例に従った：https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/leaflet/index.html#L131-171。
ファイルがWebブラウザに表示されるのはd3だけなので、ファイルは正常です。私はスクリプトのtopojson.featureメソッドと一緒にtopoJSONのv1を使用しています。コードは以下の通りです。 topoJSONファイルを使用できるようにすることはできませんが、以前はd3で使用していたので、それは問題ありません。誰かがスクリプトを使って何かを見つけ出すことができたら、それはすばらしいでしょう。
ありがとうございました。
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<title>Gulf Zip Codes</title>
</head>
<div id="map"></div>
<style type="text/css">
#map {
height: 800px;
}
path {
fill: #000;
fill-opacity: .1;
stroke: #fff;
stroke-width: 1.5px;
}
path:hover {
fill: #1f77b4;
fill-opacity: .4;
}
</style>
<body>
<script>
var map = L.map('map').setView([32.546813, -88.374023], 6);
L.tileLayer('http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/998/256/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
d3.json("states_and_codes.json", function(error, states_and_codes) {
var bounds = d3.geo.bounds(states_and_codes);
path = d3.geo.path().projection(project);
var feature = g.selectAll("path")
.data(topojson.feature(states_and_codes, states_and_codes.objects.claim_states).features)
.enter().append("path")
.attr("class", "path")
.attr("d",path);
map.on("viewreset", reset);
reset();
// Reposition the SVG to cover the features.
function reset() {
var bottomLeft = project(bounds[0]),
topRight = project(bounds[1]);
svg .attr("width", topRight[0] - bottomLeft[0])
.attr("height", bottomLeft[1] - topRight[1])
.style("margin-left", bottomLeft[0] + "px")
.style("margin-top", topRight[1] + "px");
g .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
feature.attr("d", path);
}
// Use Leaflet to implement a D3 geographic projection.
function project(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
}
});
</script>
</body>
'topojson.feature（）'コールの出力を調べましたか？それは正しいか？ 'claim_states'キーが正しいのですか？ – nrabinowitz