BIGEMPA Js API示例中心

物流数据展示源代码展示

代码编辑区 运行 下载 还原
                        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf8">
    <script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/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/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);
    });
</script>

</html