チュートリアル12
提供: svg2wiki
(版間での差分)
(→WMSのクエリパラメータ) |
(→WMSのクエリパラメータ) |
||
27行: | 27行: | ||
**WGS84座標系(X:経度,Y:緯度の世界測地系)のデータを、その座標系にリニアな平面(すなわち[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 正距円筒図法])に図化します。 | **WGS84座標系(X:経度,Y:緯度の世界測地系)のデータを、その座標系にリニアな平面(すなわち[https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95 正距円筒図法])に図化します。 | ||
*<code>bbox=120,20,150,50</code> 上で指定した座標系(経度緯度座標)で図化する領域を指定 | *<code>bbox=120,20,150,50</code> 上で指定した座標系(経度緯度座標)で図化する領域を指定 | ||
− | **X1, Y1, X2, | + | **X1, Y1, X2, Y2の並びで指定します。(対角2点の座標) 注:X,Y,Width,Heightではない |
**経度120°,緯度20° と150°,50°の対角線領域のデータをリクエストしています。 | **経度120°,緯度20° と150°,50°の対角線領域のデータをリクエストしています。 | ||
*<code>width=600&height=600</code> 図化するビットイメージのサイズ | *<code>width=600&height=600</code> 図化するビットイメージのサイズ |
2022年2月17日 (木) 03:56時点における版
目次 |
チュートリアル12 WMSの利用
指定した領域の地図データを動的に生成する仕様WMS(Web Map Service)に基づいて地図データを配信するGEBCO Web Serviceと接続し、地図データを表示する最も基本的な方法を説明します。
クライアント側では特にjavascript等による動的なコードの実装なしに、単に静的なビットイメージを表示するだけのものです。したがってチュートリアル4との違いはほぼありません。
- 実際の動作は、こちらをクリック。
- ソースコードのディレクトリ
wms1.html
これまでと特に変わったところはありません。
Container.svg
これまでと特に変わったところはありません。
wms_static.svg
image要素を使って、ビットイメージをSVGMapコンテンツに配置しているのはチュートリアル4と同じです。
チュートリアル4では画像の領域情報とimage要素のパラメータの関係の説明が簡素でしたが、こちらではWMSのクエリパラメータとの関係を合わせ詳細に説明します。
WMSのクエリパラメータ
WMSの詳細は仕様書を参照してください。ここでは要点を述べます。
- 決め打ちパラメータ 以下は地図のビットイメージを取得する際に基本的に常時変わらないパラメータです。
request=GetMap
service=WMS
version=1.1.1
format=image/png
データ形式はPNGが概ね常時適します。(ロスレス・透明ピクセル(データの無い場所など))
layers=GEBCO_LATEST
GEBCO WMSにどのようなレイヤーがあるかは、GEBCOのgetcapabilitiesで確認できます。srs=EPSG:4326
空間参照系(地理座標系と図法を一体にした概念)をEPSG:4326(WGS84座標系)に指定しています。- WGS84座標系(X:経度,Y:緯度の世界測地系)のデータを、その座標系にリニアな平面(すなわち正距円筒図法)に図化します。
bbox=120,20,150,50
上で指定した座標系(経度緯度座標)で図化する領域を指定- X1, Y1, X2, Y2の並びで指定します。(対角2点の座標) 注:X,Y,Width,Heightではない
- 経度120°,緯度20° と150°,50°の対角線領域のデータをリクエストしています。
width=600&height=600
図化するビットイメージのサイズ- 600 x 600 pxのサイズのPNG画像をリクエストしています。
- WMSではアスペクト比は維持されず、bboxで指定した領域が指定したサイズにきっちり収まるように、アスペクトが変化します。
image要素のプロパティ
xlink:href="[WMSクエリパラメータが設定されたGEVBCO WMSのURL]"
x="120"
y="-50"
width="30"
height="30"
preserveAspectRatio="none"
title="image"
opacity="0.5"
ソース
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="120,-50,30,30"> <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)"/> <image xlink:href="https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv? request=GetMap& service=WMS& version=1.1.1& layers=GEBCO_LATEST& srs=EPSG%3A4326& bbox=120,20,150,50& width=600& height=600& format=image%2Fpng" x="120" y="-50" width="30" height="30" preserveAspectRatio="none" title="image" opacity="0.5" /> </svg>