_cesium中引入echart">
当前位置:   article > 正文

Cesium+Echarts 饼状图_cesium中引入echart

cesium中引入echart

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="/static/Cesium/Cesium.js"></script>
    <script src="/static/echarts/echarts.js"></script>
    <link rel="stylesheet" href="/static/Cesium/Widgets/widgets.css">
   

    <style>
        html,
        body,
        #csiumContain {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        .cesium-widget-credits {
            display: none !important;
            /*去除Cesium默认版权信息*/
        }

        .tool-bar {
            position: absolute;
            top: 1vh;
            left: 2vw;
            z-index: 999999;
        }

        .cesium-viewer-infoBoxContainer {
            display: none !important;
        }
    </style>

</head>

<body>

    <div id="csiumContain"></div>


</body>
<script src="/static/js/jquery.min.js"></script>

<script>
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
    var viewer = new Cesium.Viewer("csiumContain", {
        homeButton: false,//是否显示Home按钮
        animation: false,//是否显示动画控件
        timeline: false,//是否显示时间线控件
        fullscreenButton: false,
        baseLayerPicker: false,//是否显示图层选择控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        geocoder: false, //是否显示地名查找控件
        sceneModePicker: false,//是否显示3D/2D选择器


    })

    //影像地图
    tdtLayer = this.viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
            url: "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default&format=tiles&tk=key",
            layer: "tdtCva",
            style: "default",
            format: "tiles",
            tileMatrixSetID: "c",
            subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            tilingScheme: new Cesium.GeographicTilingScheme(),
            tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
            // maximumLevel: 18,
            show: false
        })
    );
    //标记地图
    tdtLayer1 = this.viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
            url: "http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default&format=tiles&tk=key",
            layer: "tdtCva",
            style: "default",
            format: "tiles",
            tileMatrixSetID: "c",
            subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            tilingScheme: new Cesium.GeographicTilingScheme(),
            tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
            maximumLevel: 18,
            show: false
        })
    );

    option = {
        series: [
            {
                name: '姓名',
                type: 'pie',
                radius: '100%',
                center: ['50%', '50%'],
                data: genData(50).seriesData,
                label: {        //展示文本设置 
                    normal: {
                        show: false,
                    }
                }
            }
        ]
    };
    drawPie(option, viewer, { lon: 116.19777, lat: 39.03883 })
    option = {
        series: [
            {
                name: '姓名',
                type: 'pie',
                radius: '100%',
                center: ['50%', '50%'],
                data: genData(50).seriesData,
                label: {        //展示文本设置 
                    normal: {
                        show: false,
                    }
                }
            }
        ]
    };
    drawPie(option, viewer, { lon: 102.19777, lat: 39.03883, radius: 200000.0 })
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(116.19777, 39.03883, 10000000.0)
    });
    function drawPie(dataOption, veiwer, { radius = 100000.0, lon, lat } = {}) {
        let canvasDom = document.createElement('canvas');
        canvasDom.width = 400;
        canvasDom.height = 400;
        let myChart = echarts.init(canvasDom);
        myChart.setOption(option);
        myChart.on('finished', () => {
            let criclePrimitive = getCriclePrimitive(myChart, { radius, lon, lat })
            viewer.scene.primitives.add(criclePrimitive)
            myChart.dispose();
            myChart = null;
            canvasDom = null;
        })
    }
    function getCriclePrimitive(chart, { radius = 100000.0, lon, lat } = {}) {
        let circle = new Cesium.CircleGeometry({
            center: Cesium.Cartesian3.fromDegrees(lon, lat),
            radius: radius
        });
        let circleGeometry = Cesium.CircleGeometry.createGeometry(circle);
        let circleGeometryInstance = new Cesium.GeometryInstance({
            geometry: circleGeometry,
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
            }
        });
        let criclePrimitive = new Cesium.Primitive({
            geometryInstances: [
                circleGeometryInstance
            ],
            appearance: new Cesium.MaterialAppearance({
                material:
                    new Cesium.Material({
                        fabric: {
                            type: 'Image',
                            uniforms: {
                                image: chart.getDataURL()
                            }
                        }
                    })
            })
        })
        return criclePrimitive;
    }
    function genData(count) {
        let nameList = [
            '赵', '钱', '孙'
        ];
        let seriesData = [];
        for (let i = 0; i < 3; i++) {
            name = nameList[i];
            seriesData.push({
                name: name,
                value: Math.round(Math.random() * 100000)
            });
        }
        return {
            seriesData: seriesData
        };
    }

</script>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/728167
推荐阅读
相关标签
  

闽ICP备14008679号