基本概念

在本地地图上绘制图表，图表经过响应弹出来。

想想真是令人兴奋的事情，到时候用Qt的Widget和QGraphicsView结合QWebEngine搞一层。来一个科技感十足的魔幻页面。

下面来说明下这个逻辑。

使用Leaflet的WMTS接口请求本地Geoserver服务，从而获取数据。然后再把echarts放到Leaflet的响应事件里面。比如框。弹框的时候构造图表。通过这样的方式，即可完成地图上显示图标。

代码与实例

程序运行截图如下：

当选中某一个城市后！

源码如下：

test8.html


<!DOCTYPE html>
<html>
<head>
	
	<title>Hello World</title>
 
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
 
 
	<link rel="stylesheet" href="leaflet.css" />
    <script src="leaflet.js"></script>        
	<script src="leaflet-tilelayer-wmts-src.js"></script>
	<script src="echarts.js"></script>
 
	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		
		#map {
			width: 100%;
			height: 100%;
		}
		
		.chart{
			width: 600px;
			height: 300px;
			background-color: #fff;
		}
	</style>
 
	
</head>
<body>
<script src="test6.js" type="text/javascript"></script>
<div id='map'></div>
<script type="text/javascript">
 
 
	
   var ign = new L.TileLayer.WMTS( "http://XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" ,
                               {
                                   layer: 'GG_9:gg_9',
                                   tilematrixset: "EPSG:900913",
								   Format : 'image/png',
								   TileMatrix: 'EPSG:900913:8'
                               }
                              );
							  
	var map = L.map('map', {
		minZoom: 4,
		maxZoom: 7
	}).setView([32, 118], 7);
 
 
 
	L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);
 
	map.addLayer(ign);
 
	map.invalidateSize(true);
	
 
	//添加的数据
	function onEachFeature(feature, layer){
		
		var idStr = feature.geometry.properties.idStr.toString() ;
		var popupContent = '<div style="width:350px;height:300px" id="' + idStr + '"></div>';
		layer.bindPopup(popupContent, {});
		layer.on('popupopen', function(e){
		
			var myChart = echarts.init(document.getElementById(idStr));
			// 指定图表的配置项和数据
			var option = {
				title: {
					text: '测试'
				},
				tooltip: {},
				legend: {
					data:['销量']
				},
				xAxis: {
					data: ["衬衫","羊毛衫","雪纺衫","裤子"]
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10]
				}]
			};
 
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			});
	}
	
	L.geoJSON([bicycleRental], {
 
		onEachFeature: onEachFeature,
		pointToLayer: function (feature, latlng) {
		
			return L.circleMarker(latlng, {
				radius: 8,
				fillColor: "#ff7800",
				color: "#000",
				weight: 1,
				opacity: 1,
				fillOpacity: 0.8
			});
		}
	}).addTo(map)
 
	//添加的数据
	
</script>
 
 
 
</body>
</html>

test6.js


var bicycleRental = {
	"type" : "FeatureConllection",
	"features" : [
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [118.8, 32.05],
				"properties" : {
					"popupContent" : "南京",
					"idStr" : "njChart"
				}
			},
			"type" : "Feature",
			"id" : 100
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [119.2, 34.55],
				"properties" : {
					"popupContent" : "连云港",
					"idStr" : "lygChart"
				}
			},
			"type" : "Feature",
			"id" : 101
		},
				{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [118.26, 33.94],
				"properties" : {
					"popupContent" : "宿迁",
					"idStr" : "sqChart"
				}
			},
			"type" : "Feature",
			"id" : 102
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [119.12, 33.53],
				"properties" : {
					"popupContent" : "淮安",
					"idStr" : "haChart"
				}
			},
			"type" : "Feature",
			"id" : 103
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [120.15, 33.32],
				"properties" : {
					"popupContent" : "盐城",
					"idStr" : "ycChart"
				}
			},
			"type" : "Feature",
			"id" : 104
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [119.95, 32.40],
				"properties" : {
					"popupContent" : "泰州",
					"idStr" : "tzChart"
				}
			},
			"type" : "Feature",
			"id" : 105
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [119.41, 32.35],
				"properties" : {
					"popupContent" : "扬州",
					"idStr" : "yzChart"
				}
			},
			"type" : "Feature",
			"id" : 106
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [120.92, 31.94],
				"properties" : {
					"popupContent" : "南通",
					"idStr" : "ntChart"
				}
			},
			"type" : "Feature",
			"id" : 107
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [119.99, 31.755],
				"properties" : {
					"popupContent" : "常州",
					"idStr" : "czChart"
				}
			},
			"type" : "Feature",
			"id" : 108
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [120.33, 31.44],
				"properties" : {
					"popupContent" : "无锡",
					"idStr" : "wxChart"
				}
			},
			"type" : "Feature",
			"id" : 109
		},
		{
			"geometry" : {
				"type" : "Point",
				"coordinates" : [120.61, 31.26],
				"properties" : {
					"popupContent" : "苏州",
					"idStr" : "szChart"
				}
			},
			"type" : "Feature",
			"id" : 110
		}
	]
}