METAR/SPECI を openlayers に乗せてどこまでも、の妄想ことはじめ

AJAX な部分がほら、あれだからさ。

ひとまず実際に NOAA にデータを取りにいくとこは後回し。(自前でサービス立てるしかないと思う。)

あとで気付いたが処理間違ってる。今は「てはじめ」なので気にしてない。
 1 <html>
 2 <head>
 3   <title>じっけんちゅう</title>
 4   <meta charset="UTF-8">
 5     <script src="http://openlayers.org/api/OpenLayers.js"></script>
 6 </head>
 7 <body>
 8   <div style="width:100%; height:100%" id="map"></div>
 9   <script defer="defer" type="text/javascript">
10     var projection4326 =  new OpenLayers.Projection("EPSG:4326");  // WGS84
11     var projection3857 =  new OpenLayers.Projection("EPSG:3857");  // Spherical Mercator (a.k.a WEB Mercator)
12     var map = new OpenLayers.Map({
13       div: "map",
14       projection: projection3857
15     });
16     var baselayer = new OpenLayers.Layer.XYZ("白地図",
17       "http://cyberjapandata.gsi.go.jp/xyz/blank/${z}/${x}/${y}.png", {
18         attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>",
19         maxZoomLevel: 18
20     });
21     map.addLayer(baselayer);
22     var center_lonlat = new OpenLayers.LonLat(138.7313889, 35.3622222)
23       .transform(projection4326, projection3857);
24     map.setCenter(center_lonlat, 7);
25 
26     var markers = new OpenLayers.Layer.Markers("Markers");
27     map.addLayer(markers);
28 
29     var airports = {
30         "RJTT": {"lat": 35.552258, "lon": 139.779694, "elev": 35},
31         "RJAA": {"lat": 35.764722, "lon": 140.386389, "elev": 141},
32     };
33     var metars = {
34         "RJTT":
35             "RJTT 231200Z 14005KT 9999 FEW020 SCT080 BKN100 27/24 Q1007 BECMG TL1230 36008KT TEMPO 4000 -TSRA FEW008 BKN014 FEW020CB",
36         "RJAA":
37             "RJAA 231136Z 01007KT 9000 -SHRA FEW003 SCT015 BKN035 25/24 Q1007 RMK 1ST003 3CU015 5SC035 A2976",
38     };
39 
40     for (apt in airports) {
41         var lonlat = new OpenLayers.LonLat(airports[apt]["lon"], airports[apt]["lat"])
42             .transform(projection4326, projection3857);
43         var marker = new OpenLayers.Marker(lonlat);
44         marker.id = apt;
45         marker.events.register("mousedown", marker, function() {
46             popup = new OpenLayers.Popup(apt,
47                            lonlat,
48                            new OpenLayers.Size(400, 200),
49                            "<div style='font-size: 2em; background-color: #dff'>" + metars[apt] + "</div>",
50                            true);
51             map.addPopup(popup);
52         });
53         markers.addMarker(marker);
54     }
55 
56   </script>
57 
58 </body>
59 </html>

こんなだ:

metar_on_map_firststep

ん、何してんのかって? METAR/SPECI 解析書いたもんだから、これを「スマホで使う」のもやりたいが、WEB サービス作っちゃうのもいいよね、て思って。



Related Posts