上課剛好學到 webp 格式之前都想不到有啥運用，這次硬擠出一篇將 webp 用在圖磚上
webp html 使用可以參考這篇
萬一在 wsl 上面使用 imagemagick 批次轉換 webp 時發生以下錯誤
1
| convert-im6.q16: delegate failed `'cwebp' -quiet %Q '%i' -o '%o'' @ error/delegate.c/InvokeDelegate/1919.
|
只需要安裝 webp 就即可解決
1
2
| sudo apt-get install webp
convert author.jpg author.webp
|
詳細可以參考老外說明
https://askubuntu.com/questions/251950/imagemagick-convert-cant-convert-to-webp
https://imagemagick.org/script/webp.php
國土測繪中心圖磚 open data 下載
安裝 mapbox mbutil 下載位置
注意需要 python >= 2.6
1
2
| sudo apt-get install -y python-setuptools
sudo python setup.py install
|
將 mbtiles 匯出到 TaiwanEMap6 資料夾
1
| mb-util TaiwanEMap6.mbtiles TaiwanEMap6
|
bash 呼叫 imagemagick 遞迴轉換圖磚為 webp 格式，注意這個會執行很久要測試的話放個六層大概就差不多了，而且會從 0 => 1 => 11 => 12 這樣的順序跑，每次都忘了被這個雷
1
2
3
4
5
6
7
8
| #!/bin/bash
shopt -s globstar
shopt -s nullglob
for file in TaiwanEMap6/**/*.png
do
convert "$file" "${file/%.png}.webp"
done
|
測試 webp 格式地圖在 openlayers 上，應該可以減少不少流量，幸運女神眷顧好運成功!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
<style>
.map {
height: 100vh;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<title>webp example</title>
</head>
<body>
<h2>webp</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
//url: './TaiwanEMap6/{z}/{x}/{y}.png',
url: './TaiwanEMap6/{z}/{x}/{y}.webp',
//crossOrigin : 'anonymous'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([121.5, 22]),
zoom: 6
})
});
</script>
</body>
</html>
|