Echart在Openlayers的应用

概述

echart,一个由百度前端发起的canvas国产类库(官网:http://echarts.baidu.com/index.html)。echart其实是在canvas类库zrender的基础上做的主题图库,优点有数据驱动,图例丰富,功能强大,支持数据拖拽重计算,数据区域漫游等功能,不论是从使用便捷程度、美观程度等方面都是不错的选择,在本文讲述如何在Openlayers中结合echart实现地图统计图的展示。

效果

实现代码

1、piechart

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>openlayers map</title>
    <link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
    <style>
        html, body, #map{
            padding:0;
            margin:0;
            height:100%;
            width:100%;
            overflow: hidden;
        }
        .tool{
            position: absolute;
            top:10pt;
            right: 10pt;
            padding: 5px;
            background: #fff;
            border: 1px solid #ff5500;
            z-index: 1000;
        }
    </style>
    <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
    <script src="../../../plugin/jquery/jquery-1.8.3.js"></script>
    <script src="../../../plugin/echart/build/dist/echarts.js"></script>
    <script>
        require.config({
            paths: {
                echarts: '../../../plugin/echart/build/dist'
            }
        });
        var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,data:[
            {
                name: '男',
                value: 40.0
            },{
                name: '女',
                value: 60.0
            }
        ]},
            {name:"拉萨",x:91.1629975040,y:29.7104204643,data:[
                {
                    name: '男',
                    value: 45.0
                },{
                    name: '女',
                    value: 55.0
                }
            ]},
            {name:"北京",x:116.4575803581078,y:40.04054437977018,data:[
                {
                    name: '男',
                    value: 35.0
                },{
                    name: '女',
                    value: 65.0
                }
            ]},
            {name:"兰州",x:103.584297498,y:36.1190864503,data:[
                {
                    name: '男',
                    value: 44.0
                },{
                    name: '女',
                    value: 56.0
                }
            ]}];
        var map;
        var tiled;
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
        OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
        $(window).load(function() {
            var format = 'image/png';
            var bounds = new OpenLayers.Bounds(
                    73.45100463562233, 18.16324718764174,
                    134.97679764650596, 53.531943152223576
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.2403351289487642,
                projection: "EPSG:4326",
                units: 'degrees'
            };
            map = new OpenLayers.Map('map', options);
            var url = "http://localhost:8088/geoserver/lzugis/wms";
            tiled = new OpenLayers.Layer.WMS(
                    "Geoserver layers - Tiled",
                    url,
                    {
                        "LAYERS": 'lzugis:province',
                        "STYLES": '',
                        format: format
                    },
                    {
                        buffer: 0,
                        displayOutsideMaxExtent: true,
                        isBaseLayer: true,
                        yx : {'EPSG:4326' : true}
                    }
            );
            map.addLayers([tiled]);
            map.addControl(new OpenLayers.Control.Zoom());
            map.addControl(new OpenLayers.Control.Navigation());
            map.zoomToExtent(bounds);

            $("#addchart").on("click",function(){
                addMapChart();
                map.events.register("zoomend", map, function(){
                    addMapChart();
                });
            });
        });

        function addMapChart(){
            $(".olPopup").remove();
            var zoom = map.getZoom();
            for(var i=0;i<data.length;i++){
                var d = data[i];
                var size=30+(zoom-1)*10;
                var domid = "chart"+i;
                var content = "<div class='mapChart' id='"+domid+"' ></div>";
                var popup = new OpenLayers.Popup(domid,
                        new OpenLayers.LonLat(d.x,d.y),
                        new OpenLayers.Size(size,size),
                        content,
                        false);
                popup.setBackgroundColor("transparent");
                popup.setBorder("0px #0066ff solid");
                popup.keepInMap = false;
                map.addPopup(popup,false);
                addChart(domid,d);
            }
            var pops = $(map.div).find(".olPopup");
            for(var i=0;i<pops.length;i++){
                var pop = $(pops[i]);
                var top = pop.position().top,
                        left = pop.position().left;
                pop.css("top",(top-size/2)+"px").css("left",(left-size/2)+"px");
            }
        }
        function addChart(domid,data){
            require(
            [
                'echarts',
                'echarts/chart/pie'
            ],
                function (ec) {
                    // 基于准备好的dom,初始化echarts图表
                    var myChart = ec.init(document.getElementById(domid));
                    var option = {
                        // renderAsImage:true,
                        animation:true,
                        tooltip : {
                            trigger: 'item',
                            formatter: "{b}:{c}"
                        },
                        series : [
                            {
                                type:'pie',
                                radius : '100%',
                                center: ['50%', '50%'],
                                itemStyle:{
                                    normal: {
                                        labelLine:{show: false}
                                    },                        
                                },
                                data:data.data,
                                line:false
                            }
                        ]
                    };
                    // 为echarts对象加载数据
                    myChart.setOption(option);
                }
            );
        }
    </script>
