{"id":3230,"date":"2012-08-11T18:50:26","date_gmt":"2012-08-11T09:50:26","guid":{"rendered":"https:\/\/y2tech.net\/blog\/?p=3230"},"modified":"2012-08-13T11:03:34","modified_gmt":"2012-08-13T02:03:34","slug":"diff_on_cj4_map","status":"publish","type":"post","link":"https:\/\/y2tech.net\/blog\/computer\/webmap\/diff_on_cj4_map-3230\/","title":{"rendered":"\u96fb\u5b50\u56fd\u571fV4\u306e\u80cc\u666f\u5730\u56f3\u306e\u305a\u308c"},"content":{"rendered":"

\u96fb\u5b50\u56fd\u571fV4\u306e\u80cc\u666f\u5730\u56f3\u3068\u4ed6\u306eWEB\u30de\u30c3\u30d7\u3068\u306e\u4f75\u7528\u306f\u7d50\u69cb\u96e3\u3057\u3044\u304b\u3082\uff1f<\/h3>\r\n
\r\n

\u96fb\u5b50\u56fd\u571fV4\u3067\u306fGoogle Maps\u306a\u3069\u3068\u307b\u307c\u540c\u3058\u4ed5\u69d8\u306e\u30e9\u30b9\u30bf\u30fc\u30a4\u30e1\u30fc\u30b8\u30d9\u30fc\u30b9\u306e\u6b63\u65b9\u80cc\u666f\u5730\u56f3\u304c\u4f7f\u308f\u308c\u3066\u3044\u308b\u304c\u3001OpenLayers\u7b49\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u7528\u3044\u3066Google Maps\u306a\u3069\u306e\u4ed6\u306eWEB\u30de\u30c3\u30d7\u30b7\u30b9\u30c6\u30e0\u3068\u4f75\u7528\u3057\u3088\u3046\u3068\u3059\u308b\u3068\u3001\u4f4d\u7f6e\u7cbe\u5ea6\u306e\u554f\u984c\u306a\u3069\u304c\u3042\u308a\u7d50\u69cb\u96e3\u5100\u3057\u305d\u3046\u3060\uff0e<\/p>\r\n
\r\n

OpenLayers\u3067\u96fb\u5b50\u56fd\u571fV4\u306e\u80cc\u666f\u5730\u56f3\u3092\u8868\u793a\u3059\u308b\u30b5\u30f3\u30d7\u30eb\u3092\u4f5c\u3063\u3066\u307f\u305f\u304c\u3001\u5730\u56f3\u306e\u4e2d\u5fc3\u304c\u305a\u308c\u3066\u3057\u307e\u3063\u3066\u3044\u308b\uff0e\u96fb\u5b50\u56fd\u571fV4\u306e\u80cc\u666f\u5730\u56f3\u306e\u5404\u30bf\u30a4\u30eb\u306f\u304d\u3061\u3093\u3068\u7cbe\u5ea6\u826f\u304f\u4f5c\u3089\u308c\u3066\u3044\u308b\u3088\u3046\u306a\u306e\u3067\u3001\u5358\u306bOpenLayers\u3067\u306e\u5b9f\u88c5\u306e\u4ed5\u65b9\u306b\u554f\u984c\u304c\u3042\u308b\u306e\u3060\u3068\u601d\u3046\u304c\u3001\u5404\u80cc\u666f\u5730\u56f3\u306e\u30a2\u30e9\u30a4\u30e1\u30f3\u30c8\u306b\u306f\u6ce8\u610f\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u305d\u3046\u3060\uff0e<\/p>\r\n
\r\n

\u540c\u3058\u5834\u6240\u3067\u5730\u56f3\u306e\u7e2e\u5c3a\u3092\u5909\u3048\u308b\uff08\u30ba\u30fc\u30e0\u3059\u308b\uff09\u3068\u3001\u5730\u56f3\u306e\u4e2d\u5fc3\u4f4d\u7f6e\u304c\u5927\u5e45\u306b\u305a\u308c\u3066\u3057\u307e\u3046\u73fe\u8c61\u304c\u898b\u3089\u308c\u308b\uff0eGoogle Maps\u3084Bing Maps\u7b49\u3067\u3082\u5730\u56f3\u306e\u7a2e\u985e\u3084\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb\u3092\u5909\u3048\u308b\u3068\u591a\u5c11\u305a\u308c\u308b\u73fe\u8c61\u306f\u898b\u3089\u308c\u308b\u304c\u3001\u3053\u308c\u307b\u3069\u5927\u304d\u306a\u305a\u308c\u304c\u751f\u3058\u308b\u3053\u3068\u306f\u306a\u3044\uff0e\r\n
\r\n

\u3000\r<\/p>\r\n

\r\n\r\n
\r\n\"CJMap
\u7e2e\u5c3a1\/4500 \uff08\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb\uff1a17\uff09<\/span>\r\n<\/div>\r\n\r\n
\r\n\"CJMap
\u7e2e\u5c3a1\/9000\uff08\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb\uff1a16\uff09 <\/span>\r\n<\/div>\r\n\r\n<\/div>\r\n
<\/div>\r\n
\r\n\r\n
\r\n\r\n
\r\n\"CJMap
\u7e2e\u5c3a1\/18000 \uff08\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb\uff1a15\uff09<\/span>\r\n<\/div>\r\n\r\n
\r\n\"CJMap
\u7e2e\u5c3a1\/36000 \uff08\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb\uff1a14\uff09<\/span>\r\n\r\n<\/div>\r\n
<\/div>\r\n

\r\n\u3053\u306e\u80cc\u666f\u5730\u56f3\u7b49\u30c7\u30fc\u30bf\u306f\u3001\u56fd\u571f\u5730\u7406\u9662\u306e\u96fb\u5b50\u56fd\u571fWeb\u30b7\u30b9\u30c6\u30e0\u304b\u3089\u63d0\u4f9b\u3055\u308c\u305f\u3082\u306e\u3067\u3042\u308b<\/b><\/span>\r\n<\/div>\r\n
<\/div>\r\n
\r\n\r\n

\u4e0a\u8a18\u306e4\u3064\u306e\u753b\u50cf\u306f\u5bcc\u58eb\u5c71\u306e\u9802\u4e0a\u306b\u3042\u308b\u5263\u30f6\u5cf0\u306e\u4e8c\u7b49\u4e09\u89d2\u70b9 [ \u6771\u7d4c\uff1a138\u00b043’38.515″ (138.72736528), \u5317\u7def\uff1a35\u00b021’38.261″ (35.36062806) \u6a19\u9ad8\uff1a3775.63m ]\u3000\u3092\u4e2d\u5fc3\u306b\u8a2d\u5b9a\u3057\u3066\u30ba\u30fc\u30e0\u30ec\u30d9\u30eb\uff0814\u301c17\uff09\u3092\u5909\u3048\u305f\u5834\u5408\u306e\u3082\u306e\u3067\u3042\u308b\uff0e\r\n
\r\n \u3010\u6ce8\u3011\u4e0a\u8a18\u306e\u30b5\u30f3\u30d7\u30eb\u753b\u50cf\u306f\u4e0b\u8a18\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u5b9f\u884c\u3057\u305f\u5834\u5408\u306b\u751f\u3058\u305f\u3082\u306e\u3067\u3042\u3063\u3066\u3001\u56fd\u571f\u5730\u7406\u9662\u306e\u30b5\u30f3\u30d7\u30eb\u30d7\u30ed\u30b0\u30e9\u30e0<\/a>\u3067\u306f\u3053\u306e\u3088\u3046\u306a\u305a\u308c\u306f\u751f\u3058\u306a\u3044\u3088\u3046\u3060\uff0e\u305a\u308c\u306e\u539f\u56e0\u306f\u30cf\u30c3\u30ad\u30ea\u3057\u306a\u3044\u304c\u3001OpenLayers\u306b\u3088\u308b\u5b9f\u88c5\u65b9\u6cd5\u306b\u554f\u984c\u304c\u3042\u308b\u306e\u304b\u3082\u3057\u308c\u306a\u3044\uff0e\u5404\u80cc\u666f\u5730\u56f3\u306e\u30bf\u30a4\u30ea\u30f3\u30b0\u7cbe\u5ea6\u306e\u554f\u984c\u3084\u5fae\u5999\u306a\u89e3\u50cf\u5ea6\u306e\u8a2d\u5b9a\u306e\u9055\u3044\u306a\u3069\u304c\u5f71\u97ff\u3057\u3066\u3044\u308b\u306e\u304b\u3082\u3057\u308c\u306a\u3044\uff0e<\/b>\r\n
\r\n\u3010\u8ffd\u8a18\u3011\u300eOpenLayers Tips: \u30aa\u30fc\u30d0\u30ec\u30a4\u8868\u793a\u300f<\/a> \u3067\u7d39\u4ecb\u3057\u305f\u30b5\u30f3\u30d7\u30eb\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u306fGoogle Maps\u3068\u96fb\u5b50\u56fd\u571fV4\u306e\u30aa\u30eb\u30bd\u753b\u50cf\u304c\u4e0a\u624b\u304f\u91cd\u306a\u308a\u5408\u3063\u3066\u3044\u308b\u3088\u3046\u306a\u306e\u3067\u3001\u3084\u306f\u308a\u3053\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u306eOpenLayers\u306b\u3088\u308b\u5b9f\u88c5\u65b9\u6cd5\u306b\u554f\u984c\u304c\u3042\u308b\u306e\u3060\u308d\u3046\uff0e<\/b>\r\n\r<\/p>\r\n

\r\n \r\n
\r\n\r\n\r\n\r\n\t\r\n\tCJ4 Map Test<\/title>\r\n<\/head>\r\n<script src=\".\/OpenLayers-2.12\/OpenLayers.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\".\/webtis_v4.js\" charset=\"UTF-8\"><\/script>\r\n<script src=\"http:\/\/maps.google.co.jp\/maps\/api\/js?v=3.5&sensor=false&language=ja\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\n\/\/ define map projection\r\nvar prjSphereMercator = new OpenLayers.Projection(\"EPSG:900913\");\r\nvar prjLatLon = new OpenLayers.Projection(\"EPSG:4326\");\r\n \r\nfunction init() {\r\n\r\n  var map = new OpenLayers.Map( 'map_cj4' );\r\n\r\n    \/\/  map area restriction\r\n    var maxExtentArea = new OpenLayers.Bounds();\r\n    maxExtentArea.extend(new OpenLayers.LonLat(110.0, 15.0).transform(prjLatLon, prjSphereMercator));\r\n    maxExtentArea.extend(new OpenLayers.LonLat(165.0, 55.0).transform(prjLatLon, prjSphereMercator));\r\n  \r\n    var restrictedExtent = maxExtentArea.clone();\r\n \r\n    var dataSet = { 0: null, 1: null, 3: null, 4: null,\r\n        5:{dataId:\"JAIS\"},\r\n        6:{dataId:\"JAIS\"},\r\n        7:{dataId:\"JAIS\"},\r\n        8:{dataId:\"JAIS\"},\r\n        9:{dataId:\"BAFD1000K\"},\r\n        10:{dataId:\"BAFD1000K\"},\r\n        11:{dataId:\"BAFD1000K\"},\r\n        12:{dataId:\"BAFD200K\"},\r\n        13:{dataId:\"BAFD200K\"},\r\n        14:{dataId:\"BAFD200K\"},\r\n        15:{dataId:\"DJBMM\"},\r\n        16:{dataId:\"DJBMM\"},\r\n        17:{dataId:\"DJBMM\"},\r\n        18:{dataId:\"FGD\"}\r\n    };\r\n  \r\n    var cj4LayerName = \"CJ4 Base Map\";\r\n\t\r\n    var cj4BaseMap = new webtis.Layer.BaseMap( cj4LayerName, {\r\n          dataSet:dataSet,\r\n          units: \"m\",\r\n          projection: prjSphereMercator,\r\n          displayProjection: prjLatLon,\r\n          maxExtent: maxExtentArea,\r\n          restrictedExtent: restrictedExtent\r\n    } );\r\n  \r\n    \/\/ Google Maps\r\n    var googlemap = new OpenLayers.Layer.Google( \"Google ROADMAP\", \r\n        {numZoomLevels: 20 }\r\n    );\r\n    var gmap_terrain = new OpenLayers.Layer.Google( \"Google TERRAIN\",\r\n        {type: google.maps.MapTypeId.TERRAIN}\r\n    );\r\n \r\n    \/\/ Open Street Map\r\n    var osm = new OpenLayers.Layer.OSM();\r\n \r\n    \/\/ Bing Maps\r\n    var apiKey = \"### Your Bing Maps API Key ###\";\r\n    var road = new OpenLayers.Layer.Bing({\r\n        key: apiKey,\r\n        type: \"Road\"\r\n    });\r\n    var hybrid = new OpenLayers.Layer.Bing({\r\n        key: apiKey,\r\n        type: \"AerialWithLabels\",\r\n        name: \"Bing Aerial With Labels\"\r\n    });\r\n\r\n    map.addLayers( [ cj4BaseMap, googlemap, gmap_terrain, osm, road, hybrid ] );\r\n\r\n    \/\/ Mt. Fuji Kengamine 138\u00b043'38.515\" E (138.72736528),35\u00b021'38.261\" N (35.36062806) 3775.63m\r\n\r\n    var mapCenterLatLng = new OpenLayers.LonLat(138.72736528, 35.36062806);\r\n    var mapCenter =  mapCenterLatLng.transform( prjLatLon, map.getProjectionObject() );\r\n    map.setCenter( mapCenter, 17 );\r\n\r\n    map.addControl( new OpenLayers.Control.LayerSwitcher() );\r\n\r\n   \/\/ logo\r\n   var cjLogos = new webtis.Control.DenshiKokudoLinks();\r\n   cjLogos.heightOffset = 70;\r\n   map.addControl( cjLogos );\r\n\r\n    \/\/ crosshairs cursor\r\n    var crosshairsCursorCtrl = new OpenLayers.Control.CrosshairsCursol({\r\n        iconImageUrl:  \".\/crosshairs.png\",\r\n        iconSize: new OpenLayers.Size(32, 32),\r\n        xyPos: new OpenLayers.Pixel( map.getCurrentSize().w\/2, map.getCurrentSize().h\/2 )\r\n    });\r\n    map.addControl( crosshairsCursorCtrl ); \r\n\r\n    \/\/ mouse position\r\n    map.addControl( new OpenLayers.Control.MousePosition( {\r\n      'div': OpenLayers.Util.getElement('mouse_position'),\r\n      prefix: 'Mouse Position : ',\r\n      suffix: ' [Lon, Lat]',\r\n      displayProjection: prjLatLon,\r\n      emptyString: 'Mouse Position : ',\r\n      numDigits: 6\r\n    } ));\r\n\r\n    map.addControl( new OpenLayers.Control.MousePosition( { \r\n        'div': OpenLayers.Util.getElement('mouse_position_m'),\r\n        prefix: '  ( ',\r\n        suffix: ' [m] )',\r\n        emptyString: '',\r\n        numDigits: 0\r\n    } ));\r\n \r\n    \/\/ draw a map scale bar\r\n    map.addControl( new OpenLayers.Control.ScaleLine( {\r\n        maxWidth:150,\r\n        bottomOutUnits: \"\", \r\n        bottomInUnits: \"\",\r\n        geodesic:true\r\n    } ));\r\n\r\n    \/\/ show map center location\r\n    show_map_center( map );\r\n\t\r\n    \/\/ event handler\r\n    map.events.register( 'moveend', map, function() { show_map_center(map); } );\r\n \r\n}\r\n\r\nfunction show_map_center( map ) {\r\n    var center = map.getCenter();\r\n    var centerLatLon = center.transform(prjSphereMercator, prjLatLon);\r\n    var lat = Math.round(centerLatLon.lat * 1000000) \/ 1000000;\r\n    var lon = Math.round(centerLatLon.lon * 1000000) \/ 1000000;\r\n    var zoomLevel = map.getZoom();\r\n\t\r\n    var htmlText= \"Map Center: \" + lon + \", \" + lat + \"  Zoom Level: \"+ zoomLevel;\r\n    document.getElementById('map_info').firstChild.nodeValue = htmlText;\r\n}\r\n\r\n\/\/============================================================================================\/\/\r\n\/\/ draw our crosshairs cursor control\r\n\/\/ \r\n\/\/  reference source : http:\/\/lists.osgeo.org\/pipermail\/openlayers-users\/2008-September\/007555.html\r\n\/\/\r\nOpenLayers.Control.CrosshairsCursol = OpenLayers.Class( OpenLayers.Control, {\r\n    element : null,\r\n    iconImageUrl: null,\r\n    iconSize: new OpenLayers.Size( 32, 32 ),\r\n    xyPos: new OpenLayers.Pixel(320, 240),\r\n\r\n    initialize: function( element ) {\r\n        OpenLayers.Control.prototype.initialize.apply( this, arguments );\r\n        this.element = OpenLayers.Util.getElement( element ); \r\n    },\r\n\r\n    draw: function() {\r\n        OpenLayers.Control.prototype.draw.apply( this, arguments );\r\n        var xy = this.xyPos.clone();\r\n        var centerXYPos = new OpenLayers.Pixel( xy.x - (this.iconSize.w \/ 2), \r\n                                                xy.y - (this.iconSize.h \/ 2) );\r\n        this.buttons = new Array();\r\n\r\n        \/\/this.iconImageUrl = OpenLayers.Util.getImagesLocation() + \"crosshairs.png\";\r\n\r\n        var uniqID = OpenLayers.Util.createUniqueID( \"OpenLayers.Control.CrosshairsCtrl_\" );\r\n        this.div = OpenLayers.Util.createAlphaImageDiv(\r\n            uniqID, \r\n            centerXYPos, \r\n            this.iconSize, \r\n            this.iconImageUrl, \r\n            \"absolute\"\r\n        );\r\n        return this.div;\r\n    },\r\n    CLASS_NAME: \"OpenLayers.Control.CrosshairsCursol\"\r\n});\r\n \r\n<\/script>\r\n\r\n<style type=\"text\/css\">\r\n#map_cj4 {\r\n  width:  640px;\r\n  height: 480px;\r\n  border: solid 1px #999;\r\n}\r\n#map_info_area {\r\n  width:  640px;\r\n  height: 40px;\r\n  font-size: small;\r\n  border: solid 1px #999;\r\n}\r\n#map_scale {\r\n  float: right;\r\n  height: 40px;\r\n}\r\n#mouse_position {\r\n  float: left;\r\n  height: 20px;\r\n}\r\n#mouse_position_m {\r\n  margin-left: 0.5em;\r\n  float: left;\r\n  height: 20px;\r\n}\r\n#map_zoom {\r\n  float: left;\r\n  height: 20px;\r\n}\r\n#map_info {\r\n  display: block;\r\n  height: 18px;\r\n}\r\n\r\ndiv.olControlAttribution {\r\n  font-size: x-smaller;\r\n  right: 3px;\r\n  bottom: 0.2em;\r\n  position: absolute;\r\n  display: block;\r\n}\r\n\r\n<\/style>\r\n \r\n<\/head>\r\n \r\n<body onload=\"init()\">\r\n    <div id=\"map_cj4\" ><\/div>\r\n    <div id=\"map_info_area\" >\r\n        <div id=\"layer_sw\" ><\/div>\r\n        <div id=\"map_info\" >Map Center: <\/div>\r\n        <div id=\"mouse_position\" ><\/div>\r\n        <div id=\"mouse_position_m\" ><\/div>\r\n        <div id=\"map_scale\" ><\/div>\r\n    <\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/code><\/pre>\r\n","protected":false},"excerpt":{"rendered":"\u96fb\u5b50\u56fd\u571fV4\u3067\u306fGoogle Maps\u306a\u3069\u3068\u307b\u307c\u540c\u3058\u4ed5\u69d8\u306e\u30e9\u30b9\u30bf\u30fc\u30a4\u30e1\u30fc\u30b8\u30d9\u30fc\u30b9\u306e\u6b63\u65b9\u80cc\u666f\u5730\u56f3\u304c\u4f7f\u308f\u308c\u3066\u3044\u308b\u304c\u3001OpenLayers\u7b49\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u7528\u3044\u3066Google Maps\u306a\u3069\u306e\u4ed6\u306eWEB\u30de\u30c3\u30d7\u30b7\u30b9\u30c6\u30e0\u3068\u4f75\u7528\u3057\u3088\u3046\u3068\u3059\u308b\u3068\u3001\u4f4d\u7f6e\u7cbe\u5ea6\u306e\u554f\u984c\u306a\u3069\u304c\u3042\u308a\u7d50\u69cb\u96e3\u5100\u3057\u305d\u3046\u3060\uff0e","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[561],"tags":[571,572,488,500],"class_list":["post-3230","post","type-post","status-publish","format-standard","hentry","category-webmap","tag-571","tag-572","tag-488","tag-v4"],"_links":{"self":[{"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/posts\/3230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/comments?post=3230"}],"version-history":[{"count":0,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/posts\/3230\/revisions"}],"wp:attachment":[{"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/media?parent=3230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/categories?post=3230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/tags?post=3230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}