BIGEMPA Js API示例中心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<script src="http://www.bigemap.com/Public/js/d3.min.js"></script>
<title>地图</title>
</head>
<style>
</style>
<body>
<div class="fxmap">
</div>
</body>
<script type="text/javascript">
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/d3json/sichuan.json').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);
});
</script>
</html