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);

    });//加入点击事件并获取坐标

巴特西

Vue + d3.js实现在地图上选点

最新文章

热门文章