手机赚钱

BIGEMPA Js API示例中間

單個輿圖展現源代碼展現

代碼編輯區 運轉 下載 復原
                                    <!DOCTYPE html>
<html lang="en">

<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://x1cialis10.com/reader/download/detail201802017.html
        -->
    <link href='http://x1cialis10.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://x1cialis10.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="http://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.min.js"></script>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    #world {
        width: 100%;
        height: 100vh;
        background: url('/Public/images/d3xk.jpg') no-repeat;
        /* overflow: hidden; */
        background-size: cover;
    }

    #svg {
        width: 1024px;
        height: 600px;
        margin: 0 auto;
        display: block;
    }

    #tooltip {
        opacity: 0;
        position: absolute;
        padding: 10px;
        background: #333333;
        border: 2px solid #e8e8e8;
        color: #33cc99;
        font-size: 14px;
        border-radius: 4px;
    }

    svg :hover {
        cursor: pointer
    }
</style>

<body>
    <div id="world">
        <svg id="svg" #svg></svg>
        <div id="tooltip"></div>
    </div>
</body>
<script>
    // /界說繪制的svg的巨細:
    var width = 1024;
    var height = 600;

    // /設置投影函數:
    var projection = d3.geoMercator()
        .scale(700)// 投影的比例因子,能夠按比例縮小投影。
        .center([105, 38])//將中間點設置為經度105,緯度38,這里恰好是中國輿圖的中間點。
        .translate([width / 2, height / 2]);// 將投影的中間設置為svg的中間。
    var path = d3.geoPath(projection);

    //色彩比例尺
    var colors = d3.scaleOrdinal(d3.schemeCategory10);



    $.get('/Public/offline/bounds/100000.geojson', function (data) {
        data = JSON.parse(data)
        console.log(data);
        var svg = d3.select('#svg')
            .attr('width', width)
            .attr('height', height);
        var g = svg.append('g')
        //.selectAll('path') 選中svg中一切婚配path的元素節點
        g.selectAll('path')
            //.data(data.features) 綁定以后挑選器和數據。data的操縱是“update”,標明挑選的dom元素已和數據停止了綁定
            .data(data.features)
            //.enter() 前往輸出(enter)挑選:以后挑選中存在,可是以后dom元素中還不存在的每一個數據元素的占位符節點。 
            .enter()
            //.append('path') 在以后挑選的每一個元素最初追加具備指命稱號的新元素,前往包羅追加元素的新挑選    
            .append('path')
            //.attr('d', path) 為一切選中元素設置稱號為”d”的屬性,值為path外面的每一個值。即給svg增加的path元素設置d屬性,d屬性的值是須要繪制的途徑
            .attr('d', path)
            //添補色彩
            .attr('fill', 'white')
            .transition()
            .duration(1000)
            .delay((d, i) => {
                return i * 500
            })
            .attr('fill', function (d, i) {
                return colors(i);
            })
            //邊款色彩
            .attr('stroke', 'rgba(255, 255, 255, 1')
            //邊框寬度
            .attr('stroke-width', 2);

        var price = []
        data.features.map((d, i) => {
            // console.log(d.properties);
            price.push([
                {
                    'name': d.properties.name,
                    'log': d.properties.center[0],
                    'lat': d.properties.center[1]
                },
            ])
        })
        console.log(price);
        //經由過程轉換的坐標來給svg增加g元素停止定點:
        var location = g.selectAll('.location')
            .data(price)
            .enter()
            .append('g')
            .attr('class', 'location')
            .attr('transform', (d) => {
                console.log(d[0]);
                var coor = projection([d[0].log, d[0].lat]);
                return 'translate(' + coor[0] + ',' + coor[1] + ')';
            });
        //經由過程定的點給svg的g元素增加circle元素,并添補色彩畫圓。
        location.append('circle')
            .attr('r', 5)
            .attr('fill', '#e91e63')
            .attr('class', 'location');

        //增加鼠標互動
        var tooltip = d3.select('#tooltip');
        //給svg的g標簽增加鼠標結果,鼠標一上去呈現tooltip筆墨,并將圓圈縮小二倍,且伴跟著延時動畫;鼠標移走也是一樣相反的動畫
        location.on('mou搜索引擎優化ver', function (d) {
            tooltip.html('以后都會:' + d[0].name)
                .style('left', d3.event.pageX + 20 + 'px')
                .style('top', d3.event.pageY + 20 + 'px')
                .style('opacity', 1);
            d3.select(this).select('circle').transition()
                .duration(150)
                .attr('r', 8);
        }).on('mou搜索引擎優化ut', function () {
            tooltip.style('opacity', 0);
            d3.select(this)
                .select('circle')
                .transition()
                .duration(150)
                .attr('r', 5);
        });

        //增加筆墨
        location.append('g').append('text').text(d => d[0].name).attr('font-size', 15)
            .attr('transform', 'translate(-8,2)').attr('fill', 'white')
        var zoom = d3.zoom()
            .scaleExtent([1, 8])
            .on("zoom", zoomed);
        function zoomed() {
            g.attr('transform', d3.event.transform)
        }
        svg.call(zoom)

    })






</script>

</html>                                                                                                                                                                                                
投资36元一天可以赚几百元 网赚