{"id":3538,"date":"2014-05-27T09:08:13","date_gmt":"2014-05-27T00:08:13","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3538"},"modified":"2014-05-27T09:12:40","modified_gmt":"2014-05-27T00:12:40","slug":"post-3538","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/openlayers\/3538","title":{"rendered":"OpenLayers ver.2\u3067\u3082\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u3067\u5730\u56f3\u30bf\u30a4\u30eb\u3092\u753b\u50cf\u51e6\u7406\u3067\u304d\u305f"},"content":{"rendered":"<p><a href=\"https:\/\/gunmagisgeek.com\/blog\/map\/3530\">\u96fb\u5b50\u56fd\u571f\u57fa\u672c\u56f3\uff08\u30aa\u30eb\u30bd\u753b\u50cf\uff09\u3092\u8aad\u307f\u8fbc\u307f\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u3067\u753b\u50cf\u51e6\u7406\u3057\u3066\u8868\u793a\u3059\u308b<\/a><\/p>\n<p>\u5148\u65e5\u3001\u4e0a\u8a18\u306e\u8a18\u4e8b\u3092\u66f8\u304d\u307e\u3057\u305f\u304c\u3001OpenLayers2\u3067\u3082\u540c\u69d8\u306e\u3053\u3068\u304c\u3067\u304d\u305f\u306e\u3067\u30b5\u30f3\u30d7\u30eb\u3092\u63b2\u8f09\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/OpenLayers\/03\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/05\/openlayersCanvas1.jpg\" alt=\"openlayers Canvas effect\" width=\"516\" height=\"517\" class=\"aligncenter border size-full wp-image-3536\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/05\/openlayersCanvas1.jpg 516w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/05\/openlayersCanvas1-150x150.jpg 150w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/05\/openlayersCanvas1-500x500.jpg 500w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/05\/openlayersCanvas1-100x100.jpg 100w\" sizes=\"auto, (max-width: 516px) 100vw, 516px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/OpenLayers\/03\/\">example<\/a><\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<pre class=\"lang:js decode:true \" >window.onload = init;\r\n\r\nfunction init() {\r\n  var options = {\r\n\t\tprojection: new OpenLayers.Projection(\"EPSG:900913\"),\r\n\t\tmaxResolution:156543.0339,\r\n\t\tmaxExtent: new OpenLayers.Bounds(-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892),\r\n\t\tunits: \"m\",\r\n\t\tcontrols: [\r\n\t\t\tnew OpenLayers.Control.PanZoomBar(),\r\n\t\t\tnew OpenLayers.Control.LayerSwitcher(),\r\n\t\t\tnew OpenLayers.Control.Navigation(),\r\n\t\t\tnew OpenLayers.Control.Attribution({displayClass: 'prmtcd'})\r\n\t\t],\r\n\t\tnumZoomLevels: 22\r\n    }\r\n\r\n\tvar map = new OpenLayers.Map('map',options);\r\n\tmap.div.style.backgroundColor = 'rgb(221,238,255)';\r\n\r\n\tvar tms = new OpenLayers.Layer.TMS(\r\n\t\t\"\u5ba4\u862d-\u822a\u7a7a\u5199\u771fH25\",\r\n\t\t \"http:\/\/shimz.me\/tool\/imgProxy.php?url=\" +\r\n\t\t\"http:\/\/neogis.net\/muroran\/TILE\/\",\r\n\t\t{\r\n\t\t\tserviceVersion: '1.0.0',\r\n\t\t\tlayername: \"H25\",\r\n\t\t\ttype: \"jpg\",\r\n\t\t\tnumZoomLevels: 22,\r\n\t\t\tisBaseLayer: true,\r\n\t\t\teventListeners: {\r\n\t\t\t\ttileloaded: function(evt) {\r\n\t\t\t\t\tvar ctx = evt.tile.getCanvasContext();\r\n\t\t\t\t\tif (ctx) {\r\n\t\t\t\t\t\tvar imgd = ctx.getImageData(0, 0, evt.tile.size.w, evt.tile.size.h);\r\n\t\t\t\t\t\tvar data = imgd.data;\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tvar width = 256, height = 256;\r\n\t\t\t\t\t\tvar gray = new Uint8ClampedArray(data.length); \/\/\u30b0\u30ec\u30a4\u30b9\u30b1\u30fc\u30eb\u4fdd\u5b58\u7528\r\n\t\t\t\t\t\tvar edge = new Uint8ClampedArray(data.length); \/\/\u30a8\u30c3\u30b8\u753b\u50cf\u4fdd\u5b58\u7528\r\n\r\n\t\t\t\t\t\ttoGray(data, gray); \/\/\u30b0\u30ec\u30fc\u30b9\u30b1\u30fc\u30eb\u5316\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\/\/\u30a8\u30c3\u30b8\u62bd\u51fa\r\n\t\t\t\t\t\tfor (var y = 0; y &lt; height - 1; y++) {\r\n\t\t\t\t\t\t\tfor (var x = 0; x &lt; width - 1; x++) {\r\n\t\t\t\t\t\t\t\tvar i = x + y * width; \t\r\n\t\t\t\t\t\t\t\tvar r_i = (x + 1) + y * width; \r\n\t\t\t\t\t\t\t\tvar ex = gray[r_i] - gray[i];\r\n\t\t\r\n\t\t\t\t\t\t\t\tvar d_i = x + (y + 1) * width;\r\n\t\t\t\t\t\t\t\tvar ey = gray[d_i] - gray[i]; \r\n\t\t\r\n\t\t\t\t\t\t\t\tvar ez = Math.sqrt(ex * ex + ey * ey);\r\n\t\t\t\t\t\t\t\tedge[i] = ez * 2; \r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\ttoColor(edge, data);\t \/\/\u30ab\u30e9\u30fc\u5316\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tctx.putImageData(imgd, 0, 0);\r\n\t\t\t\t\t\tevt.tile.imgDiv.src = ctx.canvas.toDataURL();\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\t\t\r\n\t\t}\r\n    );\r\n\t\r\n\tmap.addLayer(tms);\r\n\tvar lonlat = new OpenLayers.LonLat(15693230.659, 5208226.967);\r\n\tmap.setCenter(lonlat, 15);\r\n  \r\n\tfunction toGray(rgba, gray) {\r\n\t\tvar length = rgba.length;\r\n\t\tvar total = 0; \r\n\t\tfor (var i = 0; i &lt; length; i += 4) {\r\n\t\t\tvar g = 0.30 * rgba[i + 0] + 0.59 * rgba[i + 1] + 0.11 * rgba[i + 2];\r\n\t\t\tgray[i\/4] = g;\r\n\t\t\ttotal += g;\r\n\t\t}\r\n\t\treturn total \/ (length \/ 4);\r\n\t}\r\n\r\n\tfunction toColor(gray, rgba) {\r\n\t\tvar length = gray.length * 4;\r\n\t\tfor (var i = 0; i &lt; length; i += 4) {\r\n\t\t\trgba[i + 0] = gray[i\/4];\r\n\t\t\trgba[i + 1] = gray[i\/4];\r\n\t\t\trgba[i + 2] = gray[i\/4];\r\n\t\t\trgba[i + 3] = 255;\r\n\t\t}\r\n\t}\r\n  \r\n}\r\n<\/pre>\n<p>\u306a\u304a\u3001\u5730\u56f3\u753b\u50cf\u306b\u3064\u3044\u3066\u306f\u5ba4\u862d\u5e02\u306e\u30aa\u30fc\u30d7\u30f3\u30c7\u30fc\u30bf\u3092\u5229\u7528\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u3002<\/p>\n<p><a href=\"http:\/\/neogis.net\/muroran\/man\/man_muroran_tms2.pdf\">[PDF]\u5ba4\u862d\u5e02\u30aa\u30eb\u30bd\u753b\u50cf\u822a\u7a7a\u5199\u771f\u306e\uff34\uff2d\uff33\u914d\u4fe1\u306b\u95a2\u3057\u307e\u3057\u3066<\/a><\/p>\n<h3>\u305d\u306e\u4ed6<\/h3>\n<p>\u7279\u5b9a\u306e\u30ab\u30e9\u30fc\u3060\u3051\u5225\u306e\u8272\u306b\u5909\u66f4\u3059\u308b\u306a\u3069\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/OpenLayers\/04\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/05\/openlayersCanvas2.jpg\" alt=\"openlayer canvas effect\" width=\"519\" height=\"460\" class=\"aligncenter border size-full wp-image-3537\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/05\/openlayersCanvas2.jpg 519w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/05\/openlayersCanvas2-169x150.jpg 169w\" sizes=\"auto, (max-width: 519px) 100vw, 519px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/OpenLayers\/04\/\">example<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u96fb\u5b50\u56fd\u571f\u57fa\u672c\u56f3\uff08\u30aa\u30eb\u30bd\u753b\u50cf\uff09\u3092\u8aad\u307f\u8fbc\u307f\u30af\u30e9\u30a4\u30a2\u30f3\u30c8&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3536,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56,34],"tags":[],"class_list":["post-3538","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas","category-openlayers","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3538","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=3538"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3538\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3536"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}