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>
    <script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.min.js"></script>

</head>
<style>
    #map {
        width: 900px;
        height: 900px;
        background: #fff;
    }

    .tip {
        font-size: 40px;
        color: red;
        margin-bottom: 30px;
    }
</style>

<body>
    <div class="tip">地圖數據請前往bigemap地圖下載器進行下載</div>
    <div id="map"></div>
</body>
<script>
    d3.json('/Public/d3json/sichuan.json').then((data) => {
        //獲取地圖數據
        var root = data
        //定義畫布寬高
        var width = 900;
        var height = 900;
        //畫布
        var svg = d3.select("#map").append('svg')
            .attr('id', "mapSvg")
            .attr('width', width)
            .attr('height', height);
        //定義墨卡托投影
        var projection = d3.geoMercator()
            .center([104, 30])
            .scale(4400)
            .translate([width / 2+120, height / 2-100]);
        //定義繪制路勁
        var path = d3.geoPath()
            .projection(projection);

        //添加分組
        var mapG = svg.append('g')
            .attr('id', "mapG");

        var color = d3.scaleOrdinal(d3.schemeCategory10)
        //開始繪制地圖
        mapG.selectAll("path")
            .data(root.features)
            .enter()
            .append("path")
            .attr("class", "map-path")
            .attr("stroke", "#212121")
            .attr("stroke-width", 1)
            .attr("fill", (d, i) => color(i))
            .attr("style", "display:block")
            .attr("d", path);

        svg.append("g").attr("id", "pointG")
        pushData();

        //創建打點射線數據
        function pushData() {
            var data = [
                {
                    from: [104.71533203124997, 30.387304687499991],
                    to: [104.1115, 30.7071]
                },
               
            ];

            var index = 1;
            //定時器
            setInterval(function () {
                var n = data.length * Math.random();
                n = parseInt(n);
                if (n > 7) {
                    n = 7
                }

                var p = d3.select('#pointG').append('svg').attr('id', 'paper' + index);
                runAttack('paper' + index, data[n]);
                index++
            }, 400);


        }

        //繪制打點及連線
        function runAttack(id, data) {


            var height = 500;
            var width = 800;
            var s = Snap('#' + id);
            var projection = d3.geoMercator()
                .center([5, 32])
                .scale(140)
                .translate([width / 2, height / 2]);
            function makePro(arr) {
                var centroid = projection(arr),
                    x = centroid[0],
                    y = centroid[1];
                return [x, y]
            }
            var circleF = s.circle(makePro(data.from)[0], makePro(data.from)[1], 0);
            var circleT = s.circle(makePro(data.to)[0], makePro(data.to)[1], 0);
            var lineL = s.line(makePro(data.from)[0], makePro(data.from)[1], makePro(data.from)[0], makePro(data.from)[1]);

            circleF.attr({
                fill: "rgba(0,0,0,0)",
                stroke: "r()rgba(24,255,253,0.5)-#34A1FF",
                'stroke-width': "5px"
            });
            circleT.attr({
                fill: "#18FFFD",
                stroke: "r()#34A1FF-rgba(24,255,253,0.5)",
                'stroke-width': "8px"
            });
            lineL.attr({
                stroke: "L(" + makePro(data.to)[0] + "," + makePro(data.to)[1] + "," + makePro(data.from)[0] + "," + makePro(data.from)[1] + ")#18FFFD-rgba(0,225,132,0.1)",
                'stroke-width': "1px",
                fill: "rgba(0,0,0,0)"
            });

            circleF.animate({ r: 20, 'stroke-width': "1px" }, 600, function () {
                circleF.remove();
            });
            lineL.animate({ x2: makePro(data.to)[0], y2: makePro(data.to)[1] }, 500, mina.easeinout, function () {
                lineL.animate({ x1: makePro(data.to)[0], y1: makePro(data.to)[1], 'stroke-width': '0' }, 500, mina.easein, function () {
                    lineL.remove();
                })

                circleT.animate({ r: 10 }, 1000, function () {
                    circleT.remove();
                    s.remove();
                })
            });
        }
    })



</script>

</html>