diff --git a/docs/basic/tutorial-2c/index.md b/docs/basic/tutorial-2c/index.md index 9f392ae..784f159 100644 --- a/docs/basic/tutorial-2c/index.md +++ b/docs/basic/tutorial-2c/index.md @@ -1,10 +1,10 @@ # Tutorial 2c: OpenStreetMap and POI (airport) display (layering) -## Introduction +## Introduction {#introduction} In this tutorial, we will use OpenStreetMap as the background map to create a more practical page. [Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial2c/tutorial2c.html) to see it in action. This tutorial is the same as Tutorial 2b, except that it uses OpenStreetMap.svg as the background map. -### File Structure +### File Structure {#file-structure} The file structure is as follows: @@ -14,13 +14,13 @@ The file structure is as follows: - dynamicOSM_r11.svg is a dynamic content (WebAppLayer) linked with JavaScript code. We will not go into that in this chapter, but will focus on practical layering. - Note: Dynamic content is explained in more detail in [the WebApp Layer section](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%AB#WebApp_Layer.E7.B7.A8). -## Tutorial +## Tutorial {#tutorial} -### Files Used +### Files Used {#files-used} - [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2c.zip) of used files -### Content Structure +### Content Structure {#content-structure} ```plaintext tutorial2b.html @@ -37,20 +37,20 @@ tutorial2b.html | +-Airport.svg (actual map layer content (airport points)) ``` -### tutorial2c.html +### tutorial2c.html {#tutorial2c-html} This is the same as [Tutorial 2B](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%AB2b#tutorial2b.html) -### layerListStyle.css +### layerListStyle.css {#layerlistsyle-css} This is the same as [Tutorial 2B](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%AB2b#tutorial2b.html) -### Container.svg +### Container.svg {#container-svg} -- Load the SVG files for the two layers you want to display as layers. +- Load the SVG files for the two layers you want to display [as layers](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%AB1#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0). - Coastline.svg - Airport.svg -- The layer order is as follows: The lower the row, the higher the layer . SVG Painters Model +- The layer order is as follows: The lower the row, the higher the layer . [SVG Painters Model](https://www.w3.org/TR/SVG11/render.html#PaintersModel) - Layer list UI can be grouped by specifying a class - Referencing layers by animation elements - Set the initial visibility state using the visibility attribute (if there is no layer list UI, it is impossible to change the initial visibility state) @@ -69,47 +69,47 @@ This is the same as [Tutorial 2B](https://www.svgmap.org/wiki/index.php?title=%E ``` -### dynamicOSM_r11.svg, (dynamicOSM_r11.html) +### dynamicOSM_r11.svg, (dynamicOSM_r11.html) {#dynamicosm_r11-svg} - This is the default OpenStreetMap background map layer that replaces Coastline.svg. - This content is not just SVG content, but a WebAppLayer where content is dynamically generated using JavaScript. - dynamicOSM_r11.html is the WebApp content containing the javascript and is linked from dynamicOSM_r11.svg. - - WebAppLayer will be explained in more detail in Tutorial: WebAppLayer . For now, just think of it as a practical background map layer that can be easily used, where a detailed map will be displayed when zoomed in, by simply replacing Coastline.svg with this. + - WebAppLayer will be explained in more detail in [Tutorial: WebAppLayer](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%AB#WebApp_Layer.E7.B7.A8). For now, just think of it as a practical background map layer that can be easily used, where a detailed map will be displayed when zoomed in, by simply replacing Coastline.svg with this. -### Airport.svg +### Airport.svg {#airport-svg} This is the same as [Tutorial 2B](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%AB2b#tutorial2b.html) -## Added: Allows you to choose background map +## Added: Allows you to choose background map {#added} In the previous chapter, we replaced Coastline.svg with dynamicOSM_r11.svg, but by using the layer function, users can choose from multiple background maps from the UI. You can also use the same method to set up multiple add-on information items and switch between them. -- Click here to see it in action . +- Click [here](http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2c/tutorial2c_add.html) to see it in action . - If you click on the layer list UI in the upper left corner of the screen, you can choose from two background maps. -- The file used is here +- The file used is [here](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2c/) The difference is the contents of Container.svg -### tutorial2c_add.html +### tutorial2c_add.html {#tutorial2c_add-html} [This is the same as the html in the previous chapter](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%AB2c#tutorial2c.html), except that the linked container svg is Container_add.svg . -### Container_add.svg +### Container_add.svg {#container_add-svg} **The key point is the animation** element (there are no other differences). -- Set multiple animation elements for the background map content +- Set multiple **animation** elements for the background map content - Give each background map a different title attribute - **Class** attribute - Set a common class name for the background map - The name specified in the class name will be the name of the group that appears in the layer list UI. - Additionally, add a switch to the class name so that only one of the background maps can be selected in the UI. (If you want to be able to display both at the same time, do not add a switch.) - - class="basemap switch" -- Set everything except the background map you want to display by defaultvisibility="hidden" + - '''class="basemap switch"''' +- Set everything except the background map you want to display by default '''visibility="hidden"''' -#### Source code +#### Source code {#source-code} ```svg @@ -126,6 +126,6 @@ The difference is the contents of Container.svg ``` -### Coastline.svg +### Coastline.svg {#coastline-svg} This is the same as [Tutorial 2B](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%AB2b#tutorial2b.html) \ No newline at end of file diff --git a/docs/basic/tutorial-3/index.md b/docs/basic/tutorial-3/index.md index 5c0c5ea..59bb2b6 100644 --- a/docs/basic/tutorial-3/index.md +++ b/docs/basic/tutorial-3/index.md @@ -1,10 +1,10 @@ # Tutorial 3: Displaying a tiled coastline map -## Introduction +## Introduction {#introduction} This tutorial splits the content of Tutorial 1 into multiple tiles and displays them. [Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html) to see it in action. -### File Structure +### File Structure {#file-structure} The file structure is as follows: @@ -32,13 +32,13 @@ The file structure is as follows: - [3_2.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_2.svg) - [3_3.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_3.svg) -## Tutorial +## Tutorial {#tutorial} -### Files Used +### Files Used {#files-used} - [ZIP archive](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3.zip) file of used files -### Essential differences from existing frameworks +### Essential differences from existing frameworks {#essential-differences} SVGMap tiling is fundamentally different from other frameworks (openlayers, leaflet, googlemaps, etc.). Therefore, developers who are used to existing frameworks may be confused by the differences in the mechanism, so I would like to explain it here. @@ -52,7 +52,7 @@ In this chapter, we will demonstrate the most basic static tiling using this fun One of the reasons for this structure of SVGMap is to allow it to be extended and implemented with more advanced and efficient tiling methods, such as those described in the above [reference material](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese). -### Content Structure +### Content Structure {#content-structure} ```plaintext tutorial1.html @@ -82,7 +82,7 @@ tutorial1.html +-3_2.svg (actual tiled coastline content) +-3_3.svg (actual tiled coastline content) ``` -### tutorial3.html +### tutorial3.html {#tutorial3-html} Basically the same as tutorial1.html used in Tutorial 1. @@ -135,7 +135,7 @@ Basically the same as tutorial1.html used in Tutorial 1. ``` -### Container.svg +### Container.svg {#container-svg} - Load an SVG file for each layer you want to display (only Coastline.svg is loaded). @@ -150,9 +150,9 @@ Basically the same as tutorial1.html used in Tutorial 1. ``` -### Coastline +### Coastline {#coastline} -#### Tiling +#### Tiling {#tiling} This is an example of tiling using [the animation element](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%AB1#animation.E8.A6.81.E7.B4.A0) of SVGMap content . @@ -165,7 +165,7 @@ Tiling consists of tile content, where the actual data is stored, and container - Tiles are loaded as needed based on this area information (the tiles are automatically loaded when their area is within the area displayed on the screen). - Note: ∴Unlike layering, the x, y, width, and height attributes are important in tiling. -#### Placement of each tile +#### Placement of each tile {#placement-of-each-tile} **Coastline.svg** | + | X coordinate small, Small Longitude | .. | .. | X coordinate large, Large Longitude @@ -182,11 +182,11 @@ Tiling consists of tile content, where the actual data is stored, and container - Note: The Y coordinate is the opposite of the geographic coordinate (latitude and longitude coordinate), and the origin is at the top (north). - See the relationship between SVG coordinates and geographic coordinates (latitude and longitude coordinates) using [the globalCoordinateSystem element](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%AB1#.E5.BF.85.E9.A0.88.E3.81.AE.E6.8B.A1.E5.BC.B5_:_globalCoordinateSystem.E8.A6.81.E7.B4.A0). -#### About svpMap Tools +#### About svpMap Tools {#about-svgmap-tools} [svgMapTools](https://github.com/svgmap/svgMapTools/tree/master/tutorials) has the ability to generate tiled SVGMap content from large geographical data (such as shapefiles), but also supports more advanced (highly efficient) tiling (Quad Tree Composite Tiling). -#### Source code +#### Source code {#source-code} ```svg @@ -216,7 +216,7 @@ Tiling consists of tile content, where the actual data is stored, and container ``` -### Split SVG files +### Split SVG files {#split-svg-files} - 0_0.svg Areas without map data. diff --git a/docs/basic/tutorial-3b/index.md b/docs/basic/tutorial-3b/index.md index cbb9487..1357c0c 100644 --- a/docs/basic/tutorial-3b/index.md +++ b/docs/basic/tutorial-3b/index.md @@ -1,11 +1,11 @@ # Tutorial 3b: Tiling (Creating static tiles with svgMapTools) -## Introduction +## Introduction {#introduction} In the previous chapter, we used tiles that had already been created, but here we will use svgMapTools to create and display tile data from a shapefile. [Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html) to see it in action. -### File Structure +### File Structure {#file-structure} The file structure is as follows: @@ -15,28 +15,28 @@ The file structure is as follows: - For information on the tiling performed by svgMapTools (Quad Tree Composite Tiling), see [this document](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese). - Display converted content as a layer -## Tutorial +## Tutorial {#tutorial} -### Files Used +### Files Used {#files-used} - [ZIP archive](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b.zip) file of used files -### Preparing tiled content +### Preparing tiled content {#preparing-tiled-content} - In this chapter, we will use [svgMapTools](https://github.com/svgmap/svgMapTools/) to prepare tiled map content from a shapefile and display it. Therefore, please [first follow the tutorial that includes setting up svgMapTools](https://github.com/svgmap/svgMapTools/tree/master/tutorials). - In this tutorial, we will display data from [the Geospatial Information Authority of Japan's Global Map of Japan (file format: shapefile, vector geographic data)](https://www.gsi.go.jp/kankyochiri/gm_jpn.html). - This time, we will display the coastline (coasstl), road (roadl), and urban area (surfaces (builtupa) and points (builtupp)) data as layers. -#### Configuring svgMapTools +#### Configuring svgMapTools {#configuring-svgmaptools} - Complete [the tutorial](https://github.com/svgmap/svgMapTools/tree/master/tutorials) including setting up svgMapTools -#### Download source data +#### Download source data {#download-source-data} - Download and unzip [the zip file containing all layers](https://www1.gsi.go.jp/geowww/globalmap-gsi/download/data/gm-japan/gm-jpn-all_u_2_2.zip) from [the Global Map Japan website](https://www.gsi.go.jp/kankyochiri/gm_jpn.html). -#### Transform data and save content +#### Transform data and save content {#transform-data-and-save-content} Generates tiled content for an SVGMap from a Shapefile. @@ -61,11 +61,11 @@ Note: - [PATH_TO_DATA] is the directory where you extracted the downloaded data - builtupp_jpn and builtupa_jpn do not generate bit image tiles for small scales because the data size is not large (tiling is not actually necessary). -### tutorial3b.html +### tutorial3b.html {#tutorial3b-html} It is essentially the same as [tutorial2b.html](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%AB2b#tutorial2b.html) used in [Tutorial 2b](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%AB2b). -### Container.svg +### Container.svg {#container-svg} - It is essentially the same as [Container.svg](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%AB2b#Container.svg) from [Tutorial 2b](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%AB2b). - However, this time the coastline layer, road layer, and urban area (surface/point) layer are all tiled data. @@ -94,7 +94,7 @@ It is essentially the same as [tutorial2b.html](https://www.svgmap.org/wiki/inde ``` -### The structure of tiled content generated by svgMapTools +### The structure of tiled content generated by svgMapTools {#structure-of-tiled-content} - All vector data (.svg format - for large-scale display) and raster data (.png format - for small-scale display) are referenced hierarchically from the layer's root content (in this example, coastline data, coastl_jpn.svg). - Among .svg format data, those with the file name *cont* contain no vector graphics data and only reference data, referencing child and descendant content. diff --git a/docs/basic/tutorial-4/index.md b/docs/basic/tutorial-4/index.md index 1e27e19..90a5347 100644 --- a/docs/basic/tutorial-4/index.md +++ b/docs/basic/tutorial-4/index.md @@ -1,11 +1,11 @@ # Tutorial 4: Bitmap Image Map Display -## Introduction +## Introduction {#introduction} This is a tutorial that overlays some bitmap image maps onto the contents of Tutorial 1. [Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html) to see it in action . -### File Structure +### File Structure {#file-structure} The file structure is as follows: @@ -19,14 +19,14 @@ The file structure is as follows: - Bitmap image SVG file to overlay. - This was created using this tool: [a tool that layers bitmap map images onto SVGMap](https://svgmap.org/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mapPage/). -## Tutorial +## Tutorial {#tutorial} -### Files Used +### Files Used {#files-used} - [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4.zip) of used files - Source: [Estimated damage from an earthquake directly beneath the capital, page 7](https://www.bousai.go.jp/kyoiku/bousai-vol/drill/h26/tokyo/tokyo03_kato.pdf#page=4) -### tutorial4.html +### tutorial4.html {#tutorial4-html} Basically the same as tutorial2b.html used in Tutorial 2b . @@ -86,7 +86,7 @@ Basically the same as tutorial2b.html used in Tutorial 2b . ``` -### Container.svg +### Container.svg {#container-svg} - [As in Tutorial 2c](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%AB2c), the bitmap images bitmapImage.svg and dynamicOSM_r11.svg are loaded as layers. - [As with the additional chapters in Tutorial 2c](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%AB2c#.E8.BF.BD.E5.8A.A0.EF.BC.9A.E8.83.8C.E6.99.AF.E5.9C.B0.E5.9B.B3.E3.82.92.E9.81.B8.E3.81.B9.E3.82.8B.E3.82.88.E3.81.86.E3.81.AB.E3.81.99.E3.82.8B), you can choose from two background maps (OpenStreetMap and Coastline.svg). @@ -106,13 +106,13 @@ Basically the same as tutorial2b.html used in Tutorial 2b . ``` -### bitmapImage.svg +### bitmapImage.svg {#bitmapimage-svg} - Bitmap image SVG file to overlay. - Created using a [tool](https://svgmap.org/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mapPage/) that layers bit-image map images into SVGMap. - The original bit image is extracted from the document at the beginning of this chapter. -#### Relationship between longitude and latitude and XY coordinates of SVG content +#### Relationship between longitude and latitude and XY coordinates of SVG content {#relationship-between-lon-lat-xy-coord} ```globalCoordinateSystem transform``` Specified by the element attributes (six values ​​of the linear transformation matrix) @@ -128,7 +128,7 @@ Xsvg = longitude Ysvg = -latitude ``` -#### Image element parameters +#### Image element parameters {#image-element-parameters} - The bit image is placed using the image element. - ```xlink:href="[ビットイメージのURL]"``` URL of the bit image to be placed @@ -155,10 +155,10 @@ Ysvg = -latitude ``` -### dynamicOSM_r11.svg (and dynamicOSM_r11.html) +### dynamicOSM_r11.svg (and dynamicOSM_r11.html) {#dynamicosm-r11-svg} This is the same as [dynamicOSM_r11.svg from Tutorial 2c](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%AB2c#dynamicOSM_r11.svg.E3.80.81.28dynamicOSM_r11.html.29). -### Coastline.svg +### Coastline.svg {#coastline-svg} This is the same one we have been using since [Tutorial 1](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%AB1#Coastline.svg). \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2c/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2c/index.md new file mode 100644 index 0000000..3ce4297 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2c/index.md @@ -0,0 +1,131 @@ +# チュートリアル2c OpenStreetMapとPOI(空港)表示　(レイヤリング) + +## はじめに {#introduction} + +チュートリアル2bの内容に対して、背景地図にOpenStreetMapを使用し、より実用的なページを作ってみます。実際の動作は [こちら](https://svgmap.org/devinfo/devkddi/tutorials/tutorial2c/tutorial2c.html) をクリック。 このチュートリアルはチュートリアル2bと同じですが、背景地図としてOpenStreetMap.svgを使用する点が異なります。 + +### ファイル構造 {#file-structure} + +ファイル構造は以下の通りです： + +- tutorial2cディレクトリには以下のファイルが含まれています。 + - [tutorial2c.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2c/tutorial2c.html) +- Container.svgで参照している背景地図を、Coastline.svgからdynamicOSM_r11.svgに置き換えています。 + - dynamicOSM_r11.svgはjavascriptコードが紐付けられた動的なコンテンツ(WebAppLayer)になっています。本章ではその内容は割愛し、実用的なレイヤリングを実践してみます。 + - Note: 動的なコンテンツの詳細は[WebApp Layer編](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%AB#WebApp_Layer.E7.B7.A8)で解説されています。 + +## チュートリアル {#tutorial} + +### 使用ファイル {#files-used} + +- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2c.zip) + +### コンテンツの構造 {#content-structure} + +```plaintext +tutorial2b.html + | + +-img/zoomup.png, img/zoomdown.png, img/gps.png, img/Xcursor.png (images of map operation UI) + | + +-js/SVGMapLv0.1_r17.js, js/SVGMapLv0.1_LayerUI2_r4.js (Javascript library for displaying SVGMap) + | + +-Container.svg (An SVG file that holds various data (layers)) + | + +-dynamicOSM_r11.svg (OpenStreetMap layer) + | | + | + dynamicOSM_r11.html (WebApp that dynamically generates OpenStreetMap layers) + | + +-Airport.svg (actual map layer content (airport points)) +``` +### tutorial2c.html {#tutorial2c-html} + +[Tutorial 2Bチュートリアル2b](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%AB2b#tutorial2b.html)と同じ内容です + +### layerListStyle.css {#layerlistsyle-css} + +This is the same as [Tutorial 2B](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%AB2b#tutorial2b.html) + +### Container.svg {#container-svg} + +- 表示する２つのレイヤ用のSVGファイルを[レイヤーとして](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%AB1#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0)読み込む + - Coastline.svg + - Airport.svg +- レイヤーの順番は、**下の行ほど上のレイヤー**になる。[SVGのPainters Model](https://www.w3.org/TR/SVG11/render.html#PaintersModel) +- class指定でレイヤーリストUIのグルーピングが可能 +- animation要素によってレイヤーを参照 +- visibility属性によって初期表示状態を設定する（もしレイヤーリストUIがないと初期表示状態から変更不可能です） +- x,y,width,height値は取りうる最大領域を設定 + +```svg + + + + + + + + + + +``` + +### dynamicOSM_r11.svg、 (dynamicOSM_r11.html) {#dynamicosm_r11-svg} + +- Coastline.svgに代えてデフォルトで表示されるOpenStreetMapの背景地図レイヤーです +- このコンテンツは、単なるSVGコンテンツではなく、javascriptで動的にコンテンツが生成されるWebAppLayerとなっています。 + - dynamicOSM_r11.htmlは、そのjavascriptが入っているWebAppコンテンツで、 dynamicOSM_r11.svgからリンクされています。 + - WebAppLayerについては[チュートリアル:WebAppLayer編](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%AB#WebApp_Layer.E7.B7.A8) で詳しく説明します。ここではCoastline.svgからこれに代えるだけで、拡大すると詳細な地図が表示される、実用的な背景地図のレイヤーを簡単に利用することができたと考えていただくだけで大丈夫です。 + +### Airport.svg {#airport-svg} + +[チュートリアル2b](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%AB2b#tutorial2b.html)と同じ内容です。 + +## 追加：背景地図を選べるようにする {#added} + +前章ではCoastline.svgの代わりにdynamicOSM_r11.svgを置き換えましたが、レイヤー機能を用いればユーザ側でUIから複数ある背景地図を選ぶことができます。 + +また、同じ方法で、上乗せ情報を複数設置し、切り替えて利用できるようにすることもできます。 + +- 実際の動作は[こちら](http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2c/tutorial2c_add.html)をクリック。 + - 画面左上のレイヤーリストUIをクリックすると、2個の背景地図が選べるようになっています。 +- 使用ファイルは[こちら](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2c/) + +異なるのはContainer.svgの内容になります。 + +### tutorial2c_add.html {#tutorial2c_add-html} + +リンク先のコンテナsvgが、Container_add.svgになっていることを除き、[前章のhtml](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%AB2c#tutorial2c.html)と同じです。 + +### Container_add.svg {#container_add-svg} + +**animation** 要素がポイントです。（他に差異はありません） + +- 背景地図用のコンテンツのための**animation**要素を複数設定する +- **title**属性を背景地図ごとに異なる名前にする +- **Class** 属性 + - 背景地図に共通のクラス名を設定しておく + - クラス名で指定した名前がレイヤーリストUIに現れるグループの名前になります。 + - さらに、UIでどちらかの背景地図だけが選ばれるようにクラス名にswitchも追加する。(同時に両方とも表示できるようにしたい場合はswitchを追加しない) + - '''class="basemap switch"''' +- デフォルトで表示状態にしたい背景地図以外は'''visibility="hidden"'''を設定する + +#### ソースコード {#source-code} + +```svg + + + + + + + + + + + + +``` + +### Coastline.svg {#coastline-svg} + +[チュートリアル2b](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%AB2b#tutorial2b.html)と同じ内容です。 \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3/index.md new file mode 100644 index 0000000..39ffebe --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3/index.md @@ -0,0 +1,3309 @@ +# チュートリアル3 タイリングされた海岸線地図の表示 + +## はじめに {#introduction} + +This tutorial splits the content of Tutorial 1 into multiple tiles and displays them. [Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html) to see it in action. + +### ファイル構造 {#file-structure} + +The file structure is as follows: + +- [The tutorial3 directory](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/) contains the following files. + - [tutorial3.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html) + - HTML for Tutorial 3. Same content as tutrial1.html. + - [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/Container.svg) + - [Coastline.svg](https://www.svgmap.org//devinfo/devkddi/tutorials/tutorial3/Coastline.svg) + - An SVG that bundles the following 4x4 (total 16) split files. + - For information on tiling, see [the SVGMap tiling architecture](https://www.slideshare.net/totipalmate/tiling-51301496). + - [0_0.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/0_0.svg) + - [0_1.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/0_1.svg) + - [0_2.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/0_2.svg) + - [0_3.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/0_3.svg) + - [1_0.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/1_0.svg) + - [1_1.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/1_1.svg) + - [1_2.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/1_2.svg) + - [1_3.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/1_3.svg) + - [2_0.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/2_0.svg) + - [2_1.svg](https://www.svgmap.org//devinfo/devkddi/tutorials/tutorial3/2_1.svg) + - [2_2.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/2_2.svg) + - [2_3.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/2_3.svg) + - [3_0.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_0.svg) + - [3_1.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_1.svg) + - [3_2.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_2.svg) + - [3_3.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_3.svg) + +## Tutorial {#tutorial} + +### Files Used {#files-used} + +- [ZIP archive](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3.zip) file of used files + +### Essential differences from existing frameworks {#essential-differences} + +SVGMap tiling is fundamentally different from other frameworks (openlayers, leaflet, googlemaps, etc.). Therefore, developers who are used to existing frameworks may be confused by the differences in the mechanism, so I would like to explain it here. + +Other map frameworks assume pre-defined tiling rules (such as [TMS](https://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%A4%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9)) **and these rules are hard-coded into the framework**. The system is designed to only specify parameters for accessing a server built based on those rules. While it is easy to introduce tiled content by simply setting parameters, there are issues with flexibility. + +On the other hand, SVGMap tiling is more primitive and does not have built-in tiling rules (although this can easily be implemented as a WebApp Layer, as explained in [Tutorial 5](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%AB5)), but instead provides the more basic functionality needed to make tiling work, allowing for a wide variety of tiling strategies to be achieved. + +In this chapter, we will demonstrate the most basic static tiling using this function. Static tiling is achieved by preparing an SVG file with inline layout information for the tiled data, and the viewer matching the viewport with its container to obtain the necessary tiles. + +[For](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english) an illustration of how this works, see [pages 14](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese/14) to [20](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese/20) of [this more advanced guide](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese). + +One of the reasons for this structure of SVGMap is to allow it to be extended and implemented with more advanced and efficient tiling methods, such as those described in the above [reference material](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese). + +### Content Structure {#content-structure} + +```plaintext +tutorial1.html + | + +-img/zoomup.png, img/zoomdown.png, img/gps.png, img/Xcursor.png (images of map operation UI) + | + +-js/SVGMapLv0.1_r17.js, js/SVGMapLv0.1_LayerUI2_r4.js (Javascript library for displaying SVGMap) + | + +-Contaiber.svg (Loads an SVG file that serves as a bundle of various data (layers)) + | + +-Coastline.svg (Coastline layer: bundles tiled coastline content) + | + +-0_0.svg (actual tiled coastline content) + +-0_1.svg (actual tiled coastline content) + +-0_2.svg (actual tiled coastline content) + +-0_3.svg (actual tiled coastline content) + +-1_0.svg (actual tiled coastline content) + +-1_1.svg (actual tiled coastline content) + +-1_2.svg (actual tiled coastline content) + +-1_3.svg (actual tiled coastline content) + +-2_0.svg (actual tiled coastline content) + +-2_1.svg (actual tiled coastline content) + +-2_2.svg (actual tiled coastline content) + +-2_3.svg (actual tiled coastline content) + +-3_0.svg (actual tiled coastline content) + +-3_1.svg (actual tiled coastline content) + +-3_2.svg (actual tiled coastline content) + +-3_3.svg (actual tiled coastline content) +``` +### tutorial3.html {#tutorial3-html} + +Basically the same as tutorial1.html used in Tutorial 1. + +- Loads the SVGMap core program file (SVGMapLv0.1_r18module.js) and makes various SVGMap APIs available. +- Define the map display area (using a DIV) and load an SVG file (Containers.svg) that contains the layers to be displayed there (layers that are automatically made visible in the SVGMap core program above will be displayed). +- Defines the display of the zoom up, zoom down, and GPS buttons and their behavior when clicked (calling the respective APIs of the SVGMap core program). + - Zoom up button: Zooms up the map by calling the svgMap.zoomup() API. + - Zoom down button: Zooms down the map by calling the svgMap.zoomdown() API. + - GPS button: Calls the svgMap.gps() API to zoom in on the current location (the location of your PC or smartphone, if it can be determined). +- A cross mark indicating the center is displayed. +- Displays the latitude and longitude on the map indicated by the cross mark above (actually, displays the latitude and longitude of the center of the map when moving the map). + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial3 Coastline Tiling + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial3 Coastline Tiling + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng +
+ + +``` + +### Container.svg {#container-svg} + +- Load an SVG file for each layer you want to display (only Coastline.svg is loaded). + +```svg + + + + + + + + +``` + +### Coastline {#coastline} + +#### Tiling {#tiling} + +This is an example of tiling using [the animation element](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%AB1#animation.E8.A6.81.E7.B4.A0) of SVGMap content . + +Tiling consists of tile content, where the actual data is stored, and container content (this file) that integrates it. + +- In this example, the container content integrates each SVGMap file divided into 4x4 (16) tiles. +- Referencing all 16 tiles using the animation element + - Write the link to the tile content in the xlink:href attribute + - Describe the area where the tile exists in the x, y, width, and height attributes + - Tiles are loaded as needed based on this area information (the tiles are automatically loaded when their area is within the area displayed on the screen). + - Note: ∴Unlike layering, the x, y, width, and height attributes are important in tiling. + +#### Placement of each tile {#placement-of-each-tile} + +**Coastline.svg** +| + | X coordinate small, Small Longitude | .. | .. | X coordinate large, Large Longitude +|---|---|---|---|---| +| Small Y coordinate, large latitude | 0_0.svg | 1_0.svg | 2_0.svg | 3_0.svg +| .. | 0_1.svg | 1_1.svg | 2_1.svg | 3_1.svg +| .. | 0_2.svg | 1_2.svg | 2_2.svg | 3_2.svg +| Large Y coordinate, small latitude | 0_3.svg | 1_2.svg | 2_2.svg | 3_2.svg + +- Width and height of each tile: width,height attribute values: width="659.2878" height="631.5991" +- Origin of each tile (coordinates of the upper left corner of the tile): x, y attribute values + - x：12078.24557, 12737.53337, 13396.82117, 14056.10897 + - y: -4750.342539, -4118.743422, -3487.144305, -2855.545188 +- Note: The Y coordinate is the opposite of the geographic coordinate (latitude and longitude coordinate), and the origin is at the top (north). + - See the relationship between SVG coordinates and geographic coordinates (latitude and longitude coordinates) using [the globalCoordinateSystem element](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%AB1#.E5.BF.85.E9.A0.88.E3.81.AE.E6.8B.A1.E5.BC.B5_:_globalCoordinateSystem.E8.A6.81.E7.B4.A0). + +#### About svpMap Tools {#about-svgmap-tools} + +[svgMapTools](https://github.com/svgmap/svgMapTools/tree/master/tutorials) has the ability to generate tiled SVGMap content from large geographical data (such as shapefiles), but also supports more advanced (highly efficient) tiling (Quad Tree Composite Tiling). + +#### Source code {#source-code} + +```svg + + + + + + xlink:href="0_2.svg" x="12078.24557" y="-3487.144305" width="659.2878" height="631.5991"/> + + + + + + + + + + + xlink:href="3_0.svg" x="14056.10897" y="-4750.342539" width="659.2878" height="631.5991"/> + + + + + +``` + +### Split SVG files {#split-svg-files} + +- 0_0.svg +Areas without map data. + +```svg + + + + +``` + +- 0_1.svg +Areas without map data. + +```svg + + + + +``` + +- 0_2.svg +Areas without map data. + +```svg + + + + +``` + +- 0_3.svg + +
+Click see full SVG data + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +
+ +- 1_0.svg +Areas without map data. + +```svg + + + + +``` + +- 1_1.svg + +
+Click see full SVG data + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +
+ +- 1_2.svg + +
+Click see full SVG data + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +
+ +- 1_3.svg + +
+Click see full SVG data + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +
+ +- 2_0.svg + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +- 2_1.svg + +
+Click see full SVG data + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +
+ +- 2_2.svg + +
+Click see full SVG data + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +
+ +- 2_3.svg +Areas without map data. + +```svg + + + + +``` + +- 3_0.svg + +
+Click see full SVG data + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +
+ +- 3_1.svg + +
+Click see full SVG data + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +
+ +- 3_2.svg +Areas without map data. + +```svg + + + + +``` + +- 3_3.svg +Areas without map data. + +```svg + + + + +``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3b/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3b/index.md new file mode 100644 index 0000000..1357c0c --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3b/index.md @@ -0,0 +1,131 @@ +# Tutorial 3b: Tiling (Creating static tiles with svgMapTools) + +## Introduction {#introduction} + +In the previous chapter, we used tiles that had already been created, but here we will use svgMapTools to create and display tile data from a shapefile. +[Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html) to see it in action. + +### File Structure {#file-structure} + +The file structure is as follows: + +- The [tutorial3b](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b/) directory contains the following files: + - https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b/ +- Using svgMapTools, some of the Global Map Japan data was converted into tiled SVGMap content. + - For information on the tiling performed by svgMapTools (Quad Tree Composite Tiling), see [this document](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese). +- Display converted content as a layer + +## Tutorial {#tutorial} + +### Files Used {#files-used} + +- [ZIP archive](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b.zip) file of used files + +### Preparing tiled content {#preparing-tiled-content} + +- In this chapter, we will use [svgMapTools](https://github.com/svgmap/svgMapTools/) to prepare tiled map content from a shapefile and display it. +Therefore, please [first follow the tutorial that includes setting up svgMapTools](https://github.com/svgmap/svgMapTools/tree/master/tutorials). +- In this tutorial, we will display data from [the Geospatial Information Authority of Japan's Global Map of Japan (file format: shapefile, vector geographic data)](https://www.gsi.go.jp/kankyochiri/gm_jpn.html). + - This time, we will display the coastline (coasstl), road (roadl), and urban area (surfaces (builtupa) and points (builtupp)) data as layers. + +#### Configuring svgMapTools {#configuring-svgmaptools} + +- Complete [the tutorial](https://github.com/svgmap/svgMapTools/tree/master/tutorials) including setting up svgMapTools + +#### Download source data {#download-source-data} + +- Download and unzip [the zip file containing all layers](https://www1.gsi.go.jp/geowww/globalmap-gsi/download/data/gm-japan/gm-jpn-all_u_2_2.zip) from [the Global Map Japan website](https://www.gsi.go.jp/kankyochiri/gm_jpn.html). + +#### Transform data and save content {#transform-data-and-save-content} + +Generates tiled content for an SVGMap from a Shapefile. + +Below is an example run on Windows. + +- ```cd [PATH_TO_DATA]``` +- ```mkdir roadl``` +- ```mkdir coastl``` +- ```mkdir builtup``` +- ```cd [PATH_TO_TOOLS]``` +- ```Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -showtile -densityControl 400 -lowresimage -strokefix 2 -color "#000000" [PATH_TO_DATA]\coastl_jpn.shp [PATH_TO_DATA]\coastl\coastl_jpn.svg``` +- ```Shape2ImageSVGMap [PATH_TO_DATA]\coastl\coastl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\coastl_jpn.shp "#000000" "#000000" 0 2``` +- ```Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -showtile -densityControl 400 -lowresimage -strokefix 2 -color "#00ff00" [PATH_TO_DATA]\roadl_jpn.shp -[PATH_TO_DATA]\roadl\roadl_jpn.svg``` +- ```Shape2ImageSVGMap [PATH_TO_DATA]\roadl\roadl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\roadl_jpn.shp "#00ff00" "#00ff00" 0 2``` +- ```Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupa_jpn.shp [PATH_TO_DATA]\builtup\builtupa_jpn.svg``` +- ```Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupp_jpn.shp [PATH_TO_DATA]\builtup\builtupp_jpn.svg``` +- ```Transfer all contents of [PATH_TO_DATA]\coastl, [PATH_TO_DATA]\roadl, [PATH_TO_DATA]\builtup to the host.``` + +Note: + +- [PATH_TO_TOOLS] is the tools directory of svgMapTools +- [PATH_TO_DATA] is the directory where you extracted the downloaded data +- builtupp_jpn and builtupa_jpn do not generate bit image tiles for small scales because the data size is not large (tiling is not actually necessary). + +### tutorial3b.html {#tutorial3b-html} + +It is essentially the same as [tutorial2b.html](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%AB2b#tutorial2b.html) used in [Tutorial 2b](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%AB2b). + +### Container.svg {#container-svg} + +- It is essentially the same as [Container.svg](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%AB2b#Container.svg) from [Tutorial 2b](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%AB2b). +- However, this time the coastline layer, road layer, and urban area (surface/point) layer are all tiled data. +- **The animation** elements representing each layer refer to the root file of the tiled SVGMap content generated by svgMapTools. +- To make the vector data clickable, add **clickable** to **the class attribute**. +- Additionally, OpenStreetMap has been added as a hidden layer at the bottom. + +```svg + + + + + + + + + + + + + + + + + + + +``` +### The structure of tiled content generated by svgMapTools {#structure-of-tiled-content} + +- All vector data (.svg format - for large-scale display) and raster data (.png format - for small-scale display) are referenced hierarchically from the layer's root content (in this example, coastline data, coastl_jpn.svg). +- Among .svg format data, those with the file name *cont* contain no vector graphics data and only reference data, referencing child and descendant content. + +```plaintext +coastl_jpn.svg + | + +-coastl_jpn/lvl3/tile1_0.png + +-coastl_jpn/lvl3/tile0_1.png + +-coastl_jpn/lvl3/tile1_1.png + | + +-coastl_jpn/lvl4/tile1_2.png + +-coastl_jpn/lvl4/tile2_2.png + +-coastl_jpn/lvl4/tile2_3.png + | + +-coastl_jpn_l1_2-3.svg + | + +-coastl_jpn_cont_l1_1-2.svg + | | + | +-coastl_jpn/lvl5/tile3_4.png + |+-*.png ... + |+-coastl_jpn_l2_2-5.svg + |+-*.svg ... + | +-coastl_jpn_cont_l4_14-20.svg + | | + |+-*.png ... + |+-*.svg ... + | + +-coastl_jpn_cont_l1_2-2.svg + | + +-*.png ... + +-*.svg ... +``` + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-4/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-4/index.md new file mode 100644 index 0000000..90a5347 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-4/index.md @@ -0,0 +1,164 @@ +# Tutorial 4: Bitmap Image Map Display + +## Introduction {#introduction} + +This is a tutorial that overlays some bitmap image maps onto the contents of Tutorial 1. +[Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html) to see it in action . + +### File Structure {#file-structure} + +The file structure is as follows: + +- [The tutrial4 directory](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html) contains the following files. + - [tutorial4.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html) + - HTML for Tutorial 4. Same content as tutrial1.html. + - [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/Container.svg) + - Load the bitmap image bitmapImage.svg to be displayed over the Coastline.svg file, which is the same as in Tutorial 1. + - [dynamicOSM_r11.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/dynamicOSM_r11.svg) + - The same OpenStreetMap layer as in Tutorial 2c +- Bitmap image SVG file to overlay. + - This was created using this tool: [a tool that layers bitmap map images onto SVGMap](https://svgmap.org/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mapPage/). + +## Tutorial {#tutorial} + +### Files Used {#files-used} + +- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4.zip) of used files +- Source: [Estimated damage from an earthquake directly beneath the capital, page 7](https://www.bousai.go.jp/kyoiku/bousai-vol/drill/h26/tokyo/tokyo03_kato.pdf#page=4) + +### tutorial4.html {#tutorial4-html} + +Basically the same as tutorial2b.html used in Tutorial 2b . + +- Loads the SVGMap core program file (SVGMapLv0.1_r18module.js) and makes various SVGMap APIs available. +- Load CSS for layer list UI +- Define the map display area (using a DIV) and load an SVG file (Containers.svg) that contains the layers to be displayed there (layers that are automatically made visible in the SVGMap core program above will be displayed). +- Defines the display of the zoom up, zoom down, and GPS buttons and their behavior when clicked (calling the respective APIs of the SVGMap core program). + - Zoom up button: Zooms up the map by calling the svgMap.zoomup() API. + - Zoom down button: Zooms down the map by calling the svgMap.zoomdown() API. + - GPS button: Calls the svgMap.gps() API to zoom in on the current location (the location of your PC or smartphone, if it can be determined). +- A cross mark indicating the center is displayed. +- Displays the latitude and longitude on the map indicated by the cross mark above (actually, displays the latitude and longitude of the center of the map when moving the map). +- Place a div element (id="layerList") for the layer list UI. + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial4 BitmapImageSVG + + + + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial4 BitmapImageSVG + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng + +
+
+ + +``` + +### Container.svg {#container-svg} + +- [As in Tutorial 2c](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%AB2c), the bitmap images bitmapImage.svg and dynamicOSM_r11.svg are loaded as layers. +- [As with the additional chapters in Tutorial 2c](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%AB2c#.E8.BF.BD.E5.8A.A0.EF.BC.9A.E8.83.8C.E6.99.AF.E5.9C.B0.E5.9B.B3.E3.82.92.E9.81.B8.E3.81.B9.E3.82.8B.E3.82.88.E3.81.86.E3.81.AB.E3.81.99.E3.82.8B), you can choose from two background maps (OpenStreetMap and Coastline.svg). + +```svg + + + + + + + + + + + + + +``` +### bitmapImage.svg {#bitmapimage-svg} + +- Bitmap image SVG file to overlay. + - Created using a [tool](https://svgmap.org/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mapPage/) that layers bit-image map images into SVGMap. + - The original bit image is extracted from the document at the beginning of this chapter. + +#### Relationship between longitude and latitude and XY coordinates of SVG content {#relationship-between-lon-lat-xy-coord} + +```globalCoordinateSystem transform``` Specified by the element attributes (six values ​​of the linear transformation matrix) + +``` +Xsvg = a * longitude + c * latitude + e +Ysvg = b * latitude + d * latitude + f +``` + +Since the values ​​of the linear transformation matrices a, b, c, d, e, and f are 1, 0, 0, -1, 0, 0 respectively, + +``` +Xsvg = longitude +Ysvg = -latitude +``` + +#### Image element parameters {#image-element-parameters} + +- The bit image is placed using the image element. + - ```xlink:href="[ビットイメージのURL]"``` URL of the bit image to be placed + - ```x="139.1063918412553"``` X origin of placement = western longitude (139.10°) + - ```y="-35.90355823638255"``` X origin to place = negative value of northernmost latitude (35.903°) + - ```width="0.8140711890480361"``` Width (0.81° longitude) + - ```height="0.41815015611484085"``` Height (0.41° latitude) + - ```preserveAspectRatio="none"``` Even if the aspect ratio of the actual size of the bit image is changed, it will be placed exactly in the specified area ([Reference: SVG spec](https://www.w3.org/TR/SVG2/coords.html#PreserveAspectRatioAttribute)) + +```svg + + + + + + + +``` + +### dynamicOSM_r11.svg (and dynamicOSM_r11.html) {#dynamicosm-r11-svg} + +This is the same as [dynamicOSM_r11.svg from Tutorial 2c](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%AB2c#dynamicOSM_r11.svg.E3.80.81.28dynamicOSM_r11.html.29). + +### Coastline.svg {#coastline-svg} + +This is the same one we have been using since [Tutorial 1](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%AB1#Coastline.svg). \ No newline at end of file