{"id":2458,"date":"2016-10-07T11:46:20","date_gmt":"2016-10-07T11:46:20","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=2458"},"modified":"2017-02-11T17:19:10","modified_gmt":"2017-02-11T08:19:10","slug":"gis-fingereyes-xr-for-html5-%e3%85%a1-code%eb%a1%9c-graphiclayer%ec%97%90-%eb%a7%88%ec%bb%a4-%ec%b6%94%ea%b0%80%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=2458","title":{"rendered":"[GIS] FingerEyes-Xr for HTML5 \u3161 Code\ub85c GraphicLayer\uc5d0 \ub9c8\ucee4 \ucd94\uac00\ud558\uae30"},"content":{"rendered":"<p>FingerEyes-Xr\uc740 \uadf8\ub798\ud53d \ub808\uc774\uc5b4\ub97c \ud1b5\ud574 \uc9c0\ub3c4 \uc0c1\uc758 \uc6d0\ud558\ub294 \uc704\uce58\uc5d0 \ub2e4\uc591\ud55c \uadf8\ub798\ud53d \uc694\uc18c\ub97c \ucd94\uac00\ud574 \ud45c\ud604\ud560 \uc218 \uc788\ub294\ub370\uc694. \uc774\uc640 \uad00\ub828\ub41c API\ub97c \uc815\ub9ac\ud574 \ubd05\ub2c8\ub2e4. \uadf8\ub798\ud53d \uc694\uc18c\ub97c \ucd94\uac00\ud558\uae30 \uc704\ud574\uc11c \uadf8\ub798\ud53d \ub808\uc774\uc5b4\uac00 \ud558\ub098 \ud544\uc694\ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ud1b5\ud574 \uadf8\ub798\ud53d \ub808\uc774\uc5b4\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n<pre>\r\nvar gfxLyr = new Xr.layers.GraphicLayer(\"g\");\r\nmap.layers().add(gfxLyr);\r\n<\/pre>\n<p>\uadf8\ub798\ud53d \ub808\uc774\uc5b4\uc758 \uc774\ub984\uc744 &#8216;g&#8217;\ub85c \ud558\uc5ec \uc774 \uc774\ub984\uc744 \ud1b5\ud574 \uadf8\ub798\ud53d \ub808\uc774\uc5b4 \uac1d\uccb4\ub97c \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uadf8\ub798\ud53d \ub808\uc774\uc5b4\uc5d0 \ub9c8\ucee4\ub97c 3\uac1c \ucd94\uac00\ud560 \uac83\uc778\ub370\uc694. \uc544\ub798\uc758 \ucf54\ub4dc\ucc98\ub7fc \ub9c8\ucee4\ub97c \ucd94\uac00\ud558\ub294 \ud568\uc218\ub97c \ub9cc\ub4e4\uc5b4 \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<pre>\r\nfunction addPoint(gl, id, x, y, imgUrl) {\r\n    var rs = gl.rowSet();\r\n    var p = new Xr.PointD(x, y);\r\n    var psd = new Xr.data.PointShapeData(p);\r\n    var pgr = new Xr.data.PointGraphicRow(id, psd);\r\n    var ims = new Xr.symbol.ImageMarkerSymbol({\r\n        width: 48, height: 48,\r\n        url: imgUrl\r\n    });\r\n\r\n    pgr.markerSymbol(ims);\r\n\r\n    rs.add(pgr);\r\n}\r\n<\/pre>\n<p>\uc704\uc758 addPoint \ud568\uc218\ub294 \ucd1d 5\uac1c\uc758 \uc778\uc790\ub97c \ubc1b\uc2b5\ub2c8\ub2e4. \uccab\ubc88\uc9f8 gl\uc740 \uadf8\ub798\ud53d \ub808\uc774\uc5b4 \uac1d\uccb4\uc774\uace0, id\ub294 \ucd94\uac00\ud560 \ub9c8\ucee4 \uadf8\ub798\ud53d \uc694\uc18c\uc758 id\uac12\uc774\uba70, x\uc640 y\ub294 \ub9c8\ucee4\uac00 \uc704\uce58\ud560 \uc88c\ud45c.. \ub05d\uc73c\ub85c imgUrl\uc740 \ub9c8\ucee4\ub97c \uc9c0\ub3c4 \uc0c1\uc5d0 \ud45c\uc2dc\ud560\ub54c \uc5b4\ub5a4 \uc774\ubbf8\uc9c0\ub85c \ud45c\uc2dc\ud560\uc9c0\uc5d0 \ub300\ud55c \uc774\ubbf8\uc9c0 URL\uc5d0 \ub300\ud55c \ubb38\uc790\uc5f4\uc785\ub2c8\ub2e4. \uc774\uc81c \ub2e4\uc74c \ucf54\ub4dc\ucc98\ub7fc 3\uac1c\uc758 \ub9c8\ucee4 \uadf8\ub798\ud53d \uc694\uc18c\ub97c \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \ubc84\ud2bc\uc758 \uc774\ubca4\ud2b8 \ud568\uc218 \uc548\uc774\ub098.. DB \uc11c\ubc84\ub85c\ubd80\ud130 \uc5b4\ub5a4 \uc870\ud68c\uac00 \uc644\ub8cc\ub418\uc5c8\uc744 \ub54c \ud638\ucd9c\ub418\ub294 \ud568\uc218\uc5d0 \uc704\uce58\ud558\uba74 \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<pre>\r\nvar gl = map.layers(\"g\");\r\n\r\naddPoint(gl, 0, 938085, 1671020, \"http:\/\/www.gisdeveloper.co.kr\/images\/pikachu.png\");\r\naddPoint(gl, 1, 938185, 1671020, \"http:\/\/www.gisdeveloper.co.kr\/images\/pokeball.png\");\r\naddPoint(gl, 2, 938285, 1671020, \"http:\/\/www.gisdeveloper.co.kr\/images\/weedle.png\");\r\n\r\nmap.coordMapper().moveTo(938185, 1671020).zoomByMapScale(4000);\r\n\r\nmap.update();\r\n<\/pre>\n<p>\uc774\uc81c \uc2e4\ud589\ud558\uba74 \ub2e4\uc74c \ud654\uba74\ucc98\ub7fc \uc774\ubbf8\uc9c0 \ub9c8\ucee4\uac00 3\uac1c \ud45c\uc2dc\ub41c \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/1\/1141197753.png\" width=\"510\" height=\"330\" \/><\/p>\n<p>\uc5ec\uae30\uc11c \uc880\ub354 \uc9c4\ud589\ud574.. \uc774\uc81c \uc704\uc758 3\uac1c\uc758 \ub9c8\ucee4\ub97c \ud074\ub9ad\ud588\uc744 \ub54c \uc815\ubcf4\ucc3d\uc744 \ud45c\uc2dc\ud558\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc9c0\ub3c4\uc758 \ud074\ub9ad \uc774\ubca4\ud2b8\ub97c \uc544\ub798\ucc98\ub7fc \ub4f1\ub85d\ud558\ub294\ub370\uc694. \uc9c0\ub3c4\uc5d0 \ub300\ud55c map \uac1d\uccb4\ub97c \uc5bb\uc5b4 \uc628 \ucf54\ub4dc \ub2e4\uc74c\uc5d0 \uc544\ub798\uc758 \ucf54\ub4dc\uac00 \uc788\uc73c\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<pre>\r\nmap.addEventListener(Xr.Events.MapClick, onMapClick);\r\n<\/pre>\n<p>\uc774\uc81c \uc9c0\ub3c4\ub97c \ud074\ub9ad\ud560 \ub54c onMapClick \ud568\uc218\uac00 \ud638\ucd9c\ub418\ub294\ub370\uc694. onMapClick \ud568\uc218\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre>\r\nfunction onMapClick(e) {\r\n    var gl = map.layers(\"g\");\r\n    var ids = gl.IdByMousePoint(e.viewX, e.viewY, true); \/\/ bOnlyOne\r\n    var cntIds = ids.length;\r\n\r\n    if(cntIds == 1) {\r\n        var id = ids[0];\r\n        var row = gl.rowSet().row(id);\r\n        var ims = row.markerSymbol();\r\n        var url = ims.url();\r\n\r\n        gl.hilighting(id);\r\n\r\n        var content = \"<img src='\" + url + \"' \/>\";\r\n\r\n        var infoWin = new Xr.ui.InfoWindowControl(\"iwc\", map,\r\n            new Xr.PointD(e.mapX, e.mapY), content, {  });\r\n\r\n        map.userControls().remove(\"iwc\");\r\n        map.userControls().add(infoWin);\r\n    }\r\n}\r\n<\/pre>\n<p>3\ubc88 \ucf54\ub4dc\uc5d0\uc11c IdByMousePoint \ud568\uc218\uc758 3\ubc88\uc9f8 \uc778\uc790\ub294 \ud074\ub9ad \uc9c0\uc810\uc5d0 \uc5ec\ub7ec\uac1c\uc758 \uadf8\ub798\ud53d \uc694\uc18c\ub97c \ubc1c\uacac\ud588\ub2e4\uace0 \ud574\ub3c4, \ub2e8 \ud558\ub098\ub9cc\uc744 \uc5bb\uaca0\ub2e4\ub294 \uc758\ubbf8\uc785\ub2c8\ub2e4. \uc774\uc81c \uc2e4\ud589\ud558\uace0 \uc9c0\ub3c4 \uc0c1\uc5d0 \ud45c\uc2dc\ub41c \ub9c8\ucee4 \uadf8\ub798\ud53d\uc744 \ud074\ub9ad\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uacb0\uacfc\ub97c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/1\/1182945135.png\" width=\"510\" height=\"493\" alt=\"\uc0ac\uc6a9\uc790 \uc0bd\uc785 \uc774\ubbf8\uc9c0\" title=\"\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>FingerEyes-Xr\uc740 \uadf8\ub798\ud53d \ub808\uc774\uc5b4\ub97c \ud1b5\ud574 \uc9c0\ub3c4 \uc0c1\uc758 \uc6d0\ud558\ub294 \uc704\uce58\uc5d0 \ub2e4\uc591\ud55c \uadf8\ub798\ud53d \uc694\uc18c\ub97c \ucd94\uac00\ud574 \ud45c\ud604\ud560 \uc218 \uc788\ub294\ub370\uc694. \uc774\uc640 \uad00\ub828\ub41c API\ub97c \uc815\ub9ac\ud574 \ubd05\ub2c8\ub2e4. \uadf8\ub798\ud53d \uc694\uc18c\ub97c \ucd94\uac00\ud558\uae30 \uc704\ud574\uc11c \uadf8\ub798\ud53d \ub808\uc774\uc5b4\uac00 \ud558\ub098 \ud544\uc694\ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ud1b5\ud574 \uadf8\ub798\ud53d \ub808\uc774\uc5b4\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4. var gfxLyr = new Xr.layers.GraphicLayer(&#8220;g&#8221;); map.layers().add(gfxLyr); \uadf8\ub798\ud53d \ub808\uc774\uc5b4\uc758 \uc774\ub984\uc744 &#8216;g&#8217;\ub85c \ud558\uc5ec \uc774 \uc774\ub984\uc744 \ud1b5\ud574 \uadf8\ub798\ud53d \ub808\uc774\uc5b4 \uac1d\uccb4\ub97c \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=2458\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;[GIS] FingerEyes-Xr for HTML5 \u3161 Code\ub85c GraphicLayer\uc5d0 \ub9c8\ucee4 \ucd94\uac00\ud558\uae30&#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":[78,5,95],"class_list":["post-2458","post","type-post","status-publish","format-standard","hentry","category-fingereyes-xr","tag-fingereyes-xr","tag-gis","tag-html5"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2458","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=2458"}],"version-history":[{"count":2,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2458\/revisions"}],"predecessor-version":[{"id":4480,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2458\/revisions\/4480"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2458"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}