openlayers3结合echarts3示例

最新推荐文章于 2022-01-26 16:23:39 发布

L.傲骨雄风

最新推荐文章于 2022-01-26 16:23:39 发布

阅读量1.8k

点赞数

分类专栏： openlayer

本文链接：https://blog.csdn.net/xlp789/article/details/83473748

版权

openlayer 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Ol3 popup</title>
	<link rel="stylesheet" type="text/css" href="./css/ol.css"/>
	<style type="text/css">
		body, #map {
			border: 0px;
			margin: 0px;
			padding: 0px;
			padding: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			font-size: 13px;
		}
          #chart{
			height: 200px;
			width: 200px;
		}
	</style>
	<script type="text/javascript" src="./js/ol.js"></script>
	<script type="text/javascript" src="./js/jquery.js"></script>
	<script src="./js/echarts.min.js"></script>
	<script src="./js/data.js"></script>
	<script type="text/javascript">
		function init(){
			var format = 'image/png';
			var bounds = [73.4510046356223, 18.1632471876417,
				134.976797646506, 53.5319431522236];
			var vectorSource = new ol.source.TileWMS({
				url: 'http://localhost:8080/geoserver/map/wms?service=WMS&version=1.1.0&request=GetMap&layers=map:capital&styles=&bbox=87.57607938302118,19.97015007757606,126.56705607814561,45.69385655384421&width=768&height=506&srs=EPSG:4326&format=application/openlayers',
                    params:{    
                          'LAYERS':'capital',
                          'TILED':false 	
                      }, 	  
			   serverType:'geoserver'		 
         
			});
			var untiled = new ol.layer.Tile({
				source: vectorSource
			});
			var chart = echarts.init(document.getElementById('chart'));
			chart.setOption(option); //echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个
			var map = new ol.Map({
				controls: ol.control.defaults({
					attribution: false
				}),
				target: 'map',
				layers: [new ol.layer.Tile({
							source: new ol.source.OSM(),
							projection:ol.proj.getTransform("EPSG:3857", "EPSG:4326")
						}),
						untiled],
				view: new ol.View({
					center:[117,42],
					projection:'EPSG:4326',
					zoom:6
				})
			});
			map.on('click', function(evt) {
			    var pt=evt.coordinate;
			    var pie = new ol.Overlay({
				position: pt,
				positioning: 'center-center',
				element: document.getElementById('chart')
			});
			map.addOverlay(pie);	
			});
}
</script>
</head>
<body onLoad="init()">
<div id="map"></div>
<div id="chart"></div>
</body>
</html>

./js/data.js

var data = [{name:'第一类',value:20},{name:'第二类',value:23},{name:'第三类',value:45},{name:'第四类',value:34},{name:'第五类',value:14}];
			var option = {
				tooltip: {
				  trigger: 'item',
				  formatter: "{b} : {c} ({d}%)"
				},
				toolbox:{
				  show:true,
				  feature : {
					  mark : {show: true},
					  magicType : {
						  show: true,
						  type: ['pie', 'funnel']
					  },
				  }
				},
				calculable: true,
				series: [{
					type: 'pie',
					radius: '40%',
					startAngle:'45',
					label: {
						normal: {
							show: false
						},
						emphasis: {
							show: false,
							textStyle:{
							  color: '#000000',
							  fontWeight:'bold',
							  fontSize:16
							}
						}
					},
					lableLine: {
					  normal: {
						  show: false
					  },
					  emphasis: {
						  show: false
					  }
					},
					data:data
				}]
			};

实现效果

L.傲骨雄风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
openlayers3结合echarts3示例

&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Ol3 popup&lt;/title&gt; &lt;link rel="stylesheet" type="te
复制链接

扫一扫