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>