{"id":3029,"date":"2013-09-02T09:12:34","date_gmt":"2013-09-02T00:12:34","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3029"},"modified":"2017-02-03T01:19:42","modified_gmt":"2017-02-02T16:19:42","slug":"post-3029","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3029","title":{"rendered":"\u3010D3.js\u3011\u30e9\u30b9\u30bf\u30fc\u5730\u56f3\u306e\u30d1\u30f3\uff0f\u30ba\u30fc\u30e0\uff06\u79fb\u52d5"},"content":{"rendered":"<p><strong><a href=\"http:\/\/www.openstreetmap.org\/\">OpenStreetMap<\/a><\/strong><br \/>\n<iframe loading=\"lazy\" width=\"100%\" height=\"300\" scrolling=\"no\" src=\"http:\/\/shimz.me\/example\/d3js\/geo_template\/geoTile_OSM\/\"><\/iframe><\/p>\n<p>TMS(Tile Map Service)\u304b\u3089\u5730\u56f3\u753b\u50cf(\u30e9\u30b9\u30bf\u30fc)\u3092\u53d6\u5f97\u3057\u3001SVG\u306eimage\u8981\u7d20\u3068\u3057\u3066\u4e26\u3079\u307e\u3059\u3002<br \/>\n\u30de\u30a6\u30b9\u30db\u30a4\u30fc\u30eb\u3067\u30d1\u30f3\uff0f\u30ba\u30fc\u30e0\u3001\u30c9\u30e9\u30c3\u30b0\u3067\u79fb\u52d5\u3057\u307e\u3059\u3002<\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<p>D3.js\u3068\u3001d3.geo.tile\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:xhtml decode:true \" >\r\n&lt;script src=&quot;http:\/\/d3js.org\/d3.v3.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script src=&quot;http:\/\/d3js.org\/d3.geo.tile.v0.min.js&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<pre class=\"lang:js mark:49-51 decode:true \" >var width = Math.max(960, window.innerWidth);\r\nvar height = Math.max(500, window.innerHeight);\r\n\r\n\/\/\u30bf\u30a4\u30eb\u5ea7\u6a19\u53d6\u5f97\u30b8\u30a7\u30cd\u30ec\u30a4\u30bf\u30fc\r\nvar tile = d3.geo.tile().size([width, height]);\r\n\r\n\/\/\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb\u306e\u7bc4\u56f2\r\nvar minZoomLevel = 14;\r\nvar maxZoomLevel = 24;\r\n\r\n\/\/\u6295\u5f71\u6cd5\u306e\u8a2d\u5b9a\r\nvar projection = d3.geo.mercator()\r\n    .scale((1 &lt;&lt; minZoomLevel) \/ 2 \/ Math.PI) \/\/ \u521d\u671fscale 2607.5945...\r\n    .translate([width \/ 2, height \/ 2]);\r\n\r\n \/\/\u521d\u671f\u8868\u793a\u5ea7\u6a19\r\nvar center = projection([139.3555791,34.7500396]);\r\n\r\n\r\n\/\/svg\u8981\u7d20\u306e\u53d6\u5f97\r\nvar svg = d3.select(&quot;svg&quot;)\r\n    .attr({\r\n\t&quot;width&quot;: width,\r\n\t&quot;height&quot;: height\r\n    });\r\n\r\n\/\/\u5730\u56f3\u753b\u50cf\u7528\u30b0\u30eb\u30fc\u30d7\r\nvar raster = svg.append(&quot;g&quot;);\r\n\r\n\/\/zoom\u6642\u306b\u547c\u3070\u308c\u308b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\r\nvar zoomed = function() {\r\n    \/\/\u30bf\u30a4\u30eb\u4f4d\u7f6e\u60c5\u5831\u751f\u6210\r\n    var tiles = tile\r\n\t.scale(zoom.scale())\r\n\t.translate(zoom.translate())\r\n\t(); \/\/ tile()\u3001\u95a2\u6570\u5b9f\u884c\u306e\u305f\u3081\r\n     \r\n    \/\/\u30bf\u30a4\u30eb\u4f4d\u7f6e\u60c5\u5831\u3092\u675f\u7e1b   \r\n    var image = raster\r\n\t.attr(&quot;transform&quot;, &quot;scale(&quot; + tiles.scale + &quot;)translate(&quot; + tiles.translate + &quot;)&quot;)\r\n\t.selectAll(&quot;image&quot;).data(tiles, function(d) { return d; });\r\n\r\n    \/\/\u5fc5\u8981\u306a\u304f\u306a\u3063\u305f\u5730\u56f3\u753b\u50cf\u3092\u524a\u9664\r\n    image.exit().remove();\r\n    \r\n    \/\/\u65b0\u305f\u306a\u5730\u56f3\u753b\u50cf\u3092\u8ffd\u52a0\r\n    image.enter().append(&quot;image&quot;)\r\n\t.attr(&quot;xlink:href&quot;, function(d) {\r\n\t    return &quot;http:\/\/&quot; + [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;][Math.random() * 3 | 0] +\r\n\t    &quot;.tile.openstreetmap.org\/&quot; +\r\n\t    d[2] + &quot;\/&quot; + d[0] + &quot;\/&quot; + d[1] + &quot;.png&quot;;\r\n\t})\r\n\t.attr({\r\n\t    &quot;width&quot;: 1,\r\n\t    &quot;height&quot;: 1,\r\n\t    &quot;x&quot;: function(d) { return d[0]; },\r\n\t    &quot;y&quot;: function(d) { return d[1]; }\r\n\t})\r\n\r\n}\r\n\r\n\/\/\u30ba\u30fc\u30e0\u30d3\u30d8\u30a4\u30d3\u30a2\u751f\u6210\r\nvar zoom = d3.behavior.zoom()\r\n    .scale(projection.scale() * 2 * Math.PI)\r\n    .scaleExtent([1 &lt;&lt; minZoomLevel, 1 &lt;&lt; maxZoomLevel])\r\n    .translate([width - center[0], height - center[1]])\r\n    .on(&quot;zoom&quot;, zoomed);\r\n\r\n    \/\/projection\u3092\u4e00\u5fdc\u521d\u671f\u3059\u308b\r\n    projection\r\n    .scale(1 \/ 2 \/ Math.PI)\r\n    .translate([0, 0]);\r\n\r\n    \/\/\u30ba\u30fc\u30e0\u30d3\u30d8\u30a4\u30d3\u30a2\u3092svg\u8981\u7d20\u306b\u675f\u7e1b\r\n    svg.call(zoom);\r\n    zoomed(); \/\/\u521d\u56de\u3060\u3051\u5b9f\u884c<\/pre>\n<p>\u30cf\u30a4\u30e9\u30a4\u30c8\u3057\u3066\u3044\u308b50\u884c\u4ed8\u8fd1\u304cTMS\u306e\u753b\u50cf\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u308b\u90e8\u5206\u3067\u3059\u3002\u3053\u3053\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u3067\u4ed6\u306eTMS\u304b\u3089\u5730\u56f3\u753b\u50cf\u3092\u53d6\u5f97\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<hr>\n<\/hr>\n<p><strong><span class=\"removed_link\" title=\"http:\/\/maps.stamen.com\/#watercolor\/12\/37.7706\/-122.3782\">stamen<\/span><\/strong><\/p>\n<pre class=\"start-line:49 lang:js decode:true \" >return &quot;http:\/\/tile.stamen.com\/toner\/&quot;+\r\n\td[2] + &quot;\/&quot; + d[0] + &quot;\/&quot; + d[1] + &quot;.png&quot;;\r\n<\/pre>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" scrolling=\"no\" src=\"http:\/\/shimz.me\/example\/d3js\/geo_template\/geoTile_stamen\/\"><\/iframe><\/p>\n<p><strong><a href=\"http:\/\/cloudmade.com\/\">CloudMade<\/a><\/strong><\/p>\n<pre class=\"start-line:49 lang:js decode:true \" >return &quot;http:\/\/&quot;+ [&quot;a.&quot;, &quot;b.&quot;, &quot;c.&quot;][Math.random() * 3 | 0]+&quot;tile.cloudmade.com&quot;\r\n\t+ &quot;\/1a1b06b230af4efdbb989ea99e9841af&quot; \/\/ http:\/\/cloudmade.com\/register\r\n\t+ &quot;\/999\/256\/&quot;+d[2]+&quot;\/&quot;+d[0]+&quot;\/&quot;+d[1]+&quot;.png&quot;;\r\n<\/pre>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" scrolling=\"no\" src=\"http:\/\/shimz.me\/example\/d3js\/geo_template\/geoTile_CloudMade\/\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>OpenStreetMap TMS(Tile Ma&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3032,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-3029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3-js","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=3029"}],"version-history":[{"count":1,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3029\/revisions"}],"predecessor-version":[{"id":3253,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3029\/revisions\/3253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3032"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}