</head>
<body>
<div id="map">
    <div class="tool">
        <button id="addchart">添加统计图</button>
    </div>
</div>
</body>
</html>

2、gaugechart

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>openlayers map</title>
    <link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
    <style>
        html, body, #map{
            padding:0;
            margin:0;
            height:100%;
            width:100%;
            overflow: hidden;
        }
        .tool{
            position: absolute;
            top:10pt;
            right: 10pt;
            padding: 5px;
            background: #fff;
            border: 1px solid #ff5500;
            z-index: 1000;
        }
    </style>
    <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
    <script src="../../../plugin/jquery/jquery-1.8.3.js"></script>
    <script src="../../../plugin/echart/build/dist/echarts.js"></script>
    <script>
        require.config({
            paths: {
                echarts: '../../../plugin/echart/build/dist'
            }
        });
        var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,value:22},
            {name:"拉萨",x:91.1629975040,y:29.7104204643,value:-10},
            {name:"北京",x:116.4575803581078,y:40.04054437977018,value:32},
            {name:"兰州",x:103.584297498,y:36.1190864503,value:25}];
        var map;
        var tiled;
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
        OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
        $(window).load(function() {
            var format = 'image/png';
            var bounds = new OpenLayers.Bounds(
                    73.45100463562233, 18.16324718764174,
                    134.97679764650596, 53.531943152223576
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.2403351289487642,
                projection: "EPSG:4326",
                units: 'degrees'
            };
            map = new OpenLayers.Map('map', options);
            var url = "http://localhost:8088/geoserver/lzugis/wms";
            tiled = new OpenLayers.Layer.WMS(
                    "Geoserver layers - Tiled",
                    url,
                    {
                        "LAYERS": 'lzugis:province',
                        "STYLES": '',
                        format: format
                    },
                    {
                        buffer: 0,
                        displayOutsideMaxExtent: true,
                        isBaseLayer: true,
                        yx : {'EPSG:4326' : true}
                    }
            );
            map.addLayers([tiled]);
            map.addControl(new OpenLayers.Control.Zoom());
            map.addControl(new OpenLayers.Control.Navigation());
            map.zoomToExtent(bounds);

            $("#addchart").on("click",function(){
                addMapChart();
                map.events.register("zoomend", map, function(){
                    addMapChart();
                });
            });
        });

        function addMapChart(){
            $(".olPopup").remove();
            var zoom = map.getZoom();
            for(var i=0;i<data.length;i++){
                var d = data[i];
                var size=60+(zoom-1)*10;
                var domid = "chart"+i;
                var content = "<div class='mapChart' id='"+domid+"' ></div>";
                var popup = new OpenLayers.Popup(domid,
                        new OpenLayers.LonLat(d.x,d.y),
                        new OpenLayers.Size(size,size),
                        content,
                        false);
                popup.setBackgroundColor("transparent");
                popup.setBorder("0px #0066ff solid");
                popup.keepInMap = false;
                map.addPopup(popup,false);
                addChart(domid,d);
            }
            var pops = $(map.div).find(".olPopup");
            for(var i=0;i<pops.length;i++){
                var pop = $(pops[i]);
                var top = pop.position().top,
                        left = pop.position().left;
                pop.css("top",(top-size/2)+"px").css("left",(left-size/2)+"px");
            }
        }
        function addChart(domid,data){
            require(
            [
                'echarts',
                'echarts/chart/gauge'
            ],
                function (ec) {
                    // 基于准备好的dom,初始化echarts图表
                    var myChart = ec.init(document.getElementById(domid));
                    var option = {
                        tooltip : {
                            formatter: "{c}℃"
                        },
                        series : [
                            {                                
                                type:'gauge',
                                radius:'80%',
                                min:-20,
                                max:40,
                                axisLine: {            // 坐标轴线
                                    lineStyle: {       // 属性lineStyle控制线条样式
                                        color: [[0.33, '#48b'],[0.8, '#228b22'],[1, '#ff4500']], 
                                        width: 4
                                    }
                                },
                                axisTick: {            // 坐标轴小标记
                                    splitNumber: 2,   // 每份split细分多少段
                                    length :12,        // 属性length控制线长
                                    lineStyle: {       // 属性lineStyle控制线条样式
                                        color: 'auto'
                                    }
                                },
                                axisLabel: { 
                                    show:false,
                                    interval:'auto',
                                    textStyle: {
                                        color: 'auto',
                                        fontFamily:'微软雅黑',
                                        fontSize: '10'
                                    }
                                },
                                splitLine: {
                                    show: true,
                                    length :16,   
                                    lineStyle: {       // 属性lineStyle控制线条样式
                                        color: 'auto'
                                    }
                                },
                                detail : {
                                    formatter:'{value}℃',
                                    textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                                        color: 'auto',
                                        fontWeight: 'bolder',
                                        fontSize: '15'
                                    }
                                },
                                data:[{value: data.value}]
                            }
                        ]
                    };
                    // 为echarts对象加载数据
                    myChart.setOption(option);
                }
            );
        }
    </script>
