<strong id="9webe"></strong>

      <b id="9webe"></b>
      <video id="9webe"></video>

      <thead id="9webe"></thead>

        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://www.7win7win.com/reader/download/detail201802017.html
                -->
            <link href='http://www.7win7win.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.7win7win.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
            <script src="http://www.7win7win.com/Public/common/js/jquery.min.js"></script>
            <script src="http://www.7win7win.com/Public/js/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('mouseover', 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('mouseout', 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>