在使用openlater開發的過程中，有時候會需要在地圖上繪製一些數據的統計表格，openlayer官網還沒有類類似的例子，網上大多數例子的實現原理是通過在地圖上添加feature或overlay的形式，使用canvas繪製一張圖片給feature設置樣式，或在overlay裏生成圖表。具體代碼如下（這個例子是使用feature，給feature設置樣式，以繪製餅狀圖爲例）：
<!DOCTYPE html>
<html>
<head>
<title>Styling feature with CanvasGradient or CanvasPattern</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var layers_ = new ol.layer.Vector({
type: 'bingtu',
source: new ol.source.Vector(),
zIndex: 9999
});
// … finally create a map with that layer.
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layers_
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([7, 52]),
zoom: 3
})
});
var startAngle = -90, //餅圖起始角度
x0 = 100, //圓心x的座標
y0 = 100, //圓心y的座標
radius = 30, //圓的半徑
step = 0, //定義扇形增加角度的變量
line = 10, //畫線的時候超出半徑的一段線長
nullIndex = 0;
// 角度轉化爲弧度
function toRadian(angle) {
return angle / 180 * Math.PI;
}
//聲明一個用於展示統計圖信息的feature
var shape = new ol.Feature({
geometry: new ol.geom.Point([7, 52])
});
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext("2d");
//繪製餅狀圖下面的文字
ctx.textAlign = "center";
ctx.fillStyle = '#000';
ctx.fillText('餅圖', 100, 145);
//餅狀圖數據
var zhib = [{
zong: 100,
nums: 20,
colors: '#5c46e3'
}, {
zong: 100,
nums: 25,
colors: '#F23FE3'
}, {
zong: 100,
nums: 30,
colors: '#e34FE3'
}, {
zong: 100,
nums: 15,
colors: '#FFFFE3'
}, {
zong: 100,
nums: 10,
colors: '#4545E3'
}]
for(var j = 0; j < zhib.length; j++) {
if(zhib[j].zong > 0) {
ctx.beginPath(); //開啓新路徑
//根據數據計算增加的角度
step = zhib[j].nums * 360 / zhib[j].zong;
//計算線的角度
var lineAngle = startAngle + step / 2;
ctx.moveTo(x0, y0);
ctx.arc(x0, y0, radius, toRadian(startAngle), toRadian(startAngle += step));
//填充的顏色
ctx.fillStyle = zhib[j].colors;
ctx.fill();
}
}
//設置點的樣式
var style = new ol.style.Style({
image: new ol.style.Icon({
img: canvas,
imgSize: [canvas.width, canvas.height],
})
});
shape.setStyle(style);
layers_.getSource().addFeature(shape);
</script>
</body>
</html>
已上這種方法，對於實現簡單的表格還行，如果是比較複雜的表格就比較耗費時間。前段時間，在使用echarts的過程中發現可以獲取到echarts生成表格的圖片，因此，我們就可以利用echarts來簡化生成圖片的方式。具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>Styling feature with CanvasGradient or CanvasPattern</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var layers_ = new ol.layer.Vector({
type: 'bingtu',
source: new ol.source.Vector(),
zIndex: 9999
});
// … finally create a map with that layer.
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layers_
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([7, 52]),
zoom: 3
})
});
//聲明一個用於展示統計圖信息的feature
var shape = new ol.Feature({
geometry: new ol.geom.Point([7, 52])
});
var chartElement = document.createElement('div');
chartElement.style.width = '300px';
chartElement.style.height = '300px';
var chartImg = echarts.init(chartElement);
chartImg.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [{
name: '訪問來源',
type: 'pie',
radius: '35%',
center: ['50%', '60%'],
data: [{
value: 335,
name: '直接訪問'
},
{
value: 310,
name: '郵件營銷'
},
{
value: 234,
name: '聯盟廣告'
},
{
value: 135,
name: '視頻廣告'
},
{
value: 1548,
name: '搜索引擎'
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}],
animation: false,//關閉動畫這句必須加上，不然圖表出不來
});
var canvas_test = chartImg.getDataURL();
var charts_cu = document.createElement("img").setAttribute('src', canvas_test);
var style = new ol.style.Style({
image: new ol.style.Icon({
//img: charts_cu,
src: canvas_test,
anchor: [0.25, 0.25],
imgSize: [300, 300],
})
});
shape.setStyle(style);
layers_.getSource().addFeature(shape);
</script>
</body>
</html>
這個使用echarts的方式雖然方便，但是存在設置文字大小的問題。
Echarts在Chrome和搜狗瀏覽器下對於字體設置如果小於12的話就會按照12顯示。
但是在火狐瀏覽器則會正常顯示。
原因是在Chrome瀏覽器內將-webkit-text-size-adjust屬性給禁用了。
解決辦法：
①在瀏覽器高級設置裏面將最小字體改爲需要的值，但是不是每一個用戶都想去改動這個屬性。而對於有視覺障礙的人來說就很不友好。
②不設置小於12的中文。英文沒有最小的限制