岩松 暉*(「GET九州」No.30, 2009/12)
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset= Shift_JIS "> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>九州応用地質学会</TITLE> <SCRIPT> function app_main() { top.map.createScaleBar(); top.map.openMap("http://cyberjapan.jp/japan0.htm"); top.map.openJSGIXML("geology.xml") top.map.openJSGIXML("geography.xml") top.map.setMouseMode('pan'); top.map.enablePopup(); top.map.openMap(); } </SCRIPT> </HEAD> <BODY BGCOLOR="skyblue"> <IFRAME name="map" src="webtis_map_obj.htm" width="800" height="500" scrolling="AUTO" frameborder="1"></IFRAME> </BODY> </HTML>なお、マウスは移動モード(pan)になっているので、拡大縮小はホイールボタンを使用する。拡大・縮小・移動などのボタンをつけたい場合には下記、鹿児島フィールドミュージアムのソースコードを参照して自作されたい。
<?xml version="1.0" encoding="Shift_JIS"?> <GI timeStamp='2007-10-01T09:45:20' version='1.0'> <dataset> <layer> <name>User_data</name> <description>点型データサンプル1</description> <style> <name>シンボル1</name> <type>symbol1</type> <display>on</display> <tranceparent>on</tranceparent> <selection>on</selection> <displaylevel>all</displaylevel> <symbol> <uri>http://cyberjapan.jp/symbols/080.bmp</uri> <size>3,static</size> </symbol> </style> <point> <point> <CRS uuidref='JGD2000 / (L, B)'/> <position> <coordinate>130.3037 33.6208</coordinate> </position> </point> <name>地質</name> <description>地質</description> <attribute>名称=能古島,指定=,URL=nokonoshima.jpg</attribute> </point> </layer> </dataset> </GI>geography.xmlの場合:
<?xml version="1.0" encoding="Shift_JIS"?> <GI timeStamp='2007-10-01T09:45:20' version='1.0'> <dataset> <layer> <name>User_data</name> <description>点型データサンプル2</description> <style> <name>シンボル2</name> <type>symbol2</type> <display>on</display> <tranceparent>on</tranceparent> <selection>on</selection> <displaylevel>all</displaylevel> <symbol> <uri>http://cyberjapan.jp/symbols/081.bmp</uri> <size>3,static</size> </symbol> </style> <point> <point> <CRS uuidref='JGD2000 / (L, B)'/> <position> <coordinate>130.3536 33.6587</coordinate> </position> </point> <name>地形</name> <description>地質・地形</description> <attribute>名称=海の中道,指定=国営公園,URL=nakamichi.pdf</attribute> </point> </layer> </dataset> </GI>最初の
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>九州応用地質学会</title> <script src="http://maps.google.co.jp/maps?file=api&v=2.x&key=xxxx" type="text/javascript"></script> <script src="http://eniac.sci.kagoshima-u.ac.jp/~kaum/wms236.js" type="text/javascript"></script> </head> <body onload="load()" onunload="GUnload()" bgcolor="#ffffff"> <div id="map" style="width: 500px; height: 500px"></div> <script type="text/javascript"> var map = new GMap2(document.getElementById("map"), { mapTypes: [ G_PHYSICAL_MAP, G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP ] }); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl(true)); map.addControl(new GScaleControl()); map.setCenter(new GLatLng(33.59, 130.40), 10); var tile_geology= new GTileLayer(new GCopyrightCollection(""),12,17); tile_geology.myLayers='areas,lines'; tile_geology.myFormat='image/png'; tile_geology.myBaseURL='http://geodata1.geogrid.org/mapserv/g200k/g200k_d_ja? service=WMS&request=GetMap&version=1.1.1&format=image/png& style=&layers=areas,lines&WIDTH=512&HEIGHT=512&TRANSPARENT=TRUE'; tile_geology.getTileUrl=CustomGetTileUrl; tile_geology.getOpacity = function() {return 0.5;} var layer1=[G_NORMAL_MAP.getTileLayers()[0],tile_geology]; var layer2=[G_PHYSICAL_MAP.getTileLayers()[0],tile_geology]; var layer3=[G_SATELLITE_MAP.getTileLayers()[0],tile_geology]; var map1 = new GMapType(layer1, G_NORMAL_MAP.getProjection(), "地質図\t+地図", G_NORMAL_MAP); var map2 = new GMapType(layer2, G_PHYSICAL_MAP.getProjection(), "地質図\t+地形", G_PHYSICAL_MAP); var map3 = new GMapType(layer3, G_SATELLITE_MAP.getProjection(), "地質図\t+写真", G_SATELLITE_MAP); map.addMapType(map1); map.addMapType(map2); map.addMapType(map3); map.setMapType(map2); // Default map set var baseIcon = new GIcon(); baseIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; baseIcon.iconSize = new GSize(12, 20); baseIcon.shadowSize = new GSize(22, 20); baseIcon.iconAnchor = new GPoint(6, 20); baseIcon.infoWindowAnchor = new GPoint(9, 2); baseIcon.infoShadowAnchor = new GPoint(18, 25); // Creates a marker whose info window displays the given number function addMarker(map, lat, lng, html, flag) { var icon = new GIcon(baseIcon) icon.image = "http://labs.google.com/ridefinder/images/mm_20_" + flag + ".png"; var point = new GPoint(lng, lat); var marker = new GMarker(point, icon); // Show this marker's index in the info window when it is clicked GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); map.addOverlay(marker); } addMarker(map,33.6208, 130.3036,"<a href='http://wwwsoc.nii.ac.jp/jseg-kyushu/' target='_blank'>能古島<br><img src='nokonoshima.jpg' border='0'> </a>","red"); addMarker(map,33.6588, 130.3536,"< a href='nakamichi.pdf' target='_blank'>海の中道</a>","blue"); //]]> </script> </body> </html>ここで地図の中心位置と縮尺はmap.setCenterのところを変更すればよい。データはaddMarkerの行を追加していく。アイコンの色はred, blue, yellow、orange, purple, brown, white, gray, blackが用意されている。
var request = GXmlHttp.create(); request.open("GET", "google-data.csv", true); request.onreadystatechange = function() { if (request.readyState == 4) { var res = request.responseText; var rows = res.split('\n'); for (var i = 0; i < rows.length; i++) { var lon = rows[i].split(',')[1]; var lat = rows[i].split(',')[2]; var name = rows[i].split(',')[3]; var link = rows[i].split(',')[4]; var flag = rows[i].split(',')[5]; var html = "<a href='" + link + "' target='_blank'>"; html += "<b>" + name + "</b></a>"; var icon = new GIcon(baseIcon) icon.image = "http://labs.google.com/ridefinder/images/mm_20_" + flag + ".png"; var point = new GPoint(lat, lon); addMarker(point,html,icon); } } } request.send(null);データはgoogle-data.csvを読み込んでいる。このエクセルファイルの構造は下記の通り、通し番号、緯度、経度、名称、ファイル名、アイコンの色の順に半角カンマでつないである。もちろん、フォントはUTF-8である。
1,33.6208, 130.3036,能古島,nokonoshima.jpg,red 2,33.6587, 130.3536,海の中道,nakamichi.pdf,blueなお、地質図を利用する際には凡例も別ウインドウで表示しておくと便利である。
<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"> <Document> <Folder> <open>1</open> <Style id="myRedStyle"> <IconStyle> <scale>0.8</scale> <Icon> <href>http://labs.google.com/ridefinder/images/mm_20_red.png</href> </Icon> </IconStyle> </Style> <Style id="myBlueStyle"> <IconStyle> <scale>0.8</scale> <Icon> <href>http://labs.google.com/ridefinder/images/mm_20_blue.png</href> </Icon> </IconStyle> </Style> <Style id="myYellowStyle"> <IconStyle> <scale>0.8</scale> <Icon> <href>http://labs.google.com/ridefinder/images/mm_20_yellow.png</href> </Icon> </IconStyle> </Style> <Style id="myGreenStyle"> <IconStyle> <scale>0.8</scale> <Icon> <href>http://labs.google.com/ridefinder/images/mm_20_green.png</href> </Icon> </IconStyle> </Style> <Style id="myPurpleStyle"> <IconStyle> <scale>0.8</scale> <Icon> <href>http://labs.google.com/ridefinder/images/mm_20_purple.png</href> </Icon> </IconStyle> </Style> <Style id="myOrangeStyle"> <IconStyle> <scale>0.8</scale> <Icon> <href>http://labs.google.com/ridefinder/images/mm_20_orange.png</href> </Icon> </IconStyle> </Style> <Style id="myWhiteStyle"> <IconStyle> <scale>0.8</scale> <Icon> <href>http://labs.google.com/ridefinder/images/mm_20_white.png</href> </Icon> </IconStyle> </Style> <Style id="myGrayStyle"> <IconStyle> <scale>0.8</scale> <Icon> <href>http://labs.google.com/ridefinder/images/mm_20_gray.png</href> </Icon> </IconStyle> </Style> <name>産総研シームレス地質図</name> <GroundOverlay> <name>100万分の1</name> <color>6effffff</color> <visibility>0</visibility> <drawOrder>1</drawOrder> <Icon> <href>http://geodata1.geogrid.org/mapserv/g1000k/g1000kj?service=WMS& request=GetMap&version=1.1.1&format=image/png&style=&layers=area,line& WIDTH=1000&HEIGHT=1000&TRANSPARENT=TRUE</href> <viewRefreshMode>onStop</viewRefreshMode> <viewRefreshTime>2</viewRefreshTime> <viewBoundScale>1</viewBoundScale> </Icon> <LatLonBox> <north>31.942827</north> <south>31.168787</south> <east>131.183401</east> <west>130.275042</west> </LatLonBox> </GroundOverlay> <GroundOverlay> <name>20万分の1</name> <color>6effffff</color> <visibility>0</visibility> <drawOrder>1</drawOrder> <Icon> <href>http://geodata1.geogrid.org/mapserv/g200k/g200k_d_ja?VERSION=1.1.1& REQUEST=GetMap&SRS=EPSG:4326&WIDTH=512&HEIGHT=512&LAYERS=areas,lines,labels& STYLES=default,default,default,default&TRANSPARENT=TRUE&FORMAT=image/png&</href> <viewRefreshMode>onStop</viewRefreshMode> <viewRefreshTime>2</viewRefreshTime> <viewBoundScale>1</viewBoundScale> </Icon> <LatLonBox> <north>31.942827</north> <south>31.168787</south> <east>131.183401</east> <west>130.275042</west> </LatLonBox> </GroundOverlay> </Folder> <Folder> <name>九州応用地質学会</name> <Folder> <name>地質</name> <Placemark> <name>能古島</name> <description><![CDATA[<A HREF=" http://www.nokonoshima.com/" TARGET="_blank"> <IMG SRC="nokonoshima.jpg" BORDER="0"></A>]]></description> <styleUrl>#myRedStyle</styleUrl> <Point> <coordinates>130.3036,33.6208,1000</coordinates> </Point> </Placemark> </Folder> <Folder> <name>地形</name> <Placemark> <name>海の中道</name> <description><![CDATA[<A HREF="http://www.uminaka.go.jp/" TARGET="_blank"> <IMG SRC="nakamichi.pdf" BORDER="0"></A>]]></description> <styleUrl>#myBlueStyle</styleUrl> <Point> <coordinates>130.3536,33.65876,1000</coordinates> </Point> </Placemark> </Folder> </Folder> </Document> </kml>最初に8種類のアイコンの色が定義してある。全部必要がなければ、不要な部分を削除すればよい。次に産総研シームレス地質図の100万分の1と20万分の1が定義してある。
* (九州応用地質学会顧問・鹿児島大学名誉教授)