Vue + d3.js實現在地圖上選點

需求：用戶在地圖上單擊選點，頁面獲取到具體坐標並返回。

  首先比較重要的是Vue中的$nextTick，因為vue是異步更新的，如果是想打開Dialog或者是其他操作dom后才加載地圖，使用nextTick可以保證在dom加載之后進行加載。

this.$nextTick(() => {
      this.loadMap();
})

 

如果直接加載地圖，這時dom還沒有全部更新完畢，無法加載。

  接下來是初始化容器與加載地圖（這里不僅僅是地圖，也可以加載其他svg）

此部分為d3.js的應用，繪制矢量圖，選定容器，增加內容。

var svg = d3.select("#container").append("svg").attr("id", "svgRoot")
            .attr("width", width)
            .attr("height", height )
            .append("g")
            .attr("transform", "translate(10px)")
            .call(zoom);

加載地圖（從服務器獲取，url為服務器中svg的url）

d3.xml(url).mimeType("image/svg+xml")

可以加入Promise來判斷是否加載成功，成功后再執行之后的函數。

return new Promise(function(resolve, reject) {
        d3.xml(url).mimeType("image/svg+xml").get(function(err, xml) {
            if (err || !xml) {
                return reject(false);
            }
            return resolve();
        })
})

  最后是選點並且獲取坐標的部分。d3中有多個監聽函數，分成鼠標，鍵盤，觸屏這幾個部分。此次完成的是鼠標點擊。

container = svg.append("g").attr("id", "sub-root");
drawPoint(points, xy_num) {
    container.append('circle').attr({
        cx: points.x,
        cy: points.y,
        r: 5,
        class: "XY" + xy_num
    }).style({
        fill: color,
        stroke: color,
        'stroke-width': 2,
        'fill-opacity': .5
    });
}//點擊時出現的圓點樣式

 

svg.on("click", function() {
        if (d3.event.defaultPrevented)
            return;
        var coords = d3.mouse(this);
        var transform = (container.attr('transform')) ? container.attr('transform').split(')') : "";
        var translate = (transform && transform[0].includes('translate(')) ? transform[0].replace('translate(', '').split(',').map(val => parseFloat(val)) : [0, 0];
        var scale = (transform && transform[1].includes('scale(')) ? parseFloat(transform[1].replace('scale(', '')) : 1;
        coords[0] = (coords[0] - translate[0]) / scale;
        coords[1] = (coords[1] - translate[1]) / scale;
        drawPoint({ x: coords[0], y: coords[1] }, 1);
    });//加入點擊事件並獲取坐標