<?xml version="1.0" encoding="UTF-8"?> <mapcache> <cache name="disk" type="disk"> <base>/opt/mapcache/cache</base> <symlink_blank/> </cache> <!-- <cache name="memcache" type="memcache"> <server> <host>localhost</host> <port>11211</port> </server> </cache> --> <source name="vmap0" type="wms"> <getmap> <params> <MAP>/opt/maps/raster2.map</MAP> <LAYERS>tokyo</LAYERS> <TRANSPARENT>TRUE</TRANSPARENT> </params> </getmap> <http> <url>http://127.0.0.1/cgi-bin/mapserv</url> <headers> <User-Agent>mod_mapcache</User-Agent> </headers> </http> </source> <tileset name="test"> <source>vmap0</source> <cache>disk</cache> <grid>GoogleMapsCompatible</grid> <format>PNG</format> <metatile>5 5</metatile> <metabuffer>10</metabuffer> <expires>3600</expires> </tileset> <default_format>PNG</default_format> <service type="wms" enabled="true"> <full_wms>assemble</full_wms> <resample_mode>bilinear</resample_mode> <format>PNG</format> <maxsize>4096</maxsize> </service> <service type="wmts" enabled="true"/> <service type="tms" enabled="true"/> <service type="kml" enabled="true"/> <service type="gmaps" enabled="true"/> <service type="ve" enabled="true"/> <service type="mapguide" enabled="true"/> <service type="demo" enabled="true"/> <errors>report</errors> <lock_dir>/tmp</lock_dir> <log_level>debug</log_level> </mapcache>
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css"> <style> .map { height : 480px; width : 800px; border : 1px solid black; } </style> <script src="https://openlayers.org/en/v4.0.1/build/ol.js" type="text/javascript"></script> <title>OpenLayers 3 example</title> </head> <body> <div id="map" class="map"></div> <div id="zoomlevel"></div> <script type="text/javascript"> var layers = [ new ol.layer.Tile({ source: new ol.source.TileWMS({ url : 'http://localhost:10080/cgi-bin/mapserv?map=/opt/maps/raster.map', params: { 'LAYERS' : 'wmap', }, wrapX: true }) }), new ol.layer.Tile({ source: new ol.source.TileWMS({ url : 'http://localhost:10080/mapcache?', params: { // these are simply added to http-get parameter 'LAYERS' : 'test', 'TRANSPARENT' : 'TRUE' }, wrapX: true }) }) ]; var mousePosition = new ol.control.MousePosition({ // coordinateFormat: ol.coordinate.createStringXY(2), coordinateFormat: ol.coordinate.toStringHDMS, projection: 'EPSG:3857', undefinedHTML: 'Outside' }); var map = new ol.Map({ target: 'map', layers : layers, view: new ol.View({ center: ol.proj.transform([135.0, 35.0], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }), controls: ol.control.defaults({ zoom: true, attribution: true, attributionOptions: /** @type {ol.control.ScaleLineUnits} */ ({ collapsible: false }), rotate: true }).extend([ mousePosition, new ol.control.ZoomSlider() ]) }); map.on("click", function(evt) { var zoom = map.getView().getZoom(); var zoomInfo = 'Zoom level = ' + zoom + ", Location = " + evt.coordinate; document.getElementById('zoomlevel').innerHTML = zoomInfo; }); </script> </body> </html>
# /usr/local/bin/mapcache_seed -c /opt/mapcache/mapcache.xml -t test -g GoogleMapsCompatible -M 4,4 -z 9,16 -e 15514882,4199042,15613638,4317060 -f seeded 45728 tiles, now at z9 x456 y312 seeded 2858 metatiles (45728 total tiles, 45728 non-empty tiles) in 1472.8 seconds at 31.0 tiles/sec (31.0 non-empty tiles/sec)Corei7 x 2Core で 30分くらいかかった。できたキャッシュは、
# du -sh /opt/mapcache/cache/ 1.5G /opt/mapcache/cache/さもありなん
-t <tileset> | sitemap.xml の tileset名 |
-g <grid> | sitemap.xml の gird名 |
-M <metasize> | 一度に取得するタイル。-M 8,8 にすると、WMS server error. Image size out of range, WIDTH and HEIGHT must be between 1 and 2048 pixels.というエラーが出る。タイルサイズを 256px にしているので 256 x 8 = 2048 で OK なはずだけど |
-z <zoom> | キャッシュを作成するZOOMレベル |
-e <extent> | 範囲(左下-右上)。今回投影法 (Projection) を EPSG:3857(GoogleMapsCompatible?) にしているので、指定する値は(緯度、経度)ではなく、(0°,0°)からのメートル |
-f | キャッシュにタイルがあっても上書きする |
高々 30 分キャッシュを温めればでサクサク動くようになるんで、OpenLayers3 のタイルサイズと同じ 256px x 256px でいいんじゃないですか