【D3.js】MapBoxから取得した地図画像(ラスタタイル)をSVGのClipPathでくり抜く
MapBoxから取得した地図画像をtopojsonで読み込んだ日本地図(svg:path)でくり抜きます。
サンプル
D3ライブラリのほかにtopojsonプラグインと、d3.geo.tileプラグインを読み込みます。
|
1 2 3 |
<script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/d3.geo.tile.v0.min.js"></script> <script src="http://d3js.org/topojson.v1.min.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
d3.json("japan.topojson", function(topology) { d3main(topology); }); function d3main(topology){ var svg = d3.select("svg"); var projection = d3.geo.mercator() .center([141.15448379999998,39.702053]) .scale(1300); //パスジェネレーター var path = d3.geo.path().projection(projection); //参照用のdefs要素を追加 var defs = svg.append("defs"); //defs要素内に日本地図のpathを記述 var land = defs.append("path") .datum(topojson.feature(topology, topology.objects.japan)) .attr({ "id": "land", "d": path }); //日本地図のパスをclipPathとして登録 var clipPath = defs.append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", "#land"); //タイル座標生成関数 var tile = d3.geo.tile() .scale(projection.scale() * 2 * Math.PI) .translate(projection([0, 0])) .zoomDelta((window.devicePixelRatio || 1) - .5); //タイル座標データ生成 var tiles = tile(); //ラスタタイルを追加するグーループを生成 var img = svg.append("g") .attr({ "clip-path": "url(#clip)", //クリップパスを指定 "transform": "translate("+[0, 0]+")" }); //ラスタタイルをimage要素として追加 img.selectAll("image") .data(tiles) //タイル座標データを指定 .enter() .append("image") .attr({ "xlink:href": function(d){ return "http://" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com/v3/mapbox.natural-earth-2/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; }, "width": Math.round(tiles.scale), "height": Math.round(tiles.scale), "x": function(d) { return Math.round((d[0] + tiles.translate[0]) * tiles.scale); }, "y": function(d) { return Math.round((d[1] + tiles.translate[1]) * tiles.scale); } }); } |
