火山ハザードマップデータベースは
火山ハザードマップデータベース
http://vivaweb2.bosai.go.jp/v-hazard/
に、「1983年から現在に至るまでに日本で公表された活火山のハザードマップや防災マップを網羅的に収録したデータベースです。」とあります。
KML で火山配置図を配信しているのでマップに表示してみます。
「NIED 国立研究開発法人防災科学技術研究所（http://www.bosai.go.jp/）」の中段にある「データベ公開一覧」をクリックします。
「NIED | 研究紹介 | データベ公開一覧（http://www.bosai.go.jp/activity_special/data/）」の「火山災害関連」の「火山ハザードマップデータベース」をクリックします。
「火山ハザードマップデータベース（http://vivaweb2.bosai.go.jp/v-hazard/）」が表示されます。
火山ハザードマップデータベースを利用するときは、このページの「火山ハザードマップデータベースについて」を参照して下さい。
「火山ハザードマップを見る」の「火山分布図から探す」をクリックします。
「火山ハザードマップデータベース収録火山一覧 収録火山分布図 Web版（http://vivaweb2.bosai.go.jp/v-hazard/vmap.html）」の下の方にある「KML の配信」の「日本の火山ハザードマップ集第2版収録火山KML」をクリックします。
表示された KML ドキュメントを名前（v-hazard.kml）をつけて保存します。
Google Earth で表示される良いなっていますが、OpenLayers3 で表示してみます。Examples の「Earthquakes in KML」を参考にします。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>火山ハザードマップデータベース</title> <link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.15.1/build/ol.js"></script> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
#map {
position: relative;
}
#info {
position: absolute;
height: 1px;
width: 1px;
z-index: 100;
}
</style>
</head>
<body>
<div id="map"><div id="info"></div></div>
<script>
var projection = ol.proj.get('EPSG:3857');
/** ol.proj.get(projectionLike)
* Fetches a Projection object for the code specified.
* 指定されたコードのプロジェクション・オブジェクトを取得。
* （ol3 API）
*/
var raster = new ol.layer.Tile({
/** ol.layer.Tile
* For layer sources that provide pre-rendered, tiled
* images in grids that are organized by zoom levels
* for specific resolutions.
* プリレンダリング（事前描画）を提供するレイヤソースのため
* の、特定の解像度でのズームレベルによって編成されているグ
* リッドのタイルイメージ。（ol3 API）
*/
source: new ol.source.XYZ({
/** ol.source.XYZ
* Layer source for tile data with URLs in a set XYZ
* format that are defined in a URL template. By
* default, this follows the widely-used Google grid
* where x 0 and y 0 are in the top left. Grids like
* TMS where x 0 and y 0 are in the bottom left can
* be used by using the {-y} placeholder in the URL
* template, so long as the source does not have a
* custom tile grid. In this case, ol.source.TileImage
* can be used with a tileUrlFunction such as:
*
* tileUrlFunction: function(coordinate) {
* return 'http://mapserver.com/'
* + coordinate[0] + '/'
* + coordinate[1] + '/'
* + coordinate[2] + '.png'; }
*
* URL テンプレートで定義されているセット XYZ 形式の URL
* を持つタイルデータのレイヤソース。デフォルトでは、これは、
* x0 と y0 が左上にある広く使用されている Google のグリッ
* ドに従います。x0 と y0 が左下にある TMS のようなグリッド
* は、ソースがカスタムタイルグリッドを持っていない限り、URL
* テンプレートに {-y} プレースホルダを使用して使用すること
* ができます。この場合、ol.source.TileImage は
* tileUrlFunction で次のように使用できます。（ol3 API）
*/
attributions: [
new ol.Attribution({
/** ol.Attribution
* An attribution for a layer source.
* レイヤソースの属性（ol3 API）
*/
html: "<a href='http://maps.gsi.go.jp/development/ichiran.html'
target='_blank'>地理院タイル</a>"
})
],
url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
/** url
* URL template. Must include {x}, {y} or {-y}, and
* {z} placeholders. A {?-?} template pattern, for
* example subdomain{a-f}.domain.com, may be used
* instead of defining each one separately in the
* urls option.
* URLテンプレート。 {x}、{y} または {-y}、と {z} プレース
* ホルダを含める必要があります。例えば
* subdomain{a-f}.domain.com の {?-?} テンプレートパター
* ンは、urls オプションでそれぞれを個別に定義する代わりに、
* 使用することができます。（ol3 API）
*/
projection: "EPSG:3857"
})
});
var vector = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されるベクタデータ。（ol3 API）
*/
source: new ol.source.Vector({
/** ol.source.Vector
* Provides a source of features for vector layers.
* Vector features provided by this source are
* suitable for editing. See ol.source.VectorTile for
* vector data that is optimized for rendering.
* ベクタレイヤのフィーチャのソースを用意します。このソース
* が提供するベクタフィーチャは、編集に適しています。レンダ
* リングのために最適化されたベクタデータの
* ol.source.VectorTile を参照してください。（ol3 API）
*/
url: 'data/kml/v-hazard.kml',
/** url:
* Setting this option instructs the source to use an
* XHR loader (see ol.featureloader.xhr). Use a
* string and an ol.loadingstrategy.all for a one-off
* download of all features from the given URL. Use a
* ol.FeatureUrlFunction to generate the url with
* other loading strategies. Requires format to be
* set as well. When default XHR feature loader is
* provided, the features will be transformed from
* the data projection to the view projection during
* parsing. If your remote data source does not
* advertise its projection properly, this
* transformation will be incorrect. For some formats,
* the default projection (usually EPSG:4326) can be
* overridden by setting the defaultDataProjection
* constructor option on the format.
* このオプションを設定することは、XHR ローダーを使用する
* ソースを指示します（ol.featureloader.xhr 参照）。指
* 定された URL からすべてのフィーチャの一回限りのダウン
* ロードのために文字列とol.loadingstrategy.all を使用
* してください。他のロードストラテジと URL を生成するため
* に ol.FeatureURLFunction を使用してください。フォー
* マットも同様に設定する必要があります。デフォルトの XHR
* フィーチャローダが提供される場合、フィーチャは解析中に
* データ投影からビュー投影へ変換されます。リモート・データ
* ・ソースが適切に投影をアドバタイズしていない場合、この変
* 換は不正確になります。いくつかのフォーマットについては、
* デフォルトの投影（通常はEPSG：4326）は、フォーマットの
* defaultDataProjection コンストラクタオプションを設
* 定することで上書きすることができます。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
format: new ol.format.KML()
/** format:
* The feature format used by the XHR feature loader
* when url is set. Required if url is set, otherwise
* ignored. Default is undefined.
* URL が設定されている場合に XHR フィーチャローダによって
* 使用されるフィーチャフォーマット。 URLが設定されている場
* 合は必要です、それ以外の場合は無視されます。デフォルトは
* 未定義です。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
/** ol.format.KML
* Feature format for reading and writing data in the
* KML format.
* KML フォーマットでデータを読み書きするためのフィーチャ
* のフォーマット。（ol3 API）
*/
}) });
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: ol.proj.transform([138.7313889, 35.3622222], "EPSG:4326", "EPSG:3857"),
projection: projection,
maxZoom: 18,
zoom: 5
})
});
var info = $('#info');
info.popover({
/** Popovers popover.js
* Add small overlays of content, like those on the iPad,
* to any element for housing secondary information.
* Popovers whose both title and content are zero-length
* are never displayed.
* コンテンツの小さなオーバーレイを、iPad上のもののように、
* ハウジング二次情報のための要素に追加します。
* タイトルと内容の両方が zero-length（の文字列）である
* Popover は、表示されません。
* （Bootstrap[http://getbootstrap.com/javascript/
* #popovers]）
*/
animation: false,
/** animation
* Apply a CSS fade transition to the popover.
* popover に CSS fade transition を適用します。
* （Bootstrap[http://getbootstrap.com/javascript/
* #popovers]）
*/
trigger: 'manual',
/** trigger
* How popover is triggered - click | hover | focus |
* manual. You may pass multiple triggers; separate
* them with a space. manual cannot be combined with
* any other trigger.
* popover がトリガーされる方法 - click | hover | focus |
* manual。それらをスペースで区切り複数のトリガーを通すこと
* ができます。manual は、他のどのトリガーとも組み合わせるこ
* とができません。
* （Bootstrap[http://getbootstrap.com/javascript/
* #popovers]）
*/
html: true
/** html
* Insert HTML into the popover. If false, jQuery's text
* method will be used to insert content into the DOM.
* Use text if you're worried about XSS attacks.
* popover に HTML を挿入します。false なら、jQuery の text
* メソッドが DOM にコンテンツを挿入するために使用されます。
* XSS 攻撃が心配されるなら、text を使用してください。
* （Bootstrap[http://getbootstrap.com/javascript/
* #popovers]）
*/
});
var displayFeatureInfo = function(pixel) {
info.css({
/** .css()
* Get the computed style properties for the first
* element in the set of matched elements.
* マッチした要素のセットの最初の要素の計算されたスタイルプロ
* パティを取得します。
* （jQuery[http://api.jquery.com/css/]）
*/
left: pixel[0] + 'px',
top: (pixel[1] - 15) + 'px'
});
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
/** forEachFeatureAtPixel(pixel, callback, opt_this,
* opt_layerFilter, opt_this2)
* Detect features that intersect a pixel on the viewport,
* and execute a callback with each intersecting feature.
* Layers included in the detection can be configured
* through opt_layerFilter.
* ビューポート上のピクセルと交差するフィーチャを検出し、互
* いに交差するフィーチャと共にコールバックを実行します。
* 検出に含まれるレイヤが opt_layerFilter を通じて設定する
* ことができます。（ol3 API）
*/
return feature;
});
if (feature) {
info.popover('hide')
/** .popover('hide')
* Hides an element's popover. Returns to the caller
* before the popover has actually been hidden (i.e.
* before the hidden.bs.popover event occurs). This is
* considered a "manual" triggering of the popover.
* エレメントの popover を非表示にします。popover が実際
* に非表示にされる前（すなわち、hidden.bs.popover イベ
* ントが発生する前）に、caller へ返します。
* （Bootstrap[http://getbootstrap.com/javascript/
* #popovers]）
*/
.attr('data-original-title', feature.get('name'))
/** .attr()
* Get the value of an attribute for the first
* element in the set of matched elements or set
* one or more attributes for every matched element.
* マッチした要素のセットの最初の要素の属性の値を取得す
* るか、すべての一致した要素の1つ以上の属性を設定しま
* す。（jQuery[http://api.jquery.com/attr/]）
*/
/** get()
* Gets a value.
* （ol3 API）
*/
.attr('data-content', feature.get('description'))
.popover('show');
/** .popover('show')
* Reveals an element's popover. Returns to the
* caller before the popover has actually been
* shown (i.e. before the shown.bs.popover event
* occurs). This is considered a "manual"
* triggering of the popover. Popover with
* zero-length titles are never displayed.
* 要素の popover を表示します。popover が実際に表示さ
* れる前（すなわち、shown.bs.popoverイベントが発生す
* る前）に、caller へ返します。これは、popover のト
* リガ（trigger）が manual とみなされます。title と
* conent が zero-length の popover は決して表示され
* ません。
* （Bootstrap[http://getbootstrap.com/javascript/
* #popovers]）
*/
} else {
info.popover('hide');
}
};
map.on('click', function(evt) {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
/** getEventPixel
* Returns the map pixel position for a browser event.
* ブラウザイベントに対して、マップのピクセル位置を返します。
* （ol3 API）
*/
});
</script> </body> </html>
0 件のコメント:
コメントを投稿