openlayers版本: v3.19.1-dist
统计图效果:
使用浏览器:谷歌80.0.3987.162(正式版本) (64 位)
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-Type" content="text/html; charset=UTF-8" /> <title>openlayers-统计图显示(中国区域高亮)</title> <link href="v3.19.1-dist/ol.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- 地图容器 --> <div id="mapCon" style="height: 95%;"></div> <!-- GDP图表容器 --> <div id="gdpChart" style="position: absolute;width:500px;height:380px"></div> </body> <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="v3.19.1-dist/ol-debug.js" type="text/javascript"></script> <script src="js/zondyClient.js" type="text/javascript"></script> <script src="js/echarts.min.js" type="text/javascript"></script> <script type="text/javascript"> var map; $(document).ready(function (){ // 初始化天地图图层 var layer1 = new Zondy.Map.TianDiTu({ layerType: Zondy.Enum.Map.TiandituType.VEC, projection: ol.proj.get('EPSG:4326'), // 天地图key token: "e83d04f3e04272b8d9e91615e309fe36" }); // 初始化地图容器 map = new ol.Map({ target: "mapCon", layers: [layer1], view: new ol.View({ center: [109.05167, 31.78305],// 地图中心点(天地图里面的经纬度) zoom: 5, minZoom: 5,// 最大缩放级别 maxZoom: 5,// 最小缩放级别 projection: "EPSG:4326" }) }); // 禁止鼠标拖动 disabledMove(); // 显示中国区域 displayChina(); // 创建图表对象 var chart = new ol.Overlay({ // 设置图表显示位置 position: [109.05167, 31.78305], // 上面的经纬度就是图表的左上角、所以这里需要修补一下位置、类似css的top、margin(单位px) offset: [-260, -190], // 指定这个图表对象使用的是那个Div element: document.getElementById("gdpChart") }); // 把图表对象添加到地图容器中 map.addOverlay(chart); // 初始化GDP图表 initCharts(); }); /** 禁止鼠标拖动 */ function disabledMove(){ let pan = getFun(); pan.setActive(false); function getFun() { let pan; map.getInteractions().forEach(function(element, index, array) { if(element instanceof ol.interaction.DragPan) { pan = element; } }) return pan; } } /** 显示中国区域 */ function displayChina(){ var queryStruct = new Zondy.Service.QueryFeatureStruct(); //是否包含几何图形信息 queryStruct.IncludeGeometry = true; //是否包含属性信息 queryStruct.IncludeAttribute = true; //是否包含图形显示参数 queryStruct.IncludeWebGraphic = false; var queryParam = new Zondy.Service.QueryByLayerParameter("gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界政区", { resultFormat: "json", struct: queryStruct }); //设置查询分页号 queryParam.pageIndex = 0; //设置查询要素数目 queryParam.recordNumber = 20; //设置属性条件 queryParam.where = "name='中国'"; //实例化地图文档查询服务对象 var queryService = new Zondy.Service.QueryLayerFeature(queryParam, { ip: "develop.smaryun.com", port: "6163" }); queryService.query(function(result){ //初始化Zondy.Format.PolygonJSON类 var format = new Zondy.Format.PolygonJSON(); //将MapGIS要素JSON反序列化为ol.Feature类型数组 var features = format.read(result); //实例化一个矢量图层drawLayerr用于高亮显示结果 var drawSource = new ol.source.Vector({ //是否在地图水平坐标轴上重复 wrapX: false }); drawSource.addFeatures(features); drawLayer = new ol.layer.Vector({ source: drawSource, style: new ol.style.Style({ //填充色 fill: new ol.style.Fill({ color: 'gray' }), //边线样式 stroke: new ol.style.Stroke({ color: 'rgba(255,204, 51, 1)', width: 1 }) }) }); map.addLayer(drawLayer); }, function (){}); } /** 初始化GDP图表 */ function initCharts() { var myChart = echarts.init(document.getElementById("gdpChart")); var option = { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: ['上海', '北京', '深圳', '广州', '重庆', '苏州', '成都'], axisTick: { alignWithLabel: true } } ], yAxis: [ { type: 'value' } ], series: [ { name: '2019年经济GDP(亿)', type: 'bar', barWidth: '60%', data: [38155.32, 35371.30, 26927.09, 23628.60, 23605.77, 19235.80, 17012.65] } ] }; myChart.setOption(option); } </script> </html>