Vue + d3.js实现在地图上选点
Posted 番茄芥末饼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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实现在地图上选点的主要内容,如果未能解决你的问题,请参考以下文章