BIGEMPA Js API示例中心

3D柱状图数据展示源代码展示

代码编辑区 运行 下载 还原
                                    <!DOCTYPE html>
<html lang="en">

<style>
    body {
        background-image: url('./xk.jpg');
        background-repeat: no-repeat;
    }

    .tip {
        height: 100px;
        width: 200px;
        position: absolute;
        z-index: 00;
        top: 10px;
        left: 20px;
        color: wheat;
    }
</style>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
                以下CSS地址请在安装软件了替换成本地的地址
                CSS地址请使用:
                http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
                软件下载地址 http://www.bigemap.com/reader/download/detail201802017.html
            -->
    <link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
    <!--
                JS地址请使用:
                http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
            -->
    <script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.min.js"></script>

</head>

<body>
    <div class="d3"></div>
    <div class="tip">成都市XXXXXXX数据展示 如需其他城市 请前往Bigemap下载器下载地图</div>
</body>
<script>
    //软件配置信息地址,软件安装完成之后使用本地地址,如:http://localhost:9000
    BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
    // 在ID为map的元素中实例化一个地图,并设置地图的ID号为 bigemap.googlemap-streets,ID号程序自动生成,无需手动配置,并设置地图的投影为百度地图 ,中心点,默认的级别和显示级别控件
    // var map = BM.map('map', 'bigemap.googlemap-streets', { center: [33, 80], zoom: 4, zoomControl: true, attributionControl: false });

    // 基础数据初始化

    var width = 800
    var height = 750

    d3.json('/Public/d3json/sichuanxiaji.geojson').then((data) => {
        console.log(data);
        var mapColor = d3.scaleOrdinal(d3.schemeCategory10)
        var mapLineColor = '#0d67c7';
        // 绘制
        var svg = d3.select('.d3').append('svg')
            .attr('width', width).attr('height', height);
        // 定义地图的投影
        var projection = d3.geoMercator()
            .center([103.991184, 31])
            .scale(20000);
        // 定义地理路径生成器
        var path = d3.geoPath()
            .projection(projection);

        var darkmap = svg.append('g').attr('class', 'darkmap');

        var mapGroups = svg.append('g')
            .attr('class', 'mapGroups');


        //制作数据
        var mapdata = []
        BM.geoJson(data, {
            onEachFeature: function (feature, layer) {

                var latlngs = layer.getBounds().getCenter()
                mapdata.push([
                    {
                        'name': feature.properties.name,
                        'log': latlngs.lng,
                        'lat': latlngs.lat,
                        'num': Math.random() * 10,
                        'unit': '%'
                    },
                ])
            }
        })
        console.log(mapdata);
        //绘制阴影
        darkmap.selectAll('path')
            .data(data.features)
            .enter()
            .append('path')
            .attr('class', 'map-path')
            .style('fill', '#2f2727')
            .attr('stroke', 'white')
            .attr('d', path)
            .attr('transform', 'translate(20,10)');
        // 地图路径绘制
        console.log(data.features);
        mapGroups.selectAll('path')
            .data(data.features)
            .enter()
            .append('path')
            .attr('class', 'map-path')
            .style('fill', (d, i) => {
                return mapColor(i)
            })
            .attr('stroke', 'white')
            .attr('d', path);

        // // text地理名称
        mapGroups.selectAll('text')
            .data(mapdata)
            .enter()
            .append('text')
            .text((d) => d[0].name)
            .attr('font-size', '10')
            .attr('transform', (d) => {
                var coor = projection([d[0].log, d[0].lat]);
                return 'translate(' + coor[0] + ',' + coor[1] + ')';
            });;

        //绘制矩形
        var rectWidth = 13;
        var rectHeight = 60;   // 应根据计算得出,先默认柱体高度为60
        var rectColor = '#14a8f394';
        var rectLineColor = '#12ddda';

        var rect3dGroups = svg.append('g')
            .attr('class', 'rect3dGroups');
        var rect3d = rect3dGroups.selectAll('rect3d')
            .data(mapdata)
            .enter()
            .append('g')
            .attr('class', 'rect3d')
            .style('transform', (d, i) => {
                if (i === 15) {    // 都江堰市
                    return `translate(${0}px, ${-4 + 25}px)`;
                }
                if (i === 18) {    // 崇州市
                    return `translate(${0}px, ${-4 + -10}px)`;
                }
                if (i === 8) {    // 温江市
                    return `translate(${0}px, ${-4 + 30}px)`;
                }
                return 'translate(-20   px, -4px)';
            });
        // 定义柱体高度比例尺
        var maxData = d3.max(mapdata.map((item) => item[0].num));  // 最大增长率对应高度为60
        var rectHScale = d3.scaleLinear()   // 设置线性比例尺
            .domain([0, maxData])
            .range([0, 60]);
        // 绘制顶面
        rect3d.append('path')
            .transition()
            .duration(2000)
            .delay((d, i) => {
                return i * 200
            })
            .attr('d', (d) => {
                let rectHeight = 0;
                for (let i = 0; i < mapdata.length; i += 1) {
                    if (d[0].name.indexOf(mapdata[i][0].name.slice(0, -1)) !== -1) {
                        rectHeight = rectHScale(mapdata[i][0].num);
                    }
                }
                var coor = projection([d[0].log, d[0].lat]);
                return `M${coor[0]} ${coor[1] - rectHeight}l${rectWidth} ${-rectWidth}l${-rectWidth} ${-rectWidth}l${-rectWidth} ${rectWidth}z`
            })
            .attr('fill', rectColor)
            .attr('stroke', rectLineColor)
            .attr('stroke-width', 1)
            .attr('shape-rendering', 'crispedges')

        // 绘制侧面
        rect3d.append('path')
            .transition()
            .duration(1000)
            .delay((d, i) => {
                return i * 200
            })
            .attr('d', (d) => {
                let rectHeight = 0;
                for (let i = 0; i < mapdata.length; i += 1) {
                    if (d[0].name.indexOf(mapdata[i][0].name.slice(0, -1)) !== -1) {
                        rectHeight = rectHScale(mapdata[i][0].num);
                    }
                }
                var coor = projection([d[0].log, d[0].lat]);
                return `M${coor[0]} ${coor[1]} l0 ${-rectHeight} l${rectWidth} ${-rectWidth} l0 ${rectHeight} l${-rectWidth} ${rectWidth} l${-rectWidth} ${-rectWidth} l0 ${-rectHeight} l${rectWidth} ${rectWidth} z`
            })
            .attr('fill', rectColor)
            .attr('stroke', rectLineColor)
            .attr('stroke-width', 1)
            .attr('shape-rendering', 'crispedges')

        //定义猪蹄数据
        // // text地理名称
        mapGroups.selectAll('.zhutext')
            .data(mapdata)
            .enter()
            .append('text')
            .attr('class', 'zhutext')
            .text((d) => {
                var num = d[0].num
                return num.toFixed(1) + '%'
            })
            .attr('font-size', '15')
            .attr('transform', (d) => {
                var coor = projection([d[0].log, d[0].lat]);
                return 'translate(' + (coor[0] + 20) + ',' + (coor[1] - 20) + ')';
            })
            .attr('fill', 'blue');
    })

</script>

</html>