Cesium+Echarts 饼状图

最新推荐文章于 2024-06-30 22:46:02 发布
牛code
最新推荐文章于 2024-06-30 22:46:02 发布
阅读量1k
点赞数 2
分类专栏： # Cesium场景
本文链接：https://blog.csdn.net/qq_25064691/article/details/115415632
版权
Cesium场景专栏收录该内容
5 篇文章 2 订阅
订阅专栏
效果图

在这里插入图片描述
代码

<!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>