{"id":2703,"date":"2013-04-02T14:29:54","date_gmt":"2013-04-02T05:29:54","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=2703"},"modified":"2017-11-06T11:37:43","modified_gmt":"2017-11-06T02:37:43","slug":"post-2703","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/2703","title":{"rendered":"\u3010D3.js + GMap\u3011\u7fa4\u99ac\u770c\u306e\u904e\u758e\u5730\u57df"},"content":{"rendered":"<p><a href=\"http:\/\/shimz.me\/example\/d3js\/geo_example\/geo9\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/04\/kasomap.jpg\" alt=\"\u7fa4\u99ac\u770c\u904e\u758e\u5730\u57df\" width=\"497\" height=\"499\" class=\"aligncenter size-full wp-image-2704\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/04\/kasomap.jpg 497w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/04\/kasomap-150x150.jpg 150w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/04\/kasomap-149x150.jpg 149w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/04\/kasomap-100x100.jpg 100w\" sizes=\"auto, (max-width: 497px) 100vw, 497px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/geo_example\/geo9\/\">example<\/a><\/p>\n<p>\u9031\u672b\u306b\u30ce\u30de\u30c9\u308a\u306a\u304c\u3089\u4f5c\u3063\u305f\u3082\u306e\u3002<br \/>\n\u6280\u8853\u7684\u306b\u306f<span class=\"removed_link\" title=\"https:\/\/gunmagisgeek.com\/blog\/d3-js\/2379\">\u4ee5\u524d\u306e\u8a18\u4e8b<\/span>\u306e\u5ef6\u9577\u7dda\u4e0a\u306e\u3082\u306e\u306a\u306e\u3067\u3001\u65b0\u3057\u3044\u90e8\u5206\u306f\u306a\u3044\u3002<br \/>\n\u672c\u5f53\u306f\u3001\u904e\u53bb\u306e\u30c7\u30fc\u30bf\u3082\u4f7f\u3063\u3066\u904e\u758e\u5730\u57df\u306e\u9077\u79fb\u3092\u8868\u793a\u3057\u3066\u307f\u3088\u3046\u3068\u601d\u3063\u305f\u306e\u3060\u3051\u308c\u3069\u3001\u662d\u548c45\u5e74\u306e\u30c7\u30fc\u30bf\u3068\u6bd4\u8f03\u3057\u3066\u3082\u305d\u3093\u306a\u306b\u9055\u3044\u304c\u306a\u304b\u3063\u305f\u306e\u3067\u65ad\u5ff5\u3002<br \/>\n\u3069\u3046\u305b\u306a\u3089\u3001OpenLayers\u3067\u540c\u3058\u4e8b\u304c\u3067\u304d\u308b\u304b\u8a66\u305b\u3070\u3088\u304b\u3063\u305f\u304b\u3082\u3002<br \/>\n<del datetime=\"2013-05-07T09:42:13+00:00\">D3.js\u3067\u904e\u758e\u5730\u57df\u306eSVG\u3092\u63cf\u3044\u3066GoogleMap\u306e\u30ec\u30a4\u30e4\u30fc\u306b\u91cd\u306d\u3066\u3044\u308b\u3051\u308c\u3069\u3001\u30ba\u30fc\u30e0\uff0f\u30d1\u30f3\u3057\u305f\u969b\u306e\u518d\u8a08\u7b97\u304c\u7d50\u69cb\u91cd\u3044\u3002<\/del><br \/>\ndraw\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3\u304c\u547c\u3070\u308c\u308b\u5ea6\u306bgeojson\u3092\u8aad\u307f\u8fbc\u307f\u76f4\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u308a\u3083\u9045\u3044\u308f\u3000orz<br \/>\n\u30b3\u30fc\u30c9\u4fee\u6b63\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u5168\u56fd\u306e\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3059\u308b\u306a\u3089\u3001KML\u306b\u3057\u3066<a href=\"https:\/\/gunmagisgeek.com\/blog\/map\/2670\">Fusion Tables<\/a>\u3092\u4f7f\u3063\u305f\u65b9\u304c\u826f\u3044\u304b\u3082\u3002<\/p>\n<p>\u3042\u3068\u3001\u56fd\u571f\u6570\u5024\u60c5\u5831\u30b5\u30a4\u30c8\u306f\u90fd\u9053\u5e9c\u770c\u6bce\u4ee5\u5916\u306b\u5168\u56fd\u533a\u306e\u30c7\u30fc\u30bf\u3092\u4e00\u3064\u306eshape\u30d5\u30a1\u30a4\u30eb\u3067\u843d\u3068\u305b\u308b\u3088\u3046\u306b\u3057\u3066\u304f\u308c\u308b\u3068\u3044\u3044\u306e\u306b\u2026\u2026\u3002<\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<pre class=\"lang:js decode:true \" >d3.json(&quot;gunma.geojson&quot;, function(gunmajson) {\n\td3.json(&quot;kaso.geojson&quot;, function(kasojson) {  \n\t\tmain(gunmajson, kasojson)\n\t});\n});\n\n\n\nfunction main(gunmajson, kasojson) {\n\t\n\t\/\/Google Map \u521d\u671f\u5316\n\tvar map = new google.maps.Map(document.getElementById('map'), {\n\t\t\tzoom: 9,\n\t\t\tmapTypeId: google.maps.MapTypeId.ROADMAP,\n\t\t\tcenter: new google.maps.LatLng(36.53, 139.06),       \n\t\t});\n\n\t\/\/Google Map \u30b9\u30bf\u30a4\u30eb\u6307\u5b9a\n\tvar styleOptions = [{\n\t\tfeatureType: 'all',\n\t\telementType: 'labels',\n\t\tstylers: [{ visibility: 'on' }]\n\t}, {\n\t\tfeatureType: 'all',\n\t\telementType: 'geometry',\n\t\tstylers: [{ hue: '#593869' }, { saturation: '-70' }, { gamma: '0.5' }]\n\t}];\n\n\tvar lopanType = new google.maps.StyledMapType(styleOptions);\n\tmap.mapTypes.set('noText', lopanType);\n\tmap.setMapTypeId('noText');\n\n\n\n\t\/\/OverLay\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\t\n\tvar overlay = new google.maps.OverlayView(); \n\n\t\/\/\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u8ffd\u52a0\n\toverlay.onAdd = function () {\n\n\t\tvar layer = d3.select(this.getPanes().overlayLayer).append(&quot;div&quot;).attr(&quot;class&quot;, &quot;SvgOverlay&quot;); \/\/\u30ec\u30a4\u30e4\u30fc\u4f5c\u6210(div)\n\n\t\tvar svg = layer.append(&quot;svg&quot;); \/\/\u30ec\u30a4\u30e4\u30fc\u306bSVG\u30bf\u30b0\u8ffd\u52a0\n\t\tvar gunmalayer = svg.append(&quot;g&quot;).attr(&quot;class&quot;, &quot;AdminDivisions1&quot;); \/\/\u7fa4\u99ac\u770c\u5730\u56f3\u8868\u793a\u7528\u30b0\u30eb\u30fc\u30d7\n\t\tvar kasolayer = svg.append(&quot;g&quot;).attr(&quot;class&quot;, &quot;AdminDivisions2&quot;); \/\/\u904e\u758e\u5730\u57df\u8868\u793a\u7528\u30b0\u30eb\u30fc\u30d7\n\t\tvar markerOverlay = this;\n\t\tvar overlayProjection = markerOverlay.getProjection(); \/\/\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u306eProjection\u53d6\u5f97\n\n\t\t\/\/ Google Map Projection \u4f5c\u6210\n\t\tvar googleMapProjection = function (coordinates) {\n\t\t\tvar googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);\n\t\t\tvar pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);\n\t\t\treturn [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];\n\t\t}\n\n\t\t\/\/Google Map Projection\u3092D3.js\u306eProjection\u3068\u3057\u3066\u6307\u5b9a\n\t\tpath = d3.geo.path().projection(googleMapProjection);\t\t\n\n\t\t\/\/\u5730\u56f3\u63cf\u753b\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\n\t\toverlay.draw = function () {\n\n\t\t\t\/\/\u7fa4\u99ac\u5730\u56f3\u63cf\u304f\n\t\t\tgunmalayer.selectAll(&quot;path&quot;)\n\t\t\t\t.data(gunmajson.features)\n\t\t\t\t.attr(&quot;d&quot;, path) \n\t\t\t\t.enter().append(&quot;svg:path&quot;)\n\t\t\t\t.attr(&quot;d&quot;, path)\n\t\t\t\t.attr({\n\t\t\t\t\t&quot;class&quot;: 'gunma',\n\t\t\t\t\t&quot;fill&quot;: &quot;black&quot;,\n\t\t\t\t\t&quot;fill-opacity&quot;: 0.2\n\t\t\t\t});\n\t\t\t\n\t\t\t\n\t\t\t\/\/\u904e\u758e\u5730\u57df\u63cf\u304f\n\t\t\tkasolayer.selectAll(&quot;path&quot;)\n\t\t\t\t.data(kasojson.features)\n\t\t\t\t.attr(&quot;d&quot;, path) \n\t\t\t\t.enter().append(&quot;svg:path&quot;)\n\t\t\t\t.attr(&quot;d&quot;, path)\n\t\t\t\t.attr({\n\t\t\t\t\t&quot;class&quot;: &quot;kaso&quot;,\n\t\t\t\t\t&quot;fill&quot;: &quot;red&quot;,\n\t\t\t\t\t&quot;fill-opacity&quot;: 0.5\n\t\t\t\t});\n\t\t\t\t\n\t\t\t\n\t\t};\n\n\t};\n\n\t\/\/\u4f5c\u6210\u3057\u305fSVG\u3092\u5730\u56f3\u306b\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3059\u308b\n\toverlay.setMap(map);\n\n}<\/pre>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/geo_example\/geo9\/\">example<\/a><\/p>\n<p>\u3010\u95a2\u9023\u3011<br \/>\n<span class=\"removed_link\" title=\"https:\/\/gunmagisgeek.com\/blog\/d3-js\/2635\">\u3010D3.js\u3011\u7fa4\u99ac\u770c\u306e\u8cc3\u8cb8\u4fa1\u683c\u30c7\u30fc\u30bf\u3092\u53ef\u8996\u5316\u3057\u3066\u307f\u305f\uff08\u6563\u5e03\u56f3\uff06\u5730\u56f3<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>example \u9031\u672b\u306b\u30ce\u30de\u30c9\u308a\u306a\u304c\u3089\u4f5c\u3063\u305f\u3082\u306e\u3002 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":2704,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,37],"tags":[],"class_list":["post-2703","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3-js","category-google-map-api","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2703","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=2703"}],"version-history":[{"count":1,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2703\/revisions"}],"predecessor-version":[{"id":2705,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2703\/revisions\/2705"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/2704"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=2703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=2703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=2703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}