[Gist] https://gist.github.com/Hirosaji/5640cb9123673372da2b8ed826cb5c37
Built with blockbuilder.org
xxxxxxxxxx
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
#mapid { height: 500px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script>
d3.json("ken.geojson", function(json) {
mapdraw(json);
});
function mapdraw(json){
//地形データ取得
if (json.type === "Topology"){
//読み込みファイルがtopojsonの場合(json.objects.△△) 「△△」は変換時のgeojsonファイル名に合わせる
var geojson = topojson.feature(json, json.objects.ken)
} else {
var geojson = json;
}
//Leaflet初期設定
var map = L.map('mapid').setView([38.2, 137.2], 5);
var mapLink = '<span class="removed_link" title="https://portal.cyberjapan.jp/help/termsofuse.html">国土地理院 地理院地図 標準地図</span>';
//Tile Map Serviceの指定
L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
//Leafletに用意されたsvgを使う
map._initPathRoot();
// svg要素を選択
var svg = d3.select("#mapid").select("svg");
var g = svg.append("g");
//緯度経度->パスジェネレーター関数作成
var transform = d3.geo.transform({point: projectPoint});
var path = d3.geo.path().projection(transform);
featureElement = g.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr({
"stroke": "red",
"fill": "green",
"fill-opacity": 0.4
});
map.on("viewreset", update);
update();
//pathのd属性を更新
function update() {
featureElement.attr("d", path);
}
//位置→座標変換
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}
}
</script>
</body>
https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js
https://d3js.org/d3.v3.min.js