使用D3.js创建物流地图的示例代码

日期：2020-05-11 栏目：程序人生浏览：次

本文介绍了使用D3.js创建物流地图的示例代码，分享给大家，具体如下：

示例图

制作思路

需要绘制一张中国地图，做为背景。
需要主要城市的经纬坐标，以绘制路张起点和终点。
接收到物流单的城市，绘制一个闪烁的标记。
已经有过物流单的目标城市，不再绘制路线。
每次新产生一笔物流单，都有一个标记沿路线移向目标的动画效果。
绘制结束后的数据，需要清理掉，以减少对浏览器的资源占用。

开始撸码

1.创建网页模板

加载D3JS，为了方便调试，直接下载d3.js文件在本地，实际使用的时候，可以换成加载路径。注意，使用的是V4版的D3，和V3版有差异。

创建一个DIV块，准备绘图。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf8">
    <script type="text/javascript" src="../../static/d3/d3.js"></script>
    <title>地图</title>
  </head>
  <body>
    <div class="fxmap">
    </div>
  </body>
  <script type="text/javascript"></script>
</html>

创建SVG，以下所有代码放在<script></script>中

var width=1000 , height=800; // 定义SVG宽高
var svg = d3.select("body div.fxmap")
            .append("svg")
            .attr("width", "width) 
            .attr("height", height)
            .style("background","#000"); //

创建SVG图形分组，以备调用

gmp，保存背景地图和起点标记。
mline，保存起点和目标之间的连线，以及目标点。
buttion，测试用的按钮

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");

创建投影函数

经纬度不能直接用来绘图，需要转换成平面坐标。d3js提供了比较丰富的投影方法，本例中使用了geoEquirectangular()方法。
projection 是将经纬度转换为平面坐标的方法
path 是将经纬度转换为连线绘制点坐标的方法（省得自己再写函数构造path路径）

var projection = d3.geoEquirectangular()
              .center([465,395]) // 指定投影中心，注意[]中的是经纬度
              .scale(height)
              .translate([width / 2, height / 2]);
var path = d3.geoPath().projection(projection);

转载注明出处：http://www.heiqu.com/462.html

使用D3.js创建物流地图的示例代码

相关推荐