2-1 (1)Webページとファイル |
|
2-2-1 (2)スタイルシート(タグ内) |
|
2-2-2 (2)スタイルシート(ヘッド要素の中) |
|
2-3-1 (3)JavaScript(関数1) |
|
2-3-2 (3)JavaScript(関数2) |
|
2-3-3 (3)JavaScript(関数3) |
(インターネット上) | jaera | hidapio |
(コンピュータ内) | 同一フォルダ | imgフォルダ |
実習3-1 地図の表示 |
||
実習3-2 地図の初期値を変える |
||
実習3-3 センターマークの表示 |
</script>の上に挿入 |
|
実習3-4 センターマークの表示/非表示 |
<script>の上に挿入 |
</script>の上に挿入 |
研究1 JavaScriptのif文 |
||
実習3-5 緯度・経度・倍率の表示 |
</p>の上に挿入 |
</script>の上に挿入 |
実習3-6 緯度・経度・倍率の表示選択 |
<br>の上に挿入 |
idText.textContent=… と入れ替える |
実習3-7 マウスの位置の値をクリップボードに保存 |
</script>の上に挿入 |
|
実習3-7_2 (省略可) 地図の中心の値をクリップボードに保存 |
<br>の上に挿入 |
</script>の上に挿入 |
実習3-8 地図の初期値を変える |
||
実習3のまとめ |
実習4-1 いろいろな種類の地図を表示 |
<p>の上に挿入 |
</script>の上に挿入 |
実習4-2 最初の地図の種類を変える |
研究2 年代別の写真 |
</select>の上に挿入 |
function funcSyurui()の中の funcHyouji()の上に挿入 |
実習5-1 地域の表示用のボタン |
</div>の上に挿入 |
</script>の上に挿入 |
実習5-2 ズームコントロールの非表示 |
let myMap=…と入れ替え |
|
実習5-2_2 ズームコントロールの右上表示 |
</script>の上に挿入 |
|
実習5-3 スケールバーの表示 |
</script>の上に挿入 |
|
研究3 スケールバーの変更 |
//スケールバーの表示 ~ .addTo(myMap);と入れ替え |
|
実習5-4 マーカーの表示 |
</script>の上に挿入 |
|
実習5-4_2 自作マーカーの表示 |
</script>の上に挿入 |
|
研究4 マーカーとポップアップ |
</script>の上に挿入 |
|
実習5-5 多角形の表示 |
</script>の上に挿入 |
|
実習5-5_2 円の表示 |
</script>の上に挿入 |
|
実習5-5_3 円(中塗り)の表示 |
</script>の上に挿入 |
|
研究5 同心円を描く |
</script>の上に挿入 |
|
実習5-6 オーバーレイヤーの表示/非表示 |
</script>の上に挿入 |
|
研究6 ベースレイヤーの選択 |
</script>の上に挿入 |
|
研究7 オープンストリートの地図 |
国土地理院の地図表示関数 と入れ替え |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>(タイトル)</title>
</head>
<body>
(表示内容)
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>(タイトル)</title>
</head>
<body>
<div align="center")>
<p style="color:#FF0000;font-weight:bold;">ようこそ</p>
<p style="color:blue;">私のWebページへ</p>
</div>
<p style="font-size:1.5em;"> こんにちは</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>(タイトル)</title>
<style type="text/css">
#idD {text-align:center;}
#idP1 {color:#FF0000;font-weight:bold;}
#idP2 {color:blue;}
#idP3 {font-size:1.5em;}
</style>
</head>
<body>
<div id="idD">
<p id="idP1">ようこそ </p>
<p id="idP2">私のWEBページへ</p>
</div>
<p id="idP3">こんにちは</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>(タイトル)</title>
</head>
<body>
<input type="submit" value="送信" onclick=funcN()>
<script>
function funcN(){
let res=prompt("お名前は?");
alert(res+"さん。");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>(タイトル)</title>
</head>
<body>
<input type="submit" value="送信" onclick=funcN()>
<script>
function funcN(){
let res=prompt("お名前は?");
document.write(res+"さん");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>(タイトル)</title>
</head>
<body>
お名前は
<input type="text" id="idT">
<input type="submit" value="送信" onclick=funcN()>
<p id="idM" style="color:#FF0000";></p>
<script>
function funcN(){
idM.innerText=idT.value+'さん';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>地図タイル</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</head>
<body>
<!--地図の大きさ-->
<div id="idMap" style="height:400px; width:400px;"></div>
<script type="text/javascript">
//地図初期値 緯度、経度、倍率、種別、画像データの拡張子
let x=35,y=135,z=4,typeMap="std",typeGazou="png";
let myMap=L.map('idMap');
myMap.setView([x, y], z);
funcHyouji();
//国土地理院の地図
function funcHyouji(){
L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/' //地図データ
+typeMap //地図の種別
+'/{z}/{x}/{y}.' //倍率、緯度、経度
+typeGazou, //画像データの拡張子
//国土地理院の著作権表示
{attribution:"<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}
).addTo(myMap);
}
</script>
</body>
</html>
//センターマークを表示する関数
const myCenterMarker=L.marker(myMap.getCenter(),{icon:centerIcon,zIndexOffset:1000,interactive:false}).addTo(myMap);
myMap.on('move',function(e){myCenterMarker.setLatLng(myMap.getCenter());});
<p>
<!--センターマーク表示/非表示のチェックボックス-->
中心表示<input type="checkbox" name="check" onclick=funcC(checked)>
</p>
//センターマークの表示/非表示の関数
function funcC(s){
if(s==true){
myMap.addLayer(myCenterMarker);
}else{
myMap.removeLayer(myCenterMarker);
}
}
<br>
<!--テキストエリアの表示-->
<textarea id="idText" cols=50 rows=1 disabled></textarea>
//緯度、経度、倍率の表示関数
myMap.on('mousemove', function(e){
let lat=e.latlng.lat;
let lng=e.latlng.lng;
let gzm=myMap.getZoom();
idText.textContent="x="+lat+",y="+lng+",z="+gzm;
})
<!--座標値選択のラジオボタン-->
X=,Y=,Z=<input type="radio" name="座標値" id="idXYZ" checked>
X,Y<input type="radio" name="座標値" id="idXY">
if(idXYZ.checked==true){
idText.textContent="x="+lat+",y="+lng+",z="+gzm;
}else{
idText.textContent=lat+","+lng;
}
//マウスの位置の値をコピーする関数
myMap.on('click',function(e){idText.disabled=false;idText.select();document.execCommand('copy');idText.disabled=true;alert("マウスの位置の緯度、経度をクリップボードにコピーしました!");});
<!--中心値のボタン-->
<input type="button" value="中心値" onclick=funcCenter()>
//地図の中心の値をコピーする関数
function funcCenter(){
let lat=myMap.getCenter().lat;
let lng=myMap.getCenter().lng;
let gzm=myMap.getZoom();
if(idXYZ.checked==true){
idText.textContent="x="+lat+",y="+lng+",z="+gzm;
}else{
idText.textContent=lat+","+lng;
}
idText.disabled=false;
idText.select();
document.execCommand('copy');
idText.disabled=true;
alert("地図中心の緯度、経度をクリップボードにコピーしました!");
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>地図タイル</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</head>
<body>
<!--地図の大きさ-->
<div id="idMap" style="height:400px; width:400px;"></div>
<p>
<!--センターマーク表示/非表示のチェックボックス-->
中心表示<input type="checkbox" name="check" onclick=funcC(checked)>
<!--座標値選択のラジオボタン-->
X=,Y=,Z=<input type="radio" name="座標値" id="idXYZ" checked>
X,Y<input type="radio" name="座標値" id="idXY">
<!--中心値のボタン-->
<input type="button" value="中心値" onclick=funcCenter()>
<br>
<!--テキストエリアの表示-->
<textarea id="idText" cols=50 rows=1 disabled></textarea>
</p>
<script type="text/javascript">
//地図初期値 緯度、経度、倍率、種別、画像データの拡張子
let x=35,y=135,z=4,typeMap="std",typeGazou="png";
let myMap=L.map('idMap');
myMap.setView([x, y], z);
funcHyouji();
//国土地理院の地図
function funcHyouji(){
L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/' //地図データ
+typeMap //地図の種別
+'/{z}/{x}/{y}.' //倍率、緯度、経度
+typeGazou, //画像データの拡張子
//国土地理院の著作権表示
{attribution:"<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}
).addTo(myMap);
}
//センターマークを表示する関数
const myCenterMarker=L.marker(myMap.getCenter(),{icon:centerIcon,zIndexOffset:1000,interactive:false});
myMap.on('move',function(e){myCenterMarker.setLatLng(myMap.getCenter());});
//センターマークの表示/非表示の関数
function funcC(s){
if(s==true){
myMap.addLayer(myCenterMarker);
}else{
myMap.removeLayer(myCenterMarker);
}
}
//緯度、経度、倍率の表示関数
myMap.on('mousemove', function(e){
let lat=e.latlng.lat;
let lng=e.latlng.lng;
let gzm=myMap.getZoom();
if(idXYZ.checked==true){
idText.textContent="x="+lat+",y="+lng+",z="+gzm;
}else{
idText.textContent=lat+","+lng;
}
})
myMap.on('click',function(e){idText.disabled=false;idText.select();document.execCommand('copy');idText.disabled=true;alert("マウスの位置の緯度、経度をクリップボードにコピーしました!");});
//地図の中心の値をコピーする関数
function funcCenter(){
let lat=myMap.getCenter().lat;
let lng=myMap.getCenter().lng;
let gzm=myMap.getZoom();
if(idXYZ.checked==true){
idText.textContent="x="+lat+",y="+lng+",z="+gzm;
}else{
idText.textContent=lat+","+lng;
}
idText.disabled=false;
idText.select();
document.execCommand('copy');
idText.disabled=true;
alert("地図中心の緯度、経度をクリップボードにコピーしました!");
}
</script>
</body>
</html>
<!--地図の種類-->
<div>
<select id="idSyurui" onclick=funcSyurui(value)>
<option>標準</option> //ズームレベル5~18
<option>淡色</option> //ズームレベル5~18
<option>写真</option> //ズームレベル14~18
<option>白地図</option> //ズームレベル5~14
<option>英語</option> //ズームレベル5~11
<option>色別標高図</option> //ズームレベル5~15
<option>陰影起伏図</option> //ズームレベル2~16
<option>1974年~1978年</option> //ズームレベル10~17
</select>
</div>
//地図の種類の関数
function funcSyurui(){
const str=document.getElementById("idSyurui").value;
if(str=="標準"){typeMap="std";typeGazou="png";}
if(str=="淡色"){typeMap="pale";typeGazou="png";}
if(str=="写真"){typeMap="seamlessphoto";typeGazou="jpg";}
if(str=="白地図"){typeMap="blank";typeGazou="png";}
if(str=="英語"){typeMap="english";typeGazou="png";}
if(str=="色別標高図"){typeMap="relief";typeGazou="png";}
if(str=="陰影起伏図"){typeMap="hillshademap";typeGazou="png";}
if(str=="1974年~1978年"){typeMap="gazo1";typeGazou="jpg";}
funcHyouji();
}
<option>1974年~1978年</option> //ズームレベル10~17
<option>1979年~1983年</option> //ズームレベル10~17
<option>1984年~1986年</option> //ズームレベル10~17
<option>空中写真1961年~1969年</option> //ズームレベル10~17
<option>空中写真1945年~1950年</option> //ズームレベル10~17
<option>空中写真1936年~1942年頃</option> //ズームレベル13~18 東京、大阪
<option>空中写真1928年頃</option> //ズームレベル13~18 大阪
if(str=="1974年~1978年"){typeMap="gazo1";typeGazou="jpg";}
if(str=="1979年~1983年"){typeMap="gazo2";typeGazou="jpg";}
if(str=="1984年~1986年"){typeMap="gazo3";typeGazou="jpg";}
if(str=="空中写真1961年~1969年"){typeMap="ort_old10";typeGazou="png";}
if(str=="空中写真1945年~1950年"){typeMap="ort_USA10";typeGazou="png";}
if(str=="空中写真1936年~1942年頃"){typeMap="ort_riku10";typeGazou="png";}
if(str=="空中写真1928年頃"){typeMap="ort_1928";typeGazou="png";}
<!--地域ボタン-->
<input type="button" value="兵庫県" onclick=funcBasyo(1)>
<input type="button" value="神戸市" onclick=funcBasyo(2)>
//地域ボタンで地図を変える関数
function funcBasyo(b){
if (b==1){x=35;y=134.8;z=8;typeMap="blank";typeGazou="png";}
if (b==2){x=34.734,y=135.1316,z=10;typeMap="english";typeGazou="png";}
myMap.setView([x, y], z);
funcHyouji();
}
//ズームコントロールの表示
let myMap=L.map('idMap',{zoomControl:false});
//ズームコントロールを右上で追加
L.control.zoom({position:'topright'}).addTo(myMap);
//スケールバーの表示(メートル、マイル/フィート)
L.control.scale().addTo(myMap);
//スケールバーの表示
L.control.scale({
imperial:false, //メートルのみ
maxWidth:200, //幅2倍
position:'topleft' //左上
}).addTo(myMap);
//マーカーの表示
L.marker([26.2125,127.6809], {title:"沖縄県庁"}).addTo(myMap);
//自作したマーカーの表示
L.marker([35.6891,139.6919],{title:"東京都庁",icon:myIconR}).addTo(myMap);
//マーカーとポップアップの表示
L.marker([34.6899,135.1834],{title:"兵庫県庁"}).addTo(myMap).bindPopup(myPopup);
//直線、多角形の表示
L.polyline([[38,139],[33,139],[34,132],[38,139],],{color:'blue',weight:5}).addTo(myMap);
//円(中塗りなし)
L.circle([35,135],{radius:500000,color:"red",weight:3,fill:false}).addTo(myMap);
//円(中塗り)
L.circle([35,139],{radius:100000,weight:5,color:"blue",opacity:0.5,fillColor:"red",fillopacity:0.5}).addTo(myMap);
//同心円(4つの円)
for (let i=1;i<5;i++){
L.circle([35,135],{radius:i*100000}).addTo(myMap);
}
//多角形
const myLine=L.polyline([[42,143],[30,142],[32,130],[38,132],[42,143],],{color:'blue',weight:4,});
const myLine2=L.polyline([[42,135],[28,144],[30,128],[39,130],[42,135],],{color:'green',weight:4,});
//マーカー
const myIconS=L.icon({iconUrl:'http://www.hidapio.jp/tizu/myIconS.png',iconSize:[24,30],iconAnchor:[20,30]});
const myIconY=L.icon({iconUrl:'http://www.hidapio.jp/tizu/myIconY.png',iconSize:[30,24],iconAnchor:[15,20]});
const mySendai=L.marker([38.2531,140.8559],{title:"仙台城",icon:myIconS}).addTo(myMap);
const myMatuyama=L.marker([33.8435,132.7660],{title:"松山城",icon:myIconS}).addTo(myMap);
const myDaisetsu=L.marker([43.6632,142.8548],{title:"大雪山",icon:myIconY});
const myAso=L.marker([32.8657,131.0669],{title:"阿蘇山",icon:myIconY});
//レイヤーグループに設定
const mySikaku = L.layerGroup([myLine,myLine2]);
const mySiro = L.layerGroup([mySendai,myMatuyama]).addTo(myMap);
const myYama = L.layerGroup([myDaisetsu,myAso]);
//オーバーレイヤーに設定
const myOverLayer={"四角":mySikaku,"城":mySiro,"山":myYama,};
//コントロールボックスを表示
const myControl=L.control.layers(null,myOverLayer).addTo(myMap);
//地図
const myMapStd=L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {attribution:"<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}).addTo(myMap);
const myMapPale=L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {attribution:"<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"});
const myMapEng=L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/english/{z}/{x}/{y}.png', {attribution:"<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"});
//ベースレイヤーに設定
const myBaseLayer={"標準":myMapStd,"淡色":myMapPale,"英語":myMapEng,};
//コントロールボックスの表示
const myControl2=L.control.layers(myBaseLayer,null).addTo(myMap);
//OpenStreetMapの地図表示関数
function funcHyouji(){
L.tileLayer(
'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
{attribution:'Map data ©<a href="http://openstreetmap.org">OpenStreetMap</a>contributors, '}
).addTo(myMap);
}