{"id":3770,"date":"2014-10-01T14:15:05","date_gmt":"2014-10-01T05:15:05","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3770"},"modified":"2018-09-18T16:51:05","modified_gmt":"2018-09-18T07:51:05","slug":"post-3770","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3770","title":{"rendered":"\u3010D3.js\u3011Google Map\u306bsvg\u3092\u4f7f\u3063\u3066\u30de\u30b9\u30af\u3092\u304b\u3051\u308b"},"content":{"rendered":"<p><a href=\"https:\/\/shimz.me\/example\/d3js\/geo_example3\/mask\/index.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/10\/googlemapsmask141001.jpg\" alt=\"Google Map\u306b\u30de\u30b9\u30af\u3092\u304b\u3051\u308b\" width=\"588\" height=\"453\" class=\"aligncenter size-full wp-image-3769\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/10\/googlemapsmask141001.jpg 588w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/10\/googlemapsmask141001-195x150.jpg 195w\" sizes=\"auto, (max-width: 588px) 100vw, 588px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/shimz.me\/example\/d3js\/geo_example3\/mask\/index.html\">example<\/a><\/p>\n<p>\u5b9f\u306f\u4ee5\u524d\u3001ClipPath\u3092\u4f7f\u3063\u3066<a href=\"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3019\">\u4f3c\u305f\u3088\u3046\u306a\u3053\u3068<\/a>\u3092\u3084\u3063\u305f\u3053\u3068\u304c\u3042\u308b\u306e\u3067\u3059\u304c\u3001Mask\u6a5f\u80fd\u3092\u4f7f\u3063\u305f\u65b9\u304c\u7dba\u9e97\u306b\u5207\u308a\u629c\u3051\u305f\u306e\u3067\u63b2\u8f09\u3057\u307e\u3059\u3002<\/p>\n<p>\u5730\u56f3\u4e0a\u306b\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3057\u305fSVG\u306b\u30de\u30b9\u30af\u3092\u304b\u3051\u308b\u30c6\u30af\u30cb\u30c3\u30af\u306f\u3001\u3044\u308d\u3093\u306a\u3053\u3068\u306b\u5fdc\u7528\u304c\u5229\u304d\u305d\u3046\u3067\u3059\u306d\u3002<\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<pre class=\"lang:js decode:true \" >d3.json(\"..\/..\/_geodata\/gunma_outline.geojson\", function(json) {\n    mapdraw(json);\n});\n\nfunction mapdraw(json) {\n\n    var feature = json.features;        \n    \n    \/\/Google Map \u521d\u671f\u5316\n    var map = new google.maps.Map(document.getElementById('map'), {\n        zoom: 10,\n        mapTypeId: google.maps.MapTypeId.TERRAIN,\n        center: new google.maps.LatLng( 36.4894706, 139.00044819999994),       \n    });\n\n    \/\/OverLay\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210  \n    var overlay = new google.maps.OverlayView(); \n    overlay.onAdd = function () {\n        \n        \/\/\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u8a2d\u5b9a\n        var layer = d3.select(this.getPanes().overlayLayer).append(\"div\").attr(\"class\", \"SvgOverlay\");\n        var svg = layer.append(\"svg\");\n        var defs = svg.append(\"defs\");\n        var mask = defs.append(\"mask\").attr(\"id\", \"mask\");\n        \/\/\u8868\u793a\u30a8\u30ea\u30a2\u6307\u5b9a\u30de\u30b9\u30af\n        mask.append(\"rect\").attr({\n            x:0,\n            y:0,\n            width:8000,\n            height:8000,\n            fill:\"white\"            \n        });\n        \/\/\u5b9f\u969b\u306b\u5730\u56f3\u3092\u96a0\u3059\u30ab\u30d0\u30fc\n        var cover = svg.append(\"rect\").attr({\n            x:0,\n            y:0,\n            width:8000,\n            height:8000,\n            fill:\"gray\"         \n        });\n\n        \n        var overlayProjection = this.getProjection();\n\n        \/\/Google Projection\u4f5c\u6210\n        var googleMapProjection = function (coordinates) {\n            var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);\n            var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);\n            return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];\n        }\n\n        \/\/\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u4f5c\u6210\n        path = d3.geo.path().projection(googleMapProjection);\u3000\n        \n        \/\/\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u63cf\u753b\u30a4\u30d9\u30f3\u30c8    \n        overlay.draw = function () {\n            \/\/\u30de\u30b9\u30af\u306b\u5730\u5f62\u306e\u30d1\u30b9\u3092\u8ffd\u52a0\u3057\u3001\u975e\u8868\u793a\u30a8\u30ea\u30a2\u3068\u3057\u3066\u6307\u5b9a\n            mask.selectAll(\"path\")\n                .data(feature)\n                .attr(\"d\", function(d){ return path(d) }) \n                .enter()\n                .append(\"svg:path\")\n                .attr({\n                    \"d\": path,\n                    \"fill\": \"black\"\n                });\n             \n                \/\/\u30ab\u30d0\u30fc\u306b\u30de\u30b9\u30af\u3092\u53cd\u6620\n                cover.attr(\"mask\", \"url(#mask)\");\n        };\n    };\n\n    \/\/\u4f5c\u6210\u3057\u305fSVG\u3092\u5730\u56f3\u306b\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3059\u308b\n    overlay.setMap(map);\n};<\/pre>\n<p>\u203b\u30de\u30b9\u30af\u306e\u8868\u793a\u30fb\u975e\u8868\u793a\u306fSVG\u306b\u304b\u304b\u3063\u3066\u3044\u307e\u3059\u3002\u5730\u56f3\u304c\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u306f\u3001svg\u4e0a\u306e\u8981\u7d20\u3092\u975e\u8868\u793a\u306b\u3057\u305f\u90e8\u5206\u3067\u3059\u3002<br \/>\n\u6df7\u4e71\u3057\u304c\u3061\u306a\u306e\u3067\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>example \u5b9f\u306f\u4ee5\u524d\u3001ClipPath\u3092\u4f7f\u3063\u3066&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3769,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,37],"tags":[],"class_list":["post-3770","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\/3770","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=3770"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3770\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3769"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}