{"id":7068,"date":"2020-12-13T12:33:56","date_gmt":"2020-12-13T03:33:56","guid":{"rendered":"https:\/\/gunmagisgeek.com\/blog\/?p=7068"},"modified":"2020-12-29T18:40:06","modified_gmt":"2020-12-29T09:40:06","slug":"deckgl%e3%81%a73d-terrain%e5%9c%b0%e5%bd%a2%e3%83%9e%e3%83%83%e3%83%97%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/deck-gl\/7068","title":{"rendered":"deck.gl\u30673D-Terrain(\u5730\u5f62)\u30de\u30c3\u30d7\u3092\u8868\u793a\u3059\u308b"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u6982\u8981<\/h2>\n\n\n\n<p>deck.gl\u306e<a href=\"https:\/\/deck.gl\/docs\/api-reference\/geo-layers\/terrain-layer\" data-type=\"URL\" data-id=\"https:\/\/deck.gl\/docs\/api-reference\/geo-layers\/terrain-layer\">TerrainLayer<\/a>\u3092\u4f7f\u3063\u30663D-Terrain(\u5730\u5f62)\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u7d50\u69cb\u3001\u3050\u308a\u3050\u308a\u52d5\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"ja\" dir=\"ltr\">\u66f8\u304d\u307e\u3057\u305f\u3002<br><br>deckgl\u30673D-Terrain(\u5730\u5f62)\u30de\u30c3\u30d7\u3092\u8868\u793a\u3059\u308b \u2013 GUNMA GIS GEEK <a href=\"https:\/\/t.co\/PpYQi3xFFt\">https:\/\/t.co\/PpYQi3xFFt<\/a> <a href=\"https:\/\/t.co\/PlhbRZ0rxY\">pic.twitter.com\/PlhbRZ0rxY<\/a><\/p>&mdash; \u6e05\u6c34\u6b63\u884c (@_shimizu) <a href=\"https:\/\/twitter.com\/_shimizu\/status\/1337964428709429250?ref_src=twsrc%5Etfw\">December 13, 2020<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p><a href=\"https:\/\/qhzps.csb.app\/\" data-type=\"URL\" data-id=\"https:\/\/qhzps.csb.app\/\">DEMO<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h3>\n\n\n\n<iframe src=\"https:\/\/codesandbox.io\/embed\/3d-terrain-qhzps?fontsize=14&amp;hidenavigation=1&amp;theme=dark&amp;view=split\" style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\" title=\"3D-Terrain\" 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<h3 class=\"wp-block-heading\">\u89e3\u8aac<\/h3>\n\n\n\n<p>3D-Terrain\u3092\u8868\u793a\u3059\u308b\u306b\u306f\u3001\u6a19\u9ad8\u30c7\u30fc\u30bf\u3068\u30c6\u30af\u30b9\u30c1\u30e3\u30c7\u30fc\u30bf\u4e8c\u7a2e\u985e\u306e\u30c7\u30fc\u30bf\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002\uff08\u30c6\u30af\u30b9\u30c1\u30e3\u306f\u306a\u304f\u3066\u3082\u8868\u793a\u306f\u3067\u304d\u307e\u3059\uff09<\/p>\n\n\n\n<p>\u4eca\u56de\u306f\u6a19\u9ad8\u30c7\u30fc\u30bf\u306b\u3001MapTiler\u3068\u3044\u3046\u30b5\u30fc\u30d3\u30b9\u306e\u300c<a href=\"https:\/\/cloud.maptiler.com\/tiles\/terrain-rgb\/\" data-type=\"URL\" data-id=\"https:\/\/cloud.maptiler.com\/tiles\/terrain-rgb\/\">Tiles \/ RGB Terrain<\/a>\u300d\u3092\u3001\u30c6\u30af\u30b9\u30c1\u30e3\u30fc\u306b\u306f\u540c\u3058\u304f\u3001MapTiler\u306e\u300c<a href=\"https:\/\/cloud.maptiler.com\/tiles\/satellite\/\" data-type=\"URL\" data-id=\"https:\/\/cloud.maptiler.com\/tiles\/satellite\/\">Tiles \/ Satellite<\/a>\u300d\u3092\u4f7f\u3063\u3066\u307e\u3059\u3002\u3069\u3061\u3089\u3082MapTiler\u306e\u30c8\u30fc\u30af\u30f3\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u306e\u3067\u3001\u30b3\u30fc\u30c9\u5185\u306e\u30c8\u30fc\u30af\u30f3\u3092\u72ec\u81ea\u3067\u53d6\u5f97\u3057\u305f\u3082\u306e\u306b\u7f6e\u304d\u63db\u3048\u3066\u4f7f\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>\u3061\u306a\u307f\u306b\u30c6\u30af\u30b9\u30c1\u30e3\u30fc\u306f\u3001\u901a\u5e38\u306e\u5730\u56f3\u30bf\u30a4\u30eb\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30c6\u30af\u30b9\u30c1\u30e3\u30fc\u306b\u5730\u7406\u9662\u30bf\u30a4\u30eb\u3092\u4f7f\u3063\u305f\u4f8b<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"481\" src=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/SnapCrab_NoName_2020-12-13_12-55-51_No-00-1024x481.jpg\" alt=\"\" class=\"wp-image-7075\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/SnapCrab_NoName_2020-12-13_12-55-51_No-00-1024x481.jpg 1024w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/SnapCrab_NoName_2020-12-13_12-55-51_No-00-300x141.jpg 300w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/SnapCrab_NoName_2020-12-13_12-55-51_No-00-768x361.jpg 768w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/SnapCrab_NoName_2020-12-13_12-55-51_No-00-1536x722.jpg 1536w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/SnapCrab_NoName_2020-12-13_12-55-51_No-00.jpg 1908w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>\u5730\u7406\u9662\u30bf\u30a4\u30eb(\u6a19\u6e96\u5730\u56f3)<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/SnapCrab_NoName_2020-12-13_12-56-33_No-00-1024x486.jpg\" alt=\"\" class=\"wp-image-7076\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/SnapCrab_NoName_2020-12-13_12-56-33_No-00-1024x486.jpg 1024w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/SnapCrab_NoName_2020-12-13_12-56-33_No-00-300x142.jpg 300w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/SnapCrab_NoName_2020-12-13_12-56-33_No-00-768x364.jpg 768w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/SnapCrab_NoName_2020-12-13_12-56-33_No-00-1536x729.jpg 1536w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/SnapCrab_NoName_2020-12-13_12-56-33_No-00.jpg 1895w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>\u5730\u7406\u9662\u30bf\u30a4\u30eb(\u8272\u5225\u6a19\u9ad8\u56f3)<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u30e1\u30e2<\/h3>\n\n\n\n<p>\u30db\u30f3\u30c8\u306f\u3001\u6a19\u9ad8\u30c7\u30fc\u30bf\u306b\u5730\u7406\u9662\u306e\u6a19\u9ad8PNG\u30bf\u30a4\u30eb\u3092\u4f7f\u3044\u305f\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001<a href=\"https:\/\/deck.gl\/docs\/api-reference\/geo-layers\/terrain-layer\">TerrainLayer<\/a>\u306e\u30b9\u30b1\u30fc\u30eb\u8a2d\u5b9a\u304c\u72ec\u7279\u3067\u3046\u307e\u304f\u9ad8\u3055\u304c\u53d6\u5f97\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p>Mapbox\u5f62\u5f0f\u306e\u300cheight = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1)\u300d\u3092\u5f0f\u306f\u3001elevationDecoder\u3092\u4f7f\u3063\u3066\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u3066\u3044\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"rScaler\": 6553.6,\n  \"gScaler\": 25.6,\n  \"bScaler\": 0.1,\n  \"offset\": -10000\n}<\/code><\/pre>\n\n\n\n<p>rgb\u305d\u308c\u305e\u308c\u306b\u30b9\u30b1\u30fc\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u308f\u3051\u3067\u3059\u304c\u3001\u5730\u7406\u9662\u306e\u6a19\u9ad8PNG\u30bf\u30a4\u30eb\u3067\u4f7f\u308f\u308c\u3066\u3044\u308b\u300cheight  = 0.01 * (R * 256 * 256 + G * 256 + B) \u300d\u3092elevationDecoder\u3067\u8a2d\u5b9a\u3059\u308b\u65b9\u6cd5\u304c\u308f\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002 orz<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u8ffd\u8a18<\/h2>\n\n\n\n<p>\u5730\u7406\u9662\u306e\u6a19\u9ad8PNG\u30bf\u30a4\u30eb\u3092\u4f7f\u3063\u305f\u65b9\u6cd5\u3092\u6559\u3048\u3066\u3082\u3089\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p><a href=\"https:\/\/qiita.com\/Kanahiro\/items\/e22594b738655a189c1d\" data-type=\"URL\" data-id=\"https:\/\/qiita.com\/Kanahiro\/items\/e22594b738655a189c1d\">\u5730\u7406\u9662\u30bf\u30a4\u30eb\u3068deck.gl\u30673D\u5730\u56f3\u3092\u3064\u304f\u308d\u3046<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6982\u8981 deck.gl\u306eTerrainLayer\u3092\u4f7f&hellip;<\/p>\n","protected":false},"author":1,"featured_media":7069,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73],"tags":[],"class_list":["post-7068","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\/7068","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=7068"}],"version-history":[{"count":9,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/7068\/revisions"}],"predecessor-version":[{"id":7112,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/7068\/revisions\/7112"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/7069"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=7068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=7068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=7068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}