チュートリアル14

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(→‎チュートリアル6 WebApp Layer geoJSON)
(→‎appendix:クロスオリジンアクセス)
 
(1人の利用者による、間の48版が非表示)
1行: 1行:
−
= チュートリアル14 WebApp Layer geoJSON =
+
= チュートリアル14 WebApp Layer ベクトル地理情報サービスの結合=
−
動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。ここではUSGS Hazards Programが配信している、[https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php 世界の地震発生状況データ](GeoJSON版)を結合してみます。基本的には[[#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON|チュートリアル6]]との違いはありません。
+
動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。ここではUSGS Hazards Programが配信している、[https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php リアルタイム世界の地震発生状況データ(GeoJSON Real-time Feeds)](GeoJSON版)を結合してみます。基本的には[[#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON|チュートリアル6]]との違いはありません。
  
 
* 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/geojson2/geojson2.html こちら]をクリック。
 
* 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/geojson2/geojson2.html こちら]をクリック。
−
* [https://svgmap.org/devinfo/devkddi/tutorials/geojson2/ ソースコードのディレクトリ]
+
* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/geojson2.zip ZIPアーカイブファイル]
 +
 
  
 
== geojson1.html ==
 
== geojson1.html ==
13行: 14行:
 
==geoJsonExample2.svg==
 
==geoJsonExample2.svg==
 
* ドキュメントルート要素(svg要素)の、data-controller属性で、この[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤーを操作するwebApp]]を指定しています。
 
* ドキュメントルート要素(svg要素)の、data-controller属性で、この[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤーを操作するwebApp]]を指定しています。
−
**<code>data-controller="geoJsonExample1.html#exec=appearOnLayerLoad</code>
+
**<code>data-controller="geoJsonExample2.html#exec=appearOnLayerLoad</code>
 
