物流数据展示源代码展示

地图

var width = 1000, height = 800; // 定义SVG宽高

var color = d3.scaleOrdinal(d3.schemeCategory10)

//添加画布

var svg = d3.select("body div.fxmap")

.append("svg")

.attr("width", width)

.attr("height", height)

.style("background", "#000")

.style('opacity', '.7');

gmap = svg.append("g").attr("id", "map").attr("stroke", "white").attr("stroke-width", 1);

mline = svg.append("g").attr("id", "moveto").attr("stroke", "#FFF").attr("stroke-width", 1.5).attr("fill", "#FFF");

button = svg.append("g").attr("id", "button").attr("stroke", "white").attr("stroke-width", 1).attr("fill", "white");

var projection = d3.geoEquirectangular()

.center([465, 395]) // 指定投影中心，注意[]中的是经纬度

.scale(height)

.translate([width / 2, height / 2]);

//地图路径设置

var path = d3.geoPath().projection(projection);

//添加标记点

marker = svg.append("defs")

.append("marker")

.append("marker")

.attr("id", "pointer")

.attr("viewBox", "0 0 12 12") // 可见范围

.attr("markerWidth", "12") // 标记宽度

.attr("markerHeight", "12") // 标记高度

.attr("orient", "auto") //

.attr("markerUnits", "strokeWidth") // 随连接线宽度进行缩放

.attr("refX", "6") // 连接点坐标

.attr("refY", "6")

// 绘制标记中心圆

marker.append("circle")

.attr("cx", "6")

.attr("cy", "6")

.attr("r", "3")

.attr("fill", "white");

// 绘制标记外圆，之后在timer()中添加闪烁效果

marker.append("circle")

.attr("id", "markerC")

.attr("cx", "6")

.attr("cy", "6")

.attr("r", "5")

.attr("fill-opacity", "0")

.attr("stroke-width", "1")

.attr("stroke", "white");

// 记录长沙坐标

var changsha = projection([112.59, 28.12]);

// 读取地图数据，并绘制中国地图

mapdata = [];

d3.json('/Public/offline/bounds/100000.geojson').then(function (data) {

console.log(data);

// 读取地图数据

mapdata = data.features;

console.log(mapdata);

// 绘制地图

gmap.selectAll("path")

.data(mapdata)

.enter()

.append("path")

.attr("d", path)

.attr('fill', (d, i) => color(i));

// 标记长沙 起始点

gmap.append("circle").attr("id", "changsha")

.attr("cx", changsha[0])

.attr("cy", changsha[1])

.attr("r", "6")

.attr("fill", "yellow")

gmap.append("circle").attr("id", "changshaC")

.attr("cx", changsha[0])

.attr("cy", changsha[1])

.attr("r", "10")

.attr("stroke-width", "2")

.attr("fill-opacity", "0");

// 创建对象，保存每个城市的物流记录数量

var citylist = new Object();

// 创建方法，输入data坐标，绘制发射线

var moveto = function (city, data) {

var pf = { x: projection([112.59, 28.12])[0], y: projection([112.59, 28.12])[1] };

var pt = { x: projection(data)[0], y: projection(data)[1] };

var distance = Math.sqrt((pt.x - pf.x) ** 2 + (pt.y - pf.y) ** 2);

if (city in citylist) {

citylist[city]++;

} else {

mline.append("line")

.attr("x1", pf.x)

.attr("y1", pf.y)

.attr("x2", pt.x)

.attr("y2", pt.y)

.attr('fill', 'red')

.attr("marker-end", "url(#pointer)")

.style("stroke-dasharray", " " + distance + ", " + distance + " ")

.transition()

.duration(distance * 30)

.styleTween("stroke-dashoffset", function () {

return d3.interpolateNumber(distance, 0);

});

citylist[city] = 1;

};

mline.append("circle")

.attr("cx", pf.x)

.attr("cy", pf.y)

.attr("r", 3)

.attr('fill', 'red')

.transition()

.duration(distance * 30)

.attr("transform", "translate(" + (pt.x - pf.x) + "," + (pt.y - pf.y) + ")")

.remove();

};

var scale = d3.scaleLinear();

scale.domain([0, 1000, 2000])

.range([0, 1, 0]);

var start = Date.now();

d3.timer(function () {

var s1 = scale((Date.now() - start) % 2000);

// console.log(s1);

gmap.select("circle#changshaC")

.attr("stroke-opacity", s1);

marker.select("circle#markerC")

.attr("stroke-opacity", s1);

});

var cityordinate = {

'哈尔滨': [126.5416150000, 45.8088260000],

'石家庄': [116.46, 39.92],

'北京': [116.39564503787867, 39.92998577808024],

'上海': [121.480539, 31.235929],

'广州': [113.271431, 23.135336],

'重庆': [106.558434, 29.568996],

'青岛': [120.38442818368189, 36.10521490127382],

'福州': [119.30347, 26.080429],

'兰州': [103.840521, 36.067235],

'贵阳': [106.636577, 26.653325],

'成都': [104.081534, 30.655822],

'西安': [108.946466, 34.347269],

'长春': [125.3306020000, 43.8219540000],

'台湾': [120.961454, 23.80406],

'呼和浩特': [111.7555090000, 40.8484230000],

'澳门': [113.5494640000, 22.1929190000],

'武汉': [114.3115820000, 30.5984670000],

'昆明': [102.71460113878045, 25.049153100453159],

'乌鲁木齐': [87.56498774111579, 43.84038034721766],

'益阳': [112.36654664522563, 28.58808777988717],

'南京': [118.77807440802562, 32.05723550180587],

'武昌': [114.35362228468498, 30.56486029278519],

};

// 随机获得目标城市

var cityname = [], total = 0;

for (var key in cityordinate) {

cityname[total++] = key;

};

//定时器开始生产点

setInterval(() => {

var _index = ~~(Math.random() * total);

moveto(cityname[_index], cityordinate[cityname[_index]]);

}, 1000);

});