{"id":7889,"date":"2022-03-03T16:12:22","date_gmt":"2022-03-03T07:12:22","guid":{"rendered":"https:\/\/gunmagisgeek.com\/blog\/?p=7889"},"modified":"2022-03-03T16:24:55","modified_gmt":"2022-03-03T07:24:55","slug":"deck-gl%e3%81%ae%e6%96%b0%e6%a9%9f%e8%83%bd%e3%80%8cmaskextension%e3%80%8d","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/deck-gl\/7889","title":{"rendered":"deck.gl\u306e\u65b0\u6a5f\u80fd\u300cMaskExtension\u300d"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u6982\u8981<\/h2>\n\n\n\n<p>2\/25\u306b\u516c\u958b\u3055\u308c\u305fdeck.gl v8.7\u306b\u3066\u3001\u30af\u30ea\u30c3\u30d4\u30f3\u30b0\u30de\u30b9\u30af\u6a5f\u80fd\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>MaskExtension\u3092\u4f7f\u3046\u3068\u65e2\u5b58\u306e\u30ec\u30a4\u30e4\u30fc\u306bGeoJSON(\u30dd\u30ea\u30b4\u30f3)\u306a\u3069\u3067\u30de\u30b9\u30af(\u5207\u308a\u629c\u304d)\u52b9\u679c\u3092\u3064\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><a href=\"https:\/\/deck.gl\/docs\/api-reference\/extensions\/mask-extension\">deck.gl | MaskExtension<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h2>\n\n\n\n<p>\u30af\u30ea\u30c3\u30af\u3057\u305f\u770c\u306e\u30dd\u30ea\u30b4\u30f3\u3067\u30bf\u30a4\u30eb\u30ec\u30a4\u30e4\u30fc\u3092\u5207\u308a\u629c\u304f\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n<iframe src=\"https:\/\/codesandbox.io\/embed\/tender-danilo-6mbhy8?fontsize=14&amp;hidenavigation=1&amp;theme=dark&amp;view=split\" style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\" title=\"tender-danilo-6mbhy8\" allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">\u89e3\u8aac<\/h2>\n\n\n\n<p>\u5730\u7406\u9662\u30bf\u30a4\u30eb\u306e\u5168\u56fd\u5199\u771f\u3092\u8868\u793a\u3057\u305f\u30bf\u30a4\u30eb\u30ec\u30a4\u30e4\u30fc\u306e\u4e0a\u306b\u90fd\u9053\u5e9c\u770c\u306eGeojson\u3092\u91cd\u306d\u3001\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u90fd\u9053\u5e9c\u770c\u306e\u30dd\u30ea\u30b4\u30f3\u30c7\u30fc\u30bf\u3092\u4f7f\u3063\u3066\u30de\u30b9\u30af\u30ec\u30a4\u30e4\u30fc\u3092\u751f\u6210\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true \">  \/\/\u30de\u30b9\u30af\u52b9\u679c\u3092\u9069\u7528\u3059\u308b\u30ec\u30a4\u30e4\u30fc\n  const tileLayer = new TileLayer({\n    data: \"https:\/\/cyberjapandata.gsi.go.jp\/xyz\/seamlessphoto\/{z}\/{x}\/{y}.jpg\",\n\n    \/\/\u30de\u30b9\u30af\u6307\u5b9a\n    extensions: [new MaskExtension()],\n    maskId: \"geofence\", \/\/\u30de\u30b9\u30af\u30ec\u30a4\u30e4\u30fc\u306e\u30ec\u30a4\u30e4\u30fcID\u3092\u6307\u5b9a\u3059\u308b\n  });\n\n  \/\/\u30de\u30b9\u30af\u30ec\u30a4\u30e4\u30fc\u3092\u751f\u6210\n  const mask = new GeoJsonLayer({\n    id: \"geofence\",\n    data: maskGeo || \"data\/tokyo.geojson\", \/\/maskGeo\u30c7\u30fc\u30bf\u304c\u7121\u3044\u3068\u304d\u306f\u6771\u4eac\u306e\u30dd\u30ea\u30b4\u30f3\u3067\u30de\u30b9\u30af\u3092\u304b\u3051\u308b\n    operation: \"mask\"\n  });<\/pre><\/div>\n\n\n\n<p>\u7279\u5b9a\u306e\u30c7\u30fc\u30bf\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u3055\u305b\u305f\u3044\u3068\u304d\u306a\u3069\u3001\u4f59\u8a08\u306a\u60c5\u5831\u3092\u5207\u308a\u843d\u3068\u3059\u306e\u306b\u4fbf\u5229\u306a\u6a5f\u80fd\u3067\u3059\u3002\u305c\u3072\u6d3b\u7528\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>\u203b\u305f\u3060\u3057\u3001\u30de\u30b9\u30af\u52b9\u679c\u306f\u3059\u3079\u3066\u306e\u30ec\u30a4\u30e4\u30fc\u306b\u9069\u7528\u3067\u304d\u308b\u308f\u3051\u3067\u306f\u306a\u3044\u306e\u3067\u3054\u6ce8\u610f\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6982\u8981 2\/25\u306b\u516c\u958b\u3055\u308c\u305fdeck.gl v8.7&hellip;<\/p>\n","protected":false},"author":1,"featured_media":7893,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73],"tags":[],"class_list":["post-7889","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deck-gl","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/7889","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=7889"}],"version-history":[{"count":4,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/7889\/revisions"}],"predecessor-version":[{"id":7896,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/7889\/revisions\/7896"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/7893"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=7889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=7889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=7889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}