**<code>exec=appearOnLayerLoad</code>は、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。（[[解説書#.E8.A9.B3.E7.B4.B0|詳しくはこちら]]）
 
**<code>exec=appearOnLayerLoad</code>は、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。（[[解説書#.E8.A9.B3.E7.B4.B0|詳しくはこちら]]）
 
*defs要素でマーカー(POIのアイコン)を定義しています
 
*defs要素でマーカー(POIのアイコン)を定義しています
20行: 21行:
 
<pre>
 
<pre>
 
<?xml version="1.0" encoding="UTF-8"?>
 
<?xml version="1.0" encoding="UTF-8"?>
−
<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:go="http://purl.org/svgmap/profile" viewBox="12375.0 -4500.0 2250.0 2250.0" go:dataArea="12375.0 -4500.0 2250.0 2250.0" data-controller="geoJsonExample2.html#exec=appearOnLayerLoad" property="name,address,phone,url">
+
<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="12375.0 -4500.0 2250.0 2250.0" go:dataArea="12375.0 -4500.0 2250.0 2250.0" data-controller="geoJsonExample2.html#exec=appearOnLayerLoad" property="name,address,phone,url">
  
 
<defs>
 
<defs>
33行: 34行:
 
</pre>
 
</pre>
  
−
==geoJsonExample1.html==
+
==geoJsonExample2.html==
−
*geoJsonExample1.svgに紐付けられ、[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|そのDOMをコントロールできるwebApp]]
+
===[https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php USGS Earthquake GeoJSON Real-time Feeds]サービスについて===
−
*このアプリでは簡単なUIを持ち、<code>dataPaths </code>で設定した　いくつかのgeoJsonデータを選択できるようになっています。
+
このサービスは全世界の地震発生状況を更新間隔1分リアルタイム配信しています。出力形式はGeoJson、出力データは時間間隔および地震規模でいくつか選択できるようになっています。リクエストにはクエリパートはなく、更新されたデータが常に同じURLで配信されます。
−
*<code>loadJSON(url)</code> : [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function await] [https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch fetch]を使って[https://ja.wikipedia.org/wiki/GeoJSON GeoJsonデータ]を非同期読み込み
+
 
−
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|SVGMap GISライブラリ(svgMapGIStool)]]の<code>drawGeoJson</code>関数を使用し、geoJsonをSVGMapコンテンツ(のDOM)への変換をしています。
+
===コード===
−
**なお、自力でgeoJsonをSVGMapコンテンツのDOMに変換することももちろん可能ですが、チュートリアル6ではライブラリを使っています。
+
*geoJsonExample2.svgに紐付けられ、[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|そのDOMをコントロールできるwebApp]]
−
*<code>svgMap.refreshScreen()</code> 伸縮スクロール以外のタイミングでDOMの再描画が必要な場合、[[解説書#refreshScreen|再描画を明示]]する必要があります。
+
*[[チュートリアル6#geoJsonExample1.html]]に対して以下が相違点
−
** [[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]
+
*<code>addEventListener("load", function(){..})</code>
 +
** <code>changeData()</code> UIの設定に基づき、地震データをリクエストして可視化する関数
 +
*** <code>getUSGSURL()</code> USGSが配信する地震データを取得するためのGETリクエストを生成
 +
**** クロスオリジンアクセスを行うリクエストを作っています。[https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php USGS Earthquake GeoJSON Real-time Feeds]は<code>access-control-allow-origin: *</code>レスポンスヘッダを持っているためアクセス可能です。
 +
*** <code>loadAndDrawGeoJson()</code> 非同期でjsonデータを取得し描画する関数
 +
****<code>loadJSON()</code> ブラウザ側キャッシュを効かせないように、常に変化する適当なクエリパートをつけています( <code>getTime()</code> [https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/ より適切な方法]がありますが、ここでは古典的なBad Tipsを用いています)
 +
****<code>buildSchema()</code>
 +
*****[[解説書#drawGeoJson|svgMapGIStool.drawGeoJson]]関数で可視化する際に、[[解説書#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|SVGMap.jsが持つメタデータ表示フレームワーク]]に適応させるためのスキーマデータを構築するとともに、SVGMapコンテンツのドキュメントルート要素に設定
 +
*****svgMapGIStool.drawGeoJson関数で渡す末尾の引数(metaSchema)を生成している
 +
****<code>setMagColors()</code>
 +
*****[[解説書#drawGeoJson|svgMapGIStool.drawGeoJson]]関数の持つ、各フィーチャーのproperties値を使ってスタイルを設定可能な機能を使い、マグニチュード値をもとにpointフィーチャの色を指定
 +
****<code>svgMapGIStool.drawGeoJson()</code>
 +
*****<code>buildSchema()</code>で生成したスキーマ(<code>metaSchema</code>)を与え、[[解説書#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|SVGMap.jsのメタデータ表示フレームワーク]]でメタデータがうまく表示できるようにしています
 +
** <code>setInterval(function(){..}..)</code>  指定した間隔で定期的に更新する関数（地震データはリアルタイムに更新されるため）
  
 
<pre>
 
<pre>
51行: 65行:
  
 
<script>
 
<script>
−
var dataPaths = {
+
var usgsEarthquakeService="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/";
−
"A34b-180316.geojson":"世界遺産構成資産範囲ポリゴン（代表点）",
+
var timeSpanKeys=["hour","day","week","month"]; // 配信データの期間設定の選択枝
−
"A34a-180316.geojson":"世界遺産構成資産範囲ポリゴンデータ",
+
var timeSpanDefault=2; // 過去1週間のデータの表示をデフォルトに
−
"A34d-180316.geojson":"世界遺産構成資産範囲ライン（代表点）",
+
var levelKeys=["significant","4.5","2.5","1.0","all"]; // マグニチュード別の配信データの選択枝
−
"A34c-180316.geojson":"世界遺産構成資産範囲ラインデータ",
+
var levelDefault=2; // M2.5以上の地震の表示をデフォルトに
−
"A34e-180316.geojson":"世界遺産構成資産",
+
var intervalMinutes=10; // 10分おきに更新する
−
"A34f-180316.geojson":"世界遺産緩衝地帯ポリゴンデータ",
+
var metaSchema; // SVGMap.jsの標準で用意されているジオメトリ選択時のメタデータ表示UIの正規化されたスキーマを格納する
−
"A34g-180316.geojson":"世界遺産緩衝地帯ポリゴン（代表点）",
+
−
"C28-20_Airport.geojson":"空港データ空港",
+
−
"C28-20_AirportReferencePoint.geojson":"空港データ標点",
+
−
"C28-20_SurveyContent.geojson":"空港データ調査内容",
+
−
"C28-20_TerminalBuilding.geojson":"空港データターミナルビル",
+
−
"N02-20_RailroadSection.geojson":"鉄道データ鉄道",
+
−
"N02-20_Station.geojson":"鉄道データ駅"
+
−
};
+
  
 
addEventListener("load", function(){
 
addEventListener("load", function(){
 
buildDataSelect();
 
buildDataSelect();
 
changeData();
 
changeData();
 +
setInterval(function(){
 +
changeData();
 +
messageDiv.innerText=new Date().toLocaleString() + " update";
 +
} ,intervalMinutes * 60 * 1000);
 
});
 
});
  
 
function changeData(){
 
function changeData(){
−
var path = dataSelect.options[dataSelect.selectedIndex].value;
+
var param1 = dataSelect1.selectedIndex;
 +
var param2 = dataSelect2.selectedIndex;
 +
var path = getUSGSURL(param1,param2);
 
loadAndDrawGeoJson(path);
 
loadAndDrawGeoJson(path);
 
}
 
}
79行: 91行:
 
async function loadAndDrawGeoJson(dataPath){
 
async function loadAndDrawGeoJson(dataPath){
 
var gjs = await loadJSON(dataPath);
 
var gjs = await loadJSON(dataPath);
 +
buildSchema(gjs.features);
 +
setMagColors(gjs.features);
 +
console.log("geoJson:",gjs);
 
var parentElm = svgImage.getElementById("mapContents");
 
var parentElm = svgImage.getElementById("mapContents");
 
removeChildren(parentElm);
 
removeChildren(parentElm);
−
svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm);
+
svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm, metaSchema);
 
svgMap.refreshScreen();
 
svgMap.refreshScreen();
 
}
 
}
87行: 102行:
 
function buildDataSelect(){
 
function buildDataSelect(){
 
var first=true;
 
var first=true;
−
for ( var dataPath in dataPaths){
+
for ( var i = 0 ; i < timeSpanKeys.length; i++){
−
dataSelect.insertAdjacentHTML('beforeend', '<option value="' + dataPath +'" >'+dataPaths[dataPath]+'</option>');
+
var timeSpanKey = timeSpanKeys[i];
 +
var selectedOpt="";
 +
if ( timeSpanDefault == i){
 +
selectedOpt="selected";
 +
}
 +
dataSelect1.insertAdjacentHTML('beforeend', `<option value="${timeSpanKey}" ${selectedOpt}>${timeSpanKey}</option>`);
 +
}
 +
for ( var i = 0 ; i < levelKeys.length ; i++){
 +
var levelKey = levelKeys[i];
 +
var selectedOpt="";
 +
if ( levelDefault == i){
 +
selectedOpt="selected";
 +
}
 +
dataSelect2.insertAdjacentHTML('beforeend',  `<option value="${levelKey}" ${selectedOpt}>${levelKey}</option>`);
 
}
 
}
 
}
 
}
  
 
async function loadJSON(url){
 
async function loadJSON(url){
−
var dt = getDateStr(new Date(),10);
+
var response = await fetch(url+"?time="+new Date().getTime()); // 常に最新のデータを得るには何かダミーのクエリパートを付けるBad Tips..
−
var response = await fetch(url+"?time="+dt); // 常に最新のデータを得るには何かダミーのクエリパートを付けるBad Tips..
+
 
// https://stackoverflow.com/questions/37204296/cache-invalidation-using-the-query-string-bad-practice
 
// https://stackoverflow.com/questions/37204296/cache-invalidation-using-the-query-string-bad-practice
 
// https://stackoverflow.com/questions/9692665/cache-busting-via-params
 
// https://stackoverflow.com/questions/9692665/cache-busting-via-params
101行: 128行:
 
}
 
}
  
−
function getDateStr(dateData , tStep){
+
function removeChildren(element){
−
var mind = tStep * Math.floor( dateData.getUTCMinutes() / tStep ) ;
+
while (element.firstChild) element.removeChild(element.firstChild);
−
var ans = dateData.getUTCFullYear()+ pad(dateData.getUTCMonth() + 1) + pad(dateData.getUTCDate()) + pad(dateData.getUTCHours()) + pad(mind);
+
−
return ( ans );
+
 
}
 
}
−
function pad( inp ){
+
 
−
return ( ("0"+inp).slice(-2));
+
function getUSGSURL(timeSpan, level){
 +
if (!timeSpanKeys[timeSpan]){return};
 +
if (!levelKeys[level]){return};
 +
var ans = `${usgsEarthquakeService}${levelKeys[level]}_${timeSpanKeys[timeSpan]}.geojson`;
 +
console.log("getUSGSURL:",ans);
 +
return (ans);
 
}
 
}
  
−
function removeChildren(element){
+
function buildSchema(features){ // geojsonのfeatureのproprerty名から正規化されたスキーマを生成
−
while (element.firstChild) element.removeChild(element.firstChild);
+
metaSchema={};
 +
for ( var feature of features){ // 一応全データをトレース
 +
for ( var propName in feature.properties){
 +
if (!metaSchema[propName]){
 +
metaSchema[propName]=true;
 +
}
 +
}
 +
}
 +
metaSchema=Object.keys(metaSchema);
 +
svgImage.documentElement.setAttribute("property",metaSchema.join());
 +
}
 +
 
 +
function setMagColors(features){ // [[解説書#drawGeoJson]]のスタイリング仕様を使い、マグニチュードに応じた色を付ける
 +
features.sort(function(a,b){ //マグニチュード昇順でソート
 +
return(a.properties.mag - b.properties.mag);
 +
});
 +
 +
for ( var feature of features){
 +
var cmag = feature.properties.mag;
 +
// マグニチュード3...7でクリッピング
 +
cmag = Math.max(3,cmag);
 +
cmag = Math.min(7,cmag);
 +
// 色相(hue)に変換し、そこからRGBカラーを生成
 +
var hue = (7-cmag)/(4)*240;
 +
var rgb = svgMapGIStool.hsv2rgb(hue,100,100);
 +
console.log(rgb);
 +
if ( rgb){
 +
feature.properties["marker-color"]=`#${rgb.r.toString(16).padStart(2, '0')}${rgb.g.toString(16).padStart(2, '0')}${rgb.b.toString(16).padStart(2, '0')}`;
 +
}
 +
}
 +
console.log(features);
 
}
 
}
  
117行: 177行:
 
<body>
 
<body>
 
<h3>area layer</h3>
 
<h3>area layer</h3>
−
<p>geoJsonの可視化</p>
+
<p><a href="https://earthquake.usgs.gov/earthquakes/feed/">USGS Earthquake Hazards Program Feed</a>の可視化</p>
−
<select id="dataSelect" onchange="changeData()"></select>
+
期間<select id="dataSelect1" onchange="changeData()"></select><br>
 +
規模<select id="dataSelect2" onchange="changeData()"></select>
 +
<div id="messageDiv"></div>
 
</body>
 
</body>
 
</html>
 
</html>
 
</pre>
 
</pre>
 +
 +
==appendix:クロスオリジンアクセス==
 +
[[クロスオリジンアクセス]] については([[クロスオリジンアクセス|独立したページ]]に移行しました)

2023年8月30日 (水) 03:08時点における最新版

目次

[編集] チュートリアル14 WebApp Layer ベクトル地理情報サービスの結合

動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。ここではUSGS Hazards Programが配信している、リアルタイム世界の地震発生状況データ(GeoJSON Real-time Feeds)(GeoJSON版)を結合してみます。基本的にはチュートリアル6との違いはありません。


[編集] geojson1.html

[編集] Container.svg

[編集] geoJsonExample2.svg

  • ドキュメントルート要素(svg要素)の、data-controller属性で、このレイヤーを操作するwebAppを指定しています。
    • data-controller="geoJsonExample2.html#exec=appearOnLayerLoad
    • exec=appearOnLayerLoadは、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。（詳しくはこちら）
  • defs要素でマーカー(POIのアイコン)を定義しています
    • マーカーの色はマグニチュードに応じて変化させるためここでは未定義にしてあります 
<?xml version="1.0" encoding="UTF-8"?>
<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="12375.0 -4500.0 2250.0 2250.0" go:dataArea="12375.0 -4500.0 2250.0 2250.0" data-controller="geoJsonExample2.html#exec=appearOnLayerLoad" property="name,address,phone,url">

<defs>
<g id="p0">
<circle cx="0" cy="0" r="10" stroke="none"/>
</g>
</defs>

<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(100.0,0.0,0.0,-100.0,0.0,0.0)" />
<g id="mapContents"></g>
</svg>

[編集] geoJsonExample2.html

[編集] USGS Earthquake GeoJSON Real-time Feedsサービスについて

このサービスは全世界の地震発生状況を更新間隔1分リアルタイム配信しています。出力形式はGeoJson、出力データは時間間隔および地震規模でいくつか選択できるようになっています。リクエストにはクエリパートはなく、更新されたデータが常に同じURLで配信されます。

[編集] コード

  • geoJsonExample2.svgに紐付けられ、そのDOMをコントロールできるwebApp
  • チュートリアル6#geoJsonExample1.htmlに対して以下が相違点
  • addEventListener("load", function(){..})
    • changeData() UIの設定に基づき、地震データをリクエストして可視化する関数
      • getUSGSURL() USGSが配信する地震データを取得するためのGETリクエストを生成
        • クロスオリジンアクセスを行うリクエストを作っています。USGS Earthquake GeoJSON Real-time Feedsはaccess-control-allow-origin: *レスポンスヘッダを持っているためアクセス可能です。
      • loadAndDrawGeoJson() 非同期でjsonデータを取得し描画する関数
        • loadJSON() ブラウザ側キャッシュを効かせないように、常に変化する適当なクエリパートをつけています( getTime() より適切な方法がありますが、ここでは古典的なBad Tipsを用いています)
        • buildSchema()
        • setMagColors()
          • svgMapGIStool.drawGeoJson関数の持つ、各フィーチャーのproperties値を使ってスタイルを設定可能な機能を使い、マグニチュード値をもとにpointフィーチャの色を指定
        • svgMapGIStool.drawGeoJson()
    • setInterval(function(){..}..) 指定した間隔で定期的に更新する関数（地震データはリアルタイムに更新されるため） 
<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>SVGMapのwebAppレイヤーで、geoJsonを描画するサンプル</title>
</head>

<script>
var usgsEarthquakeService="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/";
var timeSpanKeys=["hour","day","week","month"]; // 配信データの期間設定の選択枝
var timeSpanDefault=2; // 過去1週間のデータの表示をデフォルトに
var levelKeys=["significant","4.5","2.5","1.0","all"]; // マグニチュード別の配信データの選択枝
var levelDefault=2; // M2.5以上の地震の表示をデフォルトに
var intervalMinutes=10; // 10分おきに更新する
var metaSchema; // SVGMap.jsの標準で用意されているジオメトリ選択時のメタデータ表示UIの正規化されたスキーマを格納する

addEventListener("load", function(){
	buildDataSelect();
	changeData();
	setInterval(function(){
		changeData();
		messageDiv.innerText=new Date().toLocaleString() + " update";
	} ,intervalMinutes * 60 * 1000);
});

function changeData(){
	var param1 = dataSelect1.selectedIndex;
	var param2 = dataSelect2.selectedIndex;
	var path = getUSGSURL(param1,param2);
	loadAndDrawGeoJson(path);
}

async function loadAndDrawGeoJson(dataPath){
	var gjs = await loadJSON(dataPath);
	buildSchema(gjs.features);
	setMagColors(gjs.features);
	console.log("geoJson:",gjs);
	var parentElm = svgImage.getElementById("mapContents");
	removeChildren(parentElm);
	svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm, metaSchema);
	svgMap.refreshScreen();
}

function buildDataSelect(){
	var first=true;
	for ( var i = 0 ; i < timeSpanKeys.length; i++){
		var timeSpanKey = timeSpanKeys[i];
		var selectedOpt="";
		if ( timeSpanDefault == i){
			selectedOpt="selected";
		}
		dataSelect1.insertAdjacentHTML('beforeend', `<option value="${timeSpanKey}" ${selectedOpt}>${timeSpanKey}</option>`);
	}
	for ( var i = 0 ; i < levelKeys.length ; i++){
		var levelKey = levelKeys[i];
		var selectedOpt="";
		if ( levelDefault == i){
			selectedOpt="selected";
		}
		dataSelect2.insertAdjacentHTML('beforeend',  `<option value="${levelKey}" ${selectedOpt}>${levelKey}</option>`);
	}
}

async function loadJSON(url){
	var response = await fetch(url+"?time="+new Date().getTime()); // 常に最新のデータを得るには何かダミーのクエリパートを付けるBad Tips..
	// https://stackoverflow.com/questions/37204296/cache-invalidation-using-the-query-string-bad-practice
	// https://stackoverflow.com/questions/9692665/cache-busting-via-params
	var json = await response.json();
	return ( json );
}

function removeChildren(element){
	while (element.firstChild) element.removeChild(element.firstChild);
}

function getUSGSURL(timeSpan, level){
	if (!timeSpanKeys[timeSpan]){return};
	if (!levelKeys[level]){return};
	var ans = `${usgsEarthquakeService}${levelKeys[level]}_${timeSpanKeys[timeSpan]}.geojson`;
	console.log("getUSGSURL:",ans);
	return (ans);
}

function buildSchema(features){ // geojsonのfeatureのproprerty名から正規化されたスキーマを生成
	metaSchema={};
	for ( var feature of features){ // 一応全データをトレース
		for ( var propName in feature.properties){
			if (!metaSchema[propName]){
				metaSchema[propName]=true;
			}
		}
	}
	metaSchema=Object.keys(metaSchema);
	svgImage.documentElement.setAttribute("property",metaSchema.join());
}

function setMagColors(features){ // [[解説書#drawGeoJson]]のスタイリング仕様を使い、マグニチュードに応じた色を付ける
	features.sort(function(a,b){ //マグニチュード昇順でソート
		return(a.properties.mag - b.properties.mag);
	});
	
	for ( var feature of features){
		var cmag = feature.properties.mag;
		// マグニチュード3...7でクリッピング
		cmag = Math.max(3,cmag);
		cmag = Math.min(7,cmag);
		// 色相(hue)に変換し、そこからRGBカラーを生成
		var hue = (7-cmag)/(4)*240;
		var rgb = svgMapGIStool.hsv2rgb(hue,100,100);
		console.log(rgb);
		if ( rgb){
			feature.properties["marker-color"]=`#${rgb.r.toString(16).padStart(2, '0')}${rgb.g.toString(16).padStart(2, '0')}${rgb.b.toString(16).padStart(2, '0')}`;
		}
	}
	console.log(features);
}

</script>
<body>
<h3>area layer</h3>
<p><a href="https://earthquake.usgs.gov/earthquakes/feed/">USGS Earthquake Hazards Program Feed</a>の可視化</p>
期間<select id="dataSelect1" onchange="changeData()"></select><br>
規模<select id="dataSelect2" onchange="changeData()"></select>
<div id="messageDiv"></div>
</body>
</html>

[編集] appendix:クロスオリジンアクセス

クロスオリジンアクセス については(独立したページに移行しました)

「https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB14&oldid=1814」から取得
個人用ツール
名前空間

変種
操作
案内
ツール
Translate