Geçtiğimiz iki gün için broşürde çok basit bir harita çizmeye çalışıyorum ve duvara çarpıyorum.D3 kullanarak broşürde görünecek bir topojson tabakası nasıl alabilirim?
Önceki jeoJSON dosyalarından yapılmış iki katmana sahip bir topoJSON dosyası var: 5 eyalet için ABD zip kodları ve 5 durumun çokgenleri.
Bunları broşürde görüntülemek istiyorum ve zip kodları katmanı ile daha küçük dosya boyutu nedeniyle geoJSON yerine topoJSON kullanmak önemlidir.
Sorun şu ki, topoJSON dosyamdaki haritadaki küçük durum katmanını bile almama izin veremiyorum. İnternette birçok örneğe baktım ve Mike Bostock'un örneğini izledim: https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/leaflet/index.html#L131-171.
Dosyayı sadece d3 kullanarak bir web tarayıcısında görüntülenecek şekilde alabilirim, bu yüzden dosya düzgün. Komutta topojson.feature yöntemi ile birlikte topoJSON'un v1 kullanıyorum. Kod aşağıda. TopoJSON dosyasını hazırlayamıyorum, ama bunun iyi olduğunu varsayıyorum çünkü daha önce d3 ile kullanıyorum. Birisi senaryodaki bir şeyden saptırabilirse, bu harika olur.
Teşekkürler.
<!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() 'çağrısının çıktısını kontrol ettiniz mi? Doğru görünüyor mu? 'Claim_states' anahtarının doğru ve müsait olduğundan emin misiniz? – nrabinowitz