d3.js 国土地理院のベクトルタイルで基本情報を重畳する方法
解決したいこと
https://qiita.com/cieloazul310/items/bef587cf22e37a3652e5
こちらの方の記事を元に、道路や鉄道と共に通常の建物（基本情報）を
重畳したいと思っています。githubなどを見ると使用方法はほぼ同じなので
そのまま出力部分をコピペしてURLを変更すればよいのかと思いましたが、
何も出ませんでした。（場所は群馬県舘林付近にしました）
原因や、参考になるページなどあれば教えてください。
よろしくお願いいたします。
発生している問題・エラー
geojsonの取得方法はあっているはずですが、とれていません。
館林付近のデータがない・・という事は無いと思うのですが。
該当するソースコード
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-tile.v0.0.min.js"></script>
<style>
.chartcontainer {
width: 100%;
}
.map {
position: relative;
overflow: hidden;
}
path {
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
}
path.nation {
stroke: #ccc;
stroke-width: 4px;
}
path.pref {
stroke: #ddd;
stroke-width: 3px;
}
path.minor {
stroke: #ddd;
}
path.highway {
stroke: #aaa;
stroke-width: 6px;
}
path.station {
stroke: #e6d3ec;
stroke-width: 3px;
}
path.rail {
stroke: #777;
stroke-width: 1px;
}
.info {
position: absolute;
bottom: 10px;
left: 20px;
}
.landmarks {
font-family: sans-serif;
font-weight: 600;
fill: #777;
font-size:9px;
}
.landmarks.region {
font-size:20px;
fill: black;
}
.landmarks.area {
font-weight: 200;
fill: #333;
font-size:16px;
}
</style>
</head>
<body>
<div class="chartcontainer"></div>
<script>
var pi = Math.PI;
var tau = 2 * pi;
// 表示するズームレベルとタイルを取得するズームレベルを別個に定義
var zoom = {view: 13.5, tile: 16};
var center = [139.527322, 36.245578];//[140.461321, 36.374950];
var width = $(".chartcontainer").width();
var height = 480;
// ズームレベルの差をdzとすると、2^dzを変数magで定義
// 今回の場合は2^(16-14)=2^2=4となる
var mag = Math.pow(2, zoom.tile - zoom.view);
// projectionのスケールは表示するズームレベルを指定
var projection = d3.geoMercator()
.center(center)
.scale(256 * Math.pow(2, zoom.view) / tau)
.translate([width / 2, height / 2]);
var path = d3.geoPath()
.projection(projection);
// d3.tile()のサイズにmagを掛ける
var tile = d3.tile()
.size([width * mag, height * mag]);
var map = d3.select(".chartcontainer").append("svg")
.attr("class", "map")
.attr("width", width)
.attr("height", height);
var info = d3.select(".chartcontainer").append("div")
.attr("class", "info")
.append("h4");
// geojsonファイルの属性からclassを与える関数
function roadClass(prop) {
return prop == "国道" ? "nation" :
prop == "都道府県道" ? "pref" :
prop == "高速自動車国道等" ? "highway" : "minor";
}
map.selectAll(".tile")
.data(tile
.scale(projection.scale() * tau * mag) // magを掛ける
.translate(projection([0, 0]).map(function(v){return v * mag;}))) //magを掛ける
.enter()
.append("g")
.attr("class","tile")
.each(function(d) {
// このgが各タイル座標となる
var g = d3.select(this);
d3.json("http://cyberjapandata.gsi.go.jp/xyz/experimental_railcl/" + d[2] + "/" + d[0] + "/" + d[1] + ".geojson", function(error, json) {
if (error) throw error;
g.selectAll(".rail")
.data(json.features)
.enter().append("path")
.attr("class", function(d) {
return d.properties.snglDbl == "駅部分" ? "station" :
"rail";
})
.attr("d", path)
.style("stroke", "red");
});
d3.json("http://cyberjapandata.gsi.go.jp/xyz/experimental_fgd/" + d[2] + "/" + d[0] + "/" + d[1] + ".geojson", function(error, json) {
if (error) throw error;
g.selectAll(".building")
.data(json.features)
.enter().append("path")
.attr("d", path)
.style("stroke", "black");
});
});
</script>
</body>
自分で試したこと
テキストなどは重畳してできたので、githubにあったサンプルを重畳してみたりしたのですが、
出来ませんでした。
https://cyberjapandata.gsi.go.jp/xyz/experimental_fgd/18/233094/102736.geojson
よろしくお願いいたします。
