Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
152 lines (143 sloc) 9.27 KB
<!DOCTYPE html>
<html>
<head>
<title>空から標本を見てみよう!</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
</head>
<body>
<p><a href="https://jpsearch.go.jp/api/webapi/">ジャパンサーチ簡易API</a>利活用例</p>
<p><span class="label label-default">調べたい標本のキーワードを入れてください(例:ミカン、イチゴ、コオロギ etc...)</span></p>
<input id="title" value="ミカン"/>
<button class="btn btn-default" onclick="demo()">検索</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">
<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<script src="https://leaflet.github.io/Leaflet.markercluster/example/realworld.388.js"></script>
<div id="mapid" style="width: 100%; height: 800px;"></div>
<script>
var pale = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
{id: 'palemap', attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"}),
seamless = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg',
{id: 'seamlessmap', attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"}),
gazo5 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg',
{id: 'gazo5map', attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"}),
gazo4 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/gazo4/{z}/{x}/{y}.jpg',
{id: 'gazo4map', attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"}),
gazo3 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/gazo3/{z}/{x}/{y}.jpg',
{id: 'gazo3map', attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"}),
gazo2 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/gazo2/{z}/{x}/{y}.jpg',
{id: 'gazo2map', attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"}),
gazo1 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg',
{id: 'gazo1map', attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"});
old2 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort_USA10/{z}/{x}/{y}.png',
{id: 'ort_USA10map', attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>"});
var baseMaps = {
"航空写真(全国最新写真)" : seamless,
"淡色地図" : pale
}
var overMaps = {
"電子国土基本図(2007年以降撮影)" : gazo5,
"国土画像情報(1988~1990年撮影)" : gazo4,
"国土画像情報(1984~1986年撮影)" : gazo3,
"国土画像情報(1979~1983年撮影)" : gazo2,
"国土画像情報(1974~1978年撮影)" : gazo1,
"国土画像情報(1945~1950年撮影)" : old2,
}
var overarray=[2010,1989,1985,1981,1976,1947];
var overmaparray=[gazo5,gazo4,gazo3,gazo2,gazo1,old2];
var mymap = L.map('mapid',{
layers: [seamless]
}).setView([36.69,139.69], 5);//表示される地図の位置を決める
L.control.layers(baseMaps,overMaps, {position: 'topleft', collapsed: false}).addTo(mymap);
function calcmap(year){//クリックされた標本の採集された年(year)に撮影時期の近いマップを上書きする。
var len = overarray.length;
var indices = new Array(len);
var sortarray=[];
for (var i = 0; i < len; ++i){
indices[i] = i;
sortarray.push(Math.abs(overarray[i]-year));
if(mymap.hasLayer(overmaparray[i])) {
mymap.removeLayer(overmaparray[i]);
}
}
indices.sort(function (a, b) { return sortarray[a] < sortarray[b] ? -1 : sortarray[a] > sortarray[b] ? 1 : 0; });
console.log(indices);
mymap.addLayer(overmaparray[indices[0]]);
}
var markers = L.markerClusterGroup();
function maptest(title){//ユーザが検索フォームに入力した内容を
markers.clearLayers();
mymap.setView([36.69,139.69], 5);//検索時に地図の表示位置を初期化する。
$.ajax({
url:"https://jpsearch.go.jp/api/item/search/s_net-default",
type:'GET',
data:{
keyword : title,
format : "json",
size: "500"
}
}).then(function(data){
var result = data.list;
var items = new Array();
var mlat = 0;//leafletの地図表示範囲を決めるために検索結果の緯度の和をとってる
var mlong = 0;//leafletの地図表示範囲を決めるために検索結果の経度の和をとってる
var set = new Array();
for (var i = 0; i < result.length; i++) {
var obj = result[i];
var s = "https://jpsearch.go.jp/item/"+obj.id;
var title = obj.common.title; //検索結果のタイトルを表示する
if(!obj["s_net-43-s"]||!obj.common.coordinates||!obj["s_net-43-s"].match(/[0-9]+/))continue;
var yearstr=obj["s_net-43-s"].match(/[0-9]+/)[0];
var year=parseInt(yearstr.substr(0, 4),10);//記録年月日を取得する
var url = s;
var marker = L.marker(new L.LatLng(obj.common.coordinates.lat, obj.common.coordinates.lon), { title: title });
var desc="記録年月日 :"+obj["s_net-43-s"];
mlat += Number(obj.common.coordinates.lat);
mlong += Number(obj.common.coordinates.lon);
//標本のマーカーをクリックしたとき表示されるコンテンツを作る
var contents = '<div>';
contents += '<h5 class="mt-0">'+title+'</h5>';
contents += '<h6 class="mt-0">'+desc+'</h6>';
contents += "<p><a class='btn btn-primary' href='"+url+"' target='_blank'>ジャパンサーチで標本を見る</a></br>";
contents += "<a class='btn btn-secondary' href='https://ja.wikipedia.org/wiki/"+title+"' target='_blank'>ウィキペディアで調べる</a></br>";
contents += "<input type='button' class='btn btn-primary' value='記録日時に近い航空写真を見る' onclick='calcmap("+year+");'/></p>";
contents += '</div>';
//作ったコンテンツを地図に登録する。
marker.bindPopup(contents).on('click', clickZoom);
markers.addLayer(marker);
}
mymap.addLayer(markers);
var popup = L.popup();
function onMapClick(e) {
popup
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
function clickZoom(e) {//クリックした際のズーム倍率を決める
mymap.setView(e.target.getLatLng(),14);
}
mymap.on('click', onMapClick);
mymap.panTo(new L.LatLng(mlat / result.length, mlong / result.length));//表示位置を決める
})
}
function demo(){
maptest( document.getElementById("title").value);//ユーザが検索フォームに入力した内容を取得してmaptest関数に渡す。
}
</script>
</body>
</html>
You can’t perform that action at this time.