Tôi đã cố gắng tạo một bản đồ rất đơn giản trên Leaflet trong hai ngày qua và đang đập vào tường.Làm thế nào để có được một lớp topojson để hiển thị trong tờ rơi bằng cách sử dụng d3?
Tôi có tệp topoJSON với hai lớp được tạo từ các tệp geoJSON trước đó: mã zip của Hoa Kỳ cho 5 tiểu bang và đa giác của 5 trạng thái.
Tôi muốn hiển thị chúng trên Leaflet và điều quan trọng là sử dụng topoJSON thay vì geoJSON do kích thước tệp nhỏ hơn với lớp mã zip.
Vấn đề là tôi không thể cho cuộc sống của tôi nhận được ngay cả các lớp tiểu bang nhỏ hơn trong tập tin topoJSON của tôi để hiển thị trên bản đồ. Tôi đã xem xét rất nhiều ví dụ trên web và theo ví dụ của Mike Bostock: https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/leaflet/index.html#L131-171.
Tôi có thể lấy tệp để hiển thị trong trình duyệt web bằng cách sử dụng chỉ d3, vì vậy tệp tin là tốt. Tôi đang sử dụng v1 của topoJSON cùng với phương thức topojson.feature trong tập lệnh. Mã dưới đây. Tôi không thể làm cho tập tin topoJSON có sẵn, nhưng tôi giả sử nó là tốt vì tôi đã sử dụng nó với d3 trước. Nếu ai đó có thể phát hiện ra điều gì đó bất ngờ với kịch bản, điều đó thật tuyệt vời.
Cảm ơn.
<!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>
Bạn đã kiểm tra đầu ra của lệnh 'topojson.feature()' chưa? Nó có nhìn đúng không? Bạn có chắc khoá 'claim_states' chính xác và có sẵn không? – nrabinowitz