</head>
<body>
<div id="map">
    <div class="tool">
        <button id="addchart">添加统计图</button>
    </div>
</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Kurt Niu 的博客

我用C#写的CF外挂

        妈的,你就是想变瘦,你可以卖个减肥药什么的都可以,但是你卖女人就是不行。

51430
来自专栏生信技能树

一篇文章学会ChIP-seq分析(上)

写在前面:《一篇文章学会ChIP-seq分析(上)》《一篇文章学会ChIP-seq分析(下)》为生信菜鸟团博客相关文章合集,共九讲内容。带领你从相关文献解读、资...

3.4K60
来自专栏蓝天

软件版本Beta,RC,Demo,Build等是什么意思呢?

顾名思义么 ! 用在软件上就是候选版本。系统平台上就是发行候选版本。RC版不会再加入新的功能了,主要着重于除错。

10910
来自专栏Web 开发

暑假完了,又该找时间升级老Y了

嗯,上个暑假在电脑城,两个星期赚了千把块,就给老Y小小升级了一下,买了一条三星2G DDR3 1333内存和一块日立7K500硬盘

11000
来自专栏生信技能树

GEO数据挖掘-第一期-胶质母细胞瘤(GBM)

lncRNAs PVT1 and HAR1A are prognosis biomarkers and indicate therapy outcome for...

75760
来自专栏hightopo

HT for Web整合OpenLayers实现GIS地图应用

24010
来自专栏浅探ARKit

ARKit制作红包雨效果

新年快到了!给大家献上一个3D红包雨效果! #####思路: 1.用scenekit来创建红包模型 先创建一个长方体,此长方体厚度很薄 然后设置模型的cont...

40890
来自专栏CreateAMind

Yoshua Bengio 3篇强化学习论文学习disentangling 特征

14720
来自专栏落影的专栏

iOS音视频播放(Audio Unit播放音频+OpenGL ES绘制视频)

前言 相关文章: 使用VideoToolbox硬编码H.264 使用VideoToolbox硬解码H.264 使用AudioToolbox编码AAC 使...

57390
来自专栏CDA数据分析师

如果用R语言读《笑傲江湖》……

上周末,闲着没事就试了一个新的R中文文本分词包——jiebaR,支持Windows,支持简体及繁体中文,速度也很快,大家可以根据该包文档去学习,很容易上手!下面...

26860

扫码关注云+社区

领取腾讯云代金券