在使用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的中文。英文没有最小的限制