openlayer4在地图上绘制统计表格

最新推荐文章于 2024-01-30 19:54:16 发布

小木子。。。

最新推荐文章于 2024-01-30 19:54:16 发布

阅读量607

点赞数 4

分类专栏： openlayer 4 文章标签： openlayer绘制图表 openlayer绘制统计图

本文链接：https://blog.csdn.net/evil_0_0_0/article/details/86749054

版权

openlayer 4 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

小木子。。。

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
openlayer4在地图上绘制统计表格

在使用openlater开发的过程中，有时候会需要在地图上绘制一些数据的统计表格，openlayer官网还没有类类似的例子，网上大多数例子的实现原理是通过在地图上添加feature或overlay的形式，使用canvas绘制一张图片给feature设置样式，或在overlay里生成图表。具体代码如下（这个例子是使用feature，给feature设置样式，以绘制饼状图为例）：&lt;!DOC...
复制链接

扫一扫