チュートリアル13
提供: svg2wiki
(版間での差分)
(→wmsController.html) |
(→wmsController.html) |
||
| 22行: | 22行: | ||
==[https://svgmap.org/devinfo/devkddi/tutorials/wms2/wmsController.html wmsController.html]== | ==[https://svgmap.org/devinfo/devkddi/tutorials/wms2/wmsController.html wmsController.html]== | ||
| + | *<code>onload</code> webApp読み込み直後に呼ばれる関数 | ||
| + | **<code>svgMap.refreshScreen()</code> webAppが読み込まれた直後に地図の[[[解説書#refreshScreen|再描画を明示]]し、<code>preRenderFunction</code>が実行されるようにします。 | ||
| − | < | + | *<code>preRenderFunction</code> [[解説書#preRenderFunction|再描画に際して実行されるコールバック関数]] |
| + | <pre> | ||
<!doctype html> | <!doctype html> | ||
<html> | <html> | ||
2022年2月17日 (木) 05:17時点における版
目次 |
チュートリアル13 WebApp Layer WMS 伸縮スクロールに応じた表示
WMS(Web Map Service)を使って、表示している領域の地図を伸縮スクロールに応じて表示する機能を持つレイヤーをWebApp Layerとして実装します。WMSとしてはチュートリアル12に引き続きGEBCO Web Serviceを使用します。
- 実際の動作は、こちらをクリック。
- ソースコードのディレクトリ
wms2.html
これまでと特に変わったところはありません。
Container.svg
これまでと特に変わったところはありません。
wms_dynamic.svg
data-controller="wmsController.html"このレイヤーにWebApp("wmsController.html)を紐付けています- WebAppではWMSのコンテンツを表示するためのDOM操作を行っています。
- image要素はダミーです（xlink:href属性がないので表示されない）
<?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" data-controller="wmsController.html#exec=appearOnLayerLoad"> <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)"/> <image id="wmsImage" preserveAspectRatio="none" opacity="0.5" /> </svg>
wmsController.html
onloadwebApp読み込み直後に呼ばれる関数svgMap.refreshScreen()webAppが読み込まれた直後に地図の[[[解説書#refreshScreen|再描画を明示]]し、preRenderFunctionが実行されるようにします。
preRenderFunction再描画に際して実行されるコールバック関数
<!doctype html>
<html>
<head>
<title>basic dynamic wms layer controller</title>
<meta charset="utf-8"></meta>
</head>
<script>
onload=function(){
svgMap.refreshScreen();
}
var GEBCOurl="https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv";
var GEBCOlayer="GEBCO_LATEST";
var crsAD=1;
function preRenderFunction(){
var prevImageElement = svgImage.getElementById("wmsImage");
prevImageElement.remove();
var geoViewBox = svgMap.getGeoViewBox();
var screenSize = getScreenSize();
console.log("screenSize:",screenSize);
var req = getWMSreq(GEBCOurl, GEBCOlayer, geoViewBox, screenSize);
var newImage = getSvgImage(req, geoViewBox);
svgImage.documentElement.appendChild(newImage);
}
function getSvgImage( imageUrl, geoViewBox){
var imageElement = svgImage.createElement("image");
imageElement.setAttribute("opacity", 0.5);
imageElement.setAttribute("preserveAspectRatio", "none");
imageElement.setAttribute("id", "wmsImage");
imageElement.setAttribute("xlink:href", imageUrl);
imageElement.setAttribute("x", geoViewBox.x * crsAD);
imageElement.setAttribute("y", -(geoViewBox.y+geoViewBox.height) * crsAD); // 軸反転のため北端を設定
imageElement.setAttribute("width", geoViewBox.width * crsAD);
imageElement.setAttribute("height", geoViewBox.height * crsAD);
return(imageElement);
}
function getWMSreq(baseUrl, layerName, geoArea, screenSize){
var wmsArea_x0=geoArea.x;
var wmsArea_y0=geoArea.y;
var wmsArea_x1=geoArea.x+geoArea.width;
var wmsArea_y1=geoArea.y+geoArea.height;
var ans = `${baseUrl}?
request=GetMap&
service=WMS&
version=1.1.1&
layers=${layerName}&
srs=EPSG:4326&
bbox=${wmsArea_x0},${wmsArea_y0},${wmsArea_x1},${wmsArea_y1}&
width=${screenSize.width}&
height=${screenSize.height}&
format=image%2Fpng`;
ans = ans.replace(/\s/g,""); // 空白文字(改行含)を除去
return ( ans );
}
function getScreenSize(){
var gvb = svgMap.getGeoViewBox();
var scale = svgImageProps.scale;
return {
width : Math.round(gvb.width * scale),
height: Math.round(gvb.height * scale),
}
}
</script>
<body>
<h3>Basic dynamic WMS layer controller</h3>
<p>Get the map bit image from <a href="https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/" target="_blank">GEBCO WMS</a> according to the display area. No <a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%9E%E3%83%83%E3%83%97%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9" target="_blank">tiling</a> is performed.</p>
</body>
</html>
