html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

html5教程-Openlayers3中统计图的实现

发布时间：2018-12-14 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html5教程-Openlayers3中统计图的实现，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

概述：

在前文中讲到了在Arcgis for js中统计图的实现，在本文，讲述在Openlayers3中结合highcharts实现统计图。

实现：

在Openlayers3中实现统计图比较方便，通过ol.Overlay即可。首先，了解下Overlay。在OL3的借口文档中，Overlay的描述如下：

An element to be displayed over the map and attached to a single map location。

大概意思就是一个有空间位置的可以在地图上展示的要素。

关键代码：

 

    $("#addchart").on("click",function(){     for(var i=0;i
   function addChart(domid,data,size){    $('#'+domid).highcharts({     chart: {      backgroundColor: 'rgba(255, 255, 255, 0)',      plotBorderColor: null,      plotBackgroundColor: null,      plotBackgroundImage: null,      plotBorderWidth: null,      plotShadow: false,      width: size,      height: size     },     tooltip: {      pointFormat: '{point.percentage:.1f}%'     },     credits:{      enabled:false     },     title: {      text: ''     },     plotOptions:{      pie: {       dataLabels: {        enabled: false       }      }     },     series: [{      type: 'pie',      name: data.name,      data: data.data     }]    });   }
上述代码运行后的效果如下：

 

html5教程-Openlayers3中统计图的实现

上述示例的完整代码如下：

 
<script type="text/javascript" src="../../../plugin/ol3/build/ol-debug.js"></script><script type="text/javascript" src="../../../plugin/jquery/jquery-1.8.3.js"></script><script src="../../../plugin/highcharts/highcharts.js"></script><script type="text/javascript"> var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,data:[ { name: '男', y: 40.0, color:"#5ab1ef" },{ name: '女', y: 60.0, color:"#d87a80" } ]}, {name:"拉萨",x:91.1629975040,y:29.7104204643,data:[ { name: '男', y: 45.0, color:"#5ab1ef" },{ name: '女', y: 55.0, color:"#d87a80" } ]}, {name:"北京",x:116.4575803581078,y:40.04054437977018,data:[ { name: '男', y: 35.0, color:"#5ab1ef" },{ name: '女', y: 65.0, color:"#d87a80" } ]}, {name:"兰州",x:103.584297498,y:36.1190864503,data:[ { name: '男', y: 44.0, color:"#5ab1ef" },{ name: '女', y: 56.0, color:"#d87a80" } ]}]; var map; function init(){ var format = 'image/png'; var bounds = [73.4510046356223, 18.1632471876417, 134.976797646506, 53.5319431522236]; var tiled = new ol.layer.Tile({ visible: true, source: new ol.source.TileWMS({ url: 'https://localhost:8088/geoserver/lzugis/wms', params: {'FORMAT': format, 'VERSION': '1.1.1', tiled: true, LAYERS: 'lzugis:province', STYLES: '' } }) }); var projection = new ol.proj.Projection({ code: 'EPSG:4326', units: 'degrees' }); map = new ol.Map({ controls: ol.control.defaults({ attribution: false }), target: 'map', layers: [ tiled ], view: new ol.View({ projection: projection }) }); map.getView().fitExtent(bounds, map.getSize()); var view =map.getView(); $("#addchart").on("click",function(){ for(var i=0;i

"); var chart=new ol.Overlay({ position: pt, positioning: ol.OverlayPositioning.CENTER_CENTER, element: document.getElementById(domid) }); map.addOverlay(chart); addChart(domid,d,100); } }); } function addChart(domid,data,size){ $('#'+domid).highcharts({ chart: { backgroundColor: 'rgba(255, 255, 255, 0)', plotBorderColor: null, plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: null, plotShadow: false, width: size, height: size }, tooltip: { pointFormat: '{point.percentage:.1f}%' }, credits:{ enabled:false }, title: { text: '' }, plotOptions:{ pie: { dataLabels: { enabled: false } } }, series: [{ type: 'pie', name: data.name, data: data.data }] }); } </script>

 


概述：

在前文中讲到了在Arcgis for js中统计图的实现，在本文，讲述在Openlayers3中结合highcharts实现统计图。

实现：

在Openlayers3中实现统计图比较方便，通过ol.Overlay即可。首先，了解下Overlay。在OL3的借口文档中，Overlay的描述如下：

An element to be displayed over the map and attached to a single map location。

大概意思就是一个有空间位置的可以在地图上展示的要素。

关键代码：

 

    $("#addchart").on("click",function(){     for(var i=0;i
   function addChart(domid,data,size){    $('#'+domid).highcharts({     chart: {      backgroundColor: 'rgba(255, 255, 255, 0)',      plotBorderColor: null,      plotBackgroundColor: null,      plotBackgroundImage: null,      plotBorderWidth: null,      plotShadow: false,      width: size,      height: size     },     tooltip: {      pointFormat: '{point.percentage:.1f}%'     },     credits:{      enabled:false     },     title: {      text: ''     },     plotOptions:{      pie: {       dataLabels: {        enabled: false       }      }     },     series: [{      type: 'pie',      name: data.name,      data: data.data     }]    });   }
上述代码运行后的效果如下：

 

html5教程-Openlayers3中统计图的实现

上述示例的完整代码如下：

 
<script type="text/javascript" src="../../../plugin/ol3/build/ol-debug.js"></script><script type="text/javascript" src="../../../plugin/jquery/jquery-1.8.3.js"></script><script src="../../../plugin/highcharts/highcharts.js"></script><script type="text/javascript"> var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,data:[ { name: '男', y: 40.0, color:"#5ab1ef" },{ name: '女', y: 60.0, color:"#d87a80" } ]}, {name:"拉萨",x:91.1629975040,y:29.7104204643,data:[ { name: '男', y: 45.0, color:"#5ab1ef" },{ name: '女', y: 55.0, color:"#d87a80" } ]}, {name:"北京",x:116.4575803581078,y:40.04054437977018,data:[ { name: '男', y: 35.0, color:"#5ab1ef" },{ name: '女', y: 65.0, color:"#d87a80" } ]}, {name:"兰州",x:103.584297498,y:36.1190864503,data:[ { name: '男', y: 44.0, color:"#5ab1ef" },{ name: '女', y: 56.0, color:"#d87a80" } ]}]; var map; function init(){ var format = 'image/png'; var bounds = [73.4510046356223, 18.1632471876417, 134.976797646506, 53.5319431522236]; var tiled = new ol.layer.Tile({ visible: true, source: new ol.source.TileWMS({ url: 'https://localhost:8088/geoserver/lzugis/wms', params: {'FORMAT': format, 'VERSION': '1.1.1', tiled: true, LAYERS: 'lzugis:province', STYLES: '' } }) }); var projection = new ol.proj.Projection({ code: 'EPSG:4326', units: 'degrees' }); map = new ol.Map({ controls: ol.control.defaults({ attribution: false }), target: 'map', layers: [ tiled ], view: new ol.View({ projection: projection }) }); map.getView().fitExtent(bounds, map.getSize()); var view =map.getView(); $("#addchart").on("click",function(){ for(var i=0;i

"); var chart=new ol.Overlay({ position: pt, positioning: ol.OverlayPositioning.CENTER_CENTER, element: document.getElementById(domid) }); map.addOverlay(chart); addChart(domid,d,100); } }); } function addChart(domid,data,size){ $('#'+domid).highcharts({ chart: { backgroundColor: 'rgba(255, 255, 255, 0)', plotBorderColor: null, plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: null, plotShadow: false, width: size, height: size }, tooltip: { pointFormat: '{point.percentage:.1f}%' }, credits:{ enabled:false }, title: { text: '' }, plotOptions:{ pie: { dataLabels: { enabled: false } } }, series: [{ type: 'pie', name: data.name, data: data.data }] }); } </script>

 


觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-Openlayers3中统计图的实现全部内容，希望文章能够帮你解决html5教程-Openlayers3中统计图的实现所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：CSSHTML
猜你在找的html5相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程