{"id":5097,"date":"2018-03-19T11:40:15","date_gmt":"2018-03-19T02:40:15","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=5097"},"modified":"2020-07-27T09:50:14","modified_gmt":"2020-07-27T00:50:14","slug":"fingereyes-xr%ec%97%90%ec%84%9c-%ec%a3%bc%ec%a0%9c%eb%8f%84theme-map-%ed%91%9c%ed%98%84","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=5097","title":{"rendered":"FingerEyes-Xr\uc5d0\uc11c \uc8fc\uc81c\ub3c4(Theme Map) \ud45c\ud604"},"content":{"rendered":"<p>FingerEyes-Xr for HTML5\uc5d0\uc11c \uc218\uce58\uc9c0\ub3c4 \ub808\uc774\uc5b4\ub97c \uc18d\uc131\uac12\uc5d0 \ub530\ub77c \ud45c\ud604 \uc2ec\ubc8c\uc744 \ubcc0\uacbd\ud558\uc5ec \uc8fc\uc81c\ub3c4\ub97c \ud45c\ud604\ud558\ub294 \uae30\ub2a5\uc5d0 \ub300\ud55c \uc608\uc81c \ucf54\ub4dc\ub97c \uc815\ub9ac\ud574 \ubd05\ub2c8\ub2e4.<\/p>\n<p>\uba3c\uc800 \ub2e4\uc74c\uacfc \uac19\uc740 \uc218\uce58\uc9c0\ub3c4 \ub808\uc774\uc5b4\uac00 \uc788\ub2e4\uace0 \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2018\/03\/simple-layer.png\" alt=\"\" width=\"1394\" height=\"1701\" class=\"aligncenter size-full wp-image-5098\" \/><\/p>\n<p>\uc704\uc758 \uacb0\uacfc\ub97c \ud45c\ucd9c\ud558\ub294 \ucf54\ub4dc(\ucf54\ub4dcA)\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;meta charset=\"utf-8\" \/>\r\n\r\n    &lt;style>\r\n        body {\r\n            margin: 0px;\r\n            padding: 0px;\r\n        }\r\n\r\n        #map {\r\n            top: 0px;\r\n            left: 0px;\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 100%;\r\n            border: none;\r\n            outline: none;\r\n        }\r\n    &lt;\/style>\r\n\r\n    &lt;script src=\"..\/..\/scripts\/fingereyes-xr\/Xr.js\">&lt;\/script>\r\n\r\n    &lt;script>\r\n        var map = null;\r\n\r\n        function onLoad() {\r\n            map = new Xr.Map(\"map\", {});\r\n\r\n            var lyr = new Xr.layers.ShapeMapLayer(\"lyr\",\r\n                {\r\n                    url: \"http:\/\/168.192.76.10:8080\/Xr?layerName=li_a@test\"\r\n                }\r\n            );\r\n            \r\n            var theme = lyr.theme();\r\n            theme.penSymbol().color(\"black\");\r\n            theme.brushSymbol().color(\"lightgray\");\r\n\r\n            var lm = map.layers();\r\n            lm.add(lyr);\r\n\r\n            map.onLayersAllReady(onLayersReady);\r\n\r\n            window.addEventListener(\"resize\", onResize);\r\n        }\r\n\r\n        var bFinishResizing = true;\r\n\r\n        function onResize() {\r\n            if (bFinishResizing) {\r\n                bFinishResizing = false;\r\n\r\n                setTimeout(function () {\r\n                    var newWidth = window.innerWidth;\r\n                    var newHeight = window.innerHeight;\r\n\r\n                    map.resize(newWidth, newHeight);\r\n                    map.update();\r\n\r\n                    bFinishResizing = true;\r\n                }, 500);                \r\n            }\r\n        }\r\n\r\n        function onLayersReady() {\r\n            var cm = map.coordMapper();\r\n            var lyr = map.layers(\"lyr\");\r\n            var mbr = lyr.MBR();\r\n\r\n            cm.zoomByMBR(mbr);\r\n\r\n            map.update();\r\n        }\r\n    &lt;\/script>\r\n\r\n    &lt;title>&lt;\/title>\r\n&lt;\/head>\r\n\r\n&lt;body onload=\"onLoad()\">\r\n    &lt;div id=\"map\" \/>\r\n&lt;\/body>\r\n&lt;\/html>\r\n<\/pre>\n<p>\uc774\uc81c \uc704\uc5d0\uc11c \ubcf8 \ub2e8\uc21c\ud55c \uc218\uce58\uc9c0\ub3c4 \ud45c\ud604\uc744 \uc18d\uc131\uac12\uc5d0 \ub530\ub77c \uc8fc\uc81c\ub3c4\ub85c \ud45c\ud604\ud574 \ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc989, \uc544\ub798\ucc98\ub7fc \ub9d0\uc785\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2018\/03\/theme-layer.png\" alt=\"\" width=\"1394\" height=\"1701\" class=\"aligncenter size-full wp-image-5102\" \/><\/p>\n<p>\uc704\uc640 \uac19\uc740 \uc8fc\uc81c\ub3c4 \ud45c\ud604\uc744 \uc704\ud574\uc11c \ub3c4\ud615\uc5d0 \ub300\ud55c \uc18d\uc131\uac12\uc5d0 \ub530\ub77c \ucc44\uc6c0\uc0c9\uc744 \ub2e4\ub974\uac8c \uc9c0\uc815\ud558\uace0 \uc788\ub294\ub370\uc694. \uc0ac\uc6a9\ud55c \uc18d\uc131\ud544\ub4dc\ub294 sum_ho_res\uc785\ub2c8\ub2e4. DBMS\uc5d0\uc11c \uc774 \ub808\uc774\uc5b4\uc758 sum_ho_res\uc5d0 \ub300\ud55c \ucd5c\ub300\uac12\uacfc \ucd5c\uc18c\uac12\uc744 \uc5bb\uc5b4\ubcf4\uba74 \uac01\uac01 13\uacfc 104\uc778\ub370\uc694. \uc774 \uac12\uc758 \uad6c\uac04\uc744 5\uac1c\ub85c \ub098\ub220 \uc0c9\uc0c1\uc744 \uc9c0\uc815\ud558\uace0, \uac01 \uac12\uc5d0 \ub300\ud574\uc11c \ud574\ub2f9 \uad6c\uac04\uc758 \uc0c9\uc0c1\uc73c\ub85c \ub808\uc774\uc5b4\ub97c \uadf8\ub824\uc8fc\uac8c \ub418\uba74 \uc8fc\uc81c\ub3c4\uac00 \uc644\uc131\ub429\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc8fc\uc81c\ub3c4\ub97c \ud45c\ud604\ud558\uae30 \uc704\ud574 \uc18d\uc131\uac12\uc5d0 \ub300\ud55c \uadf8\ub9ac\uae30 \uc2ec\ubc8c\uc744 \uc9c0\uc815\ud574\uc8fc\uae30 \uc704\ud55c \ud074\ub798\uc2a4\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4. (\ucf54\ub4dcB)<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nCustomLayerTheme = Xr.Class({\r\n    name: \"CustomLayerTheme\",\r\n    extend: Xr.theme.ProgrammableShapeDrawTheme,\r\n    requires: [Xr.theme.IShapeDrawTheme],\r\n\r\n    construct: function (\/* ShapeMapLayer *\/ layer) {\r\n        this.superclass(layer);\r\n\r\n        this._fieldIndex = -1;\r\n\r\n        var minValue = 13;\r\n        var maxValue = 104;\r\n        var stepCount = 5;\r\n        var stepValue = (maxValue - minValue) \/ stepCount; \r\n        var colors = ['#f1c40f', '#f39c12', '#e67e22', '#e74c3c', '#c0392b'];\r\n        var symbols = [];\r\n\r\n        for (var i = 0; i < stepCount; i++) {\r\n            var SDS = new Xr.symbol.ShapeDrawSymbol();\r\n\r\n            SDS.brushSymbol().color(colors[i]);\r\n            SDS.penSymbol().color('#ffffff');\r\n            SDS.penSymbol().width(2);\r\n                    \r\n            var symbol = {\r\n                fromValue: minValue + (i * stepValue),\r\n                toValue: minValue + ((i + 1) * stepValue),\r\n                symbol: SDS\r\n            };\r\n                    \r\n            symbols[i] = symbol;\r\n        }\r\n\r\n        this._symbols = symbols;\r\n        this._stepCount = stepCount;\r\n    },\r\n\r\n    methods: {\r\n        \/* ShapeDrawSymbol *\/ symbol: function (\/* ShapeRow *\/ shapeRow, \/* FieldSet *\/ fieldSet, \/* AttributeRow *\/ attributeRow) {\r\n            if (this._fieldIndex === -1) {\r\n                this._fieldIndex = fieldSet.fieldIndex(\"sum_ho_res\");\r\n            }\r\n\r\n            var value = attributeRow.valueAsString(this._fieldIndex);\r\n            var stepCount = this._stepCount;\r\n            var symbols = this._symbols;\r\n            var symbol = undefined;\r\n\r\n            for (var i = 0; i < stepCount; i++) {\r\n                symbol = symbols[i];\r\n\r\n                if (value >= symbol.fromValue && value < symbol.toValue) {\r\n                    break;\r\n                }\r\n            }\r\n\r\n            return symbol.symbol;\r\n        },\r\n\r\n        \/* boolean *\/ needAttribute: function () {\r\n            return true;\r\n        }\r\n    }\r\n});\r\n<\/pre>\n<p>\uc218\uce58\uc9c0\ub3c4\uc5d0 \ub300\ud55c \uc8fc\uc81c\ub3c4\ub97c \uc815\uc758\ud558\uae30 \uc704\ud574\uc11c\ub294 Xr.theme.ProgrammableShapeDrawTheme \ud074\ub798\uc2a4\ub97c \uc0c1\uc18d\ud558\uace0 Xr.theme.IShapeDrawTheme \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ud604 \ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub807\uac8c \ub9cc\ub4e0 \ud074\ub798\uc2a4\uac00 \ubc14\ub85c CustomLayerTheme\uc785\ub2c8\ub2e4. \uc774 \ud074\ub798\uc2a4\uc758 \uc0dd\uc131\uc790\uc5d0\uc11c 11\ubc88~32\ubc88\uae4c\uc9c0\uc758 \ucf54\ub4dc\ub294 sum_ho_res \uc18d\uc131\uac12 \ubc94\uc704\uc5d0 \ub300\ud574\uc11c \ucd5c\ub300\uac12\uacfc \ucd5c\uc18c\uac12(\uc2e4\uc81c \uac1c\ubc1c\uc5d0\uc11c\ub294 SQL Query\ub97c \ud1b5\ud55c \ud574\ub2f9\uac12\uc744 \uc5bb\uc5b4\uc640\uc57c \ud568)\uc744 \uc774\uc6a9\ud574 5\uac1c\uc758 \uad6c\uac04\uc73c\ub85c \ub098\ub204\uace0 \uac01 \uad6c\uac04\uc5d0 \ub300\ud55c \uadf8\ub9ac\uae30 \uc2ec\ubc8c(\ucc44\uc6c0\uc0c9\uacfc \uc120\uc0c9) \uac1d\uccb4\ub97c \ubbf8\ub9ac \uc0dd\uc131\ud574 \ub450\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c \ub3c4\ud615\uc744 \uadf8\ub9ac\uae30 \uc704\ud55c \uc2ec\ubc8c\uc744 \ubc18\ud658\ud574\uc8fc\ub294 symbol \ud568\uc218\uc5d0\uc11c\ub294 \uc18d\ub3c4 \ud5a5\uc0c1\uc744 \uc704\ud574 sum_ho_res \ud544\ub4dc\uc5d0 \ub300\ud55c \ud544\ub4dc \uc778\ub371\uc2a4\ub97c \ubbf8\ub9ac \uacc4\uc0b0\ud574 \ub450\uace0, \uadf8\ub9b4 \ub300\uc0c1\uc774 \ub418\ub294 \ub3c4\ud615\uc758 sum_ho_res \ud544\ub4dc\uac12\uc744 \uc5bb\uc5b4, \uadf8 \uac12\uc5d0 \ud574\ub2f9\ud558\ub294 \uc2ec\ubc8c\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4. \uc774\uc81c \uc774 CustomLayerTheme \ud074\ub798\uc2a4\ub97c \ud574\ub2f9 \ub808\uc774\uc5b4\uc5d0 \uc9c0\uc815\ud558\uae30 \uc704\ud574\uc11c\ub294 \ucf54\ub4dcA\uc5d0\uc11c 37\ubc88-39\ubc88\uc758 \ucf54\ub4dc \ub300\uc2e0 \uc544\ub798\uc758 \ucf54\ub4dc\ub85c \ub300\uccb4\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nvar newTheme = new CustomLayerTheme(lyr)\r\nlyr.theme(newTheme);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>FingerEyes-Xr for HTML5\uc5d0\uc11c \uc218\uce58\uc9c0\ub3c4 \ub808\uc774\uc5b4\ub97c \uc18d\uc131\uac12\uc5d0 \ub530\ub77c \ud45c\ud604 \uc2ec\ubc8c\uc744 \ubcc0\uacbd\ud558\uc5ec \uc8fc\uc81c\ub3c4\ub97c \ud45c\ud604\ud558\ub294 \uae30\ub2a5\uc5d0 \ub300\ud55c \uc608\uc81c \ucf54\ub4dc\ub97c \uc815\ub9ac\ud574 \ubd05\ub2c8\ub2e4. \uba3c\uc800 \ub2e4\uc74c\uacfc \uac19\uc740 \uc218\uce58\uc9c0\ub3c4 \ub808\uc774\uc5b4\uac00 \uc788\ub2e4\uace0 \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc704\uc758 \uacb0\uacfc\ub97c \ud45c\ucd9c\ud558\ub294 \ucf54\ub4dc(\ucf54\ub4dcA)\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4. &lt;!DOCTYPE html> &lt;html> &lt;head> &lt;meta charset=&#8221;utf-8&#8243; \/> &lt;style> body { margin: 0px; padding: 0px; } #map { top: 0px; left: 0px; position: absolute; width: &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=5097\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;FingerEyes-Xr\uc5d0\uc11c \uc8fc\uc81c\ub3c4(Theme Map) \ud45c\ud604&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[],"class_list":["post-5097","post","type-post","status-publish","format-standard","hentry","category-fingereyes-xr"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5097","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5097"}],"version-history":[{"count":12,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5097\/revisions"}],"predecessor-version":[{"id":9886,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5097\/revisions\/9886"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5097"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}