概述

用D3和ArcGIS結合做效果已經將近一年的時間，卻一直沒有時間整理部落格，將知識分享，終於，我的第一遍部落格將迎來了。

效果圖

具體流程

1.svg疊合ArcGIS Server釋出的地圖服務疊加展示，在ArcGIS Server的地圖中有一個svg標籤可以供D3來繪製。

var poitMoveSvg = d3.select("#" + map.id + "_gc")

2.用svg的animateMotion標籤來建立path路徑，達到小圓圓的按照路徑移動效果

g.append("circle")
  .attr("r", 5)
   .attr("fill"
 
, colorArr[2])
   .append('animateMotion')
   .attr('path', path)
   .attr('rotate', "auto")
   .attr('dur', "10s")
   .attr('repeatCount', "indefinite");

rotate：auto自動旋轉方向
dur：路徑執行完成時間
repeatCount：重複次數

3.svg的pauseAnimations與unpauseAnimations屬性控制斷點可以繼續運動，保證縮放和平移可以不出現間斷

/讓動畫時間停止
document.getElementById
 
("d3_svg").pauseAnimations()
//開始動畫
document.getElementById("d3_svg").unpauseAnimations()

4.新增地圖縮放和平移事件，重新整理資料進行更新

if (zoomEvent_e == null) {
    zoomEvent_e = map.on("zoom-end", mig1);
}
if (zoomEvent_s == null) {
    zoomEvent_s = map.on("zoom-start", d3Clear);
}
if (panEvent_e == null) {
    panEvent_e =
 
 map.on("pan-end", mig1);
}
if (panEvent_s == null) {
    panEvent_s = map.on("pan-start", d3Clear);
}

5.點移動原始碼，僅供參考

/清除按鈕，清除事件
    function clearClick() {
        zoomEvent_s.remove()
        zoomEvent_e.remove()
        panEvent_s.remove()
        panEvent_e.remove()
        zoomEvent_s = null;
        zoomEvent_e = null;
        panEvent_s = null;
        panEvent_e = null;
        d3.selectAll("#pointMove").remove();
        d3.selectAll("#d3_svg").remove();
    }


    //----------------------------------分割--------------------------------------------
    //點移動
    var migData1 = [
        [{
            x: 110.85099,
            y: -74.25962166
        }, {
            x: 134.537944,
            y: -99.363874
        }],
        [{
            x: 30.98670782,
            y: -60.99922008
        }, {
            x: 30.98670782,
            y: -51.998
        }, {
            x: 84.678,
            y: -53.744
        }, {
            x: 85.101,
            y: -56.739
        }],
        [{
            x: 30.98670782,
            y: -60.99922008
        }, {
            x: 30.98670782,
            y: -50.998
        }, {
            x: 84.678,
            y: -52.744
        }, {
            x: 93.25,
            y: -40.759
        }]
    ];

    function d3Clear() {
        d3.selectAll("#pointMove").remove();
    }

    function play() {
        //        給svg標籤transform屬性，讓svg沒有偏移
        var poitMoveSvg = d3.select("#" + map.id + "_gc")
            .attr("class", "svgTransform")
            .append("svg")
            .attr("id", "d3_svg");
        mig1()

        function mig1() {
            d3.selectAll("#pointMove").remove();
            //讓動畫時間停止
            document.getElementById("d3_svg").pauseAnimations()
            if (zoomEvent_e == null) {
                zoomEvent_e = map.on("zoom-end", mig1);
            }
            if (zoomEvent_s == null) {
                zoomEvent_s = map.on("zoom-start", d3Clear);
            }
            if (panEvent_e == null) {
                panEvent_e = map.on("pan-end", mig1);
            }
            if (panEvent_s == null) {
                panEvent_s = map.on("pan-start", d3Clear);
            }
            //將資料變為螢幕座標
            for (var i = 0; i < migData1.length; i++) {
                screenData = [];
                for (var index = 0; index < migData1[i].length; index++) {
                    screenData.push(map.toScreen(migData1[i][index]));
                }

                g = d3.select("#d3_svg")
                    .append("g")
                    .attr("id", "pointMove");
                //迴圈軌跡每一點生成path
                var path = ''
                for (var j = 0; j < screenData.length; j++) {
                    path += j == 0 ? ('M' + screenData[j].x + ',' + screenData[j].y) : ('L' + screenData[j].x + ',' +
                        screenData[j].y)
                }
                g.append("path")
                    .attr("d", path)
                    .attr("stroke", colorArr[0]) //顏色
                    .attr("fill", "none")
                    .attr("stroke-width", "2");
                g.append("circle")
                    .attr("r", 5)
                    .attr("fill", colorArr[2])
                    .append('animateMotion')
                    .attr('path', path)
                    .attr('rotate', "auto")
                    .attr('dur', "10s")
                    .attr('repeatCount', "indefinite");
                //開始動
                document.getElementById("d3_svg").unpauseAnimations()
            }
        }
    }    

原文連結