这次我们准备利用D3画一个中国地。
lib版本
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v2.min.js
如下图:
一. 目前中国地图的地理文件格式有两种,GeoJSON和TopoJSON。
GeoJSON
GeoJSON 是用于描述地理空间信息的数据格式。GeoJSON 不是一种新的格式,其语法规范是符合 JSON 格式的,只不过对其名称进行了规范,专门用于表示地理信息。
GeoJSON 的最外层是一个单独的对象(object)。这个对象可表示:
- 几何体(Geometry)
- 特征(Feature)
- 特征集合(FeatureCollection)
最外层的 GeoJSON 里可能包含有很多子对象,每一个 GeoJSON 对象都有一个 type 属性,表示对象的类型,type 的值必须是下面之一。- Point:点。
- MultiPoint:多点。
- LineString:线。
- MultiLineString:多线。
- Polygon:面。
- MultiPolygon:多面。
- GeometryCollection:几何体集合。
- Feature:特征。
- FeatureCollection:特征集合。
如下面代码
点对象:
{
"type": "Point",
"coordinates": [ -135, 39 ]
}
线对象:
{
"type": "LineString",
"coordinates": [[-135, 39 ], [-137, 38 ]]
}
面对象:
{
"type": "Polygon",
"coordinates":[[ [30, 0], [31, 0], [31, 5], [30, 5], [30, 0] ]]
}
由以上格式可以发现,每一个对象都有一个成员变量 coordinates。如果 type 的值为 Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon 之一,则该对象必须有变量 coordinates。
如果 type 的值为 GeometryCollection(几何体集合),那么该对象必须有变量 geometries,其值是一个数组,数组的每一项都是一个 GeoJSON 的几何对象。例如:
{
"type": "GeometryCollection",
"geometries": [
{
"type": "Point",
"coordinates": [100, 40]
},
{
"type": "LineString",
"coordinates": [ [100, 30], [100, 35] ]
}
]
}
如果 type 的值为 Feature(特征),那么此特征对象必须包含有变量 geometry,表示几何体,geometry 的值必须是几何体对象。此特征对象还包含有一个 properties,表示特性,properties 的值可以是任意 JSON 对象或 null。例如:
{
"type": "Feature",
"properties": {
"name": "北京"
},
"geometry": {
"type": "Point",
"coordinates": [ 116.3671875, 39.977120098439634]
}
}
如果 type 的值为 FeatureCollection(特征集合),则该对象必须有一个名称为 features 的成员。features 的值是一个数组,数组的每一项都是一个特征对象。
TopoJSON
TopoJSON 是 GeoJSON 按拓扑学编码后的扩展形式,是由 D3 的作者 Mike Bostock 制定的。相比 GeoJSON 直接使用 Polygon、Point 之类的几何体来表示图形的方法,TopoJSON 中的每一个几何体都是通过将共享边(被称为arcs)整合后组成的。
TopoJSON 消除了冗余,文件大小缩小了 80%,因为:
- 边界线只记录一次(例如广西和广东的交界线只记录一次)。
- 地理坐标使用整数,不使用浮点数。
引用来自ourd3js.com
二. 准备D3JS, 构建最简单的中国地图
上面已经说过了,地理的JSON文件分为TopoJSON 和GeoJSON, 现在我们使用TopoJSON来完成接下来的构建。
- 在项目中引入两个lib
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
- 生成投影 和投影相对于的路径生成器
#生成路径生成器
generatePath(scale) {
let self = this;
var projection = self.generateProjection(scale);
return d3.geoPath().projection(projection);
},
#生成投影
generateProjection(scale) {
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height");
return d3.geoMercator()
.center([105, 31])
.scale(scale)
.translate([width / 2, height / 2 + height / 6])
},
- 获取中国地图数据
initChinaMap() {
let self = this;
var path = self.generatePath(950);
var pathCubier = self.generatePath(958);
var color = function(i) {
return d3.color('#02005A');
};
var svg = d3.select("svg");
d3.json("/static/js/china-topo.json", function(error, root) {
if (error)
return console.error(error);
//画阴影背景
svg.append("g")
.attr("filter", "url(#f1)")
.attr("fill", "rgba(45,107,253,1)")
.attr('style', 'border: 1px solid #fff;')
.selectAll("path")
.data(topojson.feature(root, root.objects.china).features)
.enter()
.append("path")
.attr("stroke", "rgba(45,107,253,1)")
.attr("stroke-width", 1)
.attr("fill", "rgba(45,107,253,1)")
.attr("d", pathCubier)
.select('circle')
.data(topojson.feature(root, root.objects.china).features)
.enter()
.append("circle")
.attr('cx', '0')
.attr('cy', '0')
.attr('r', 500)
.attr('fill', 'transparent')
//画立体层级感
svg.append("g")
.attr("fill", "#59acc8")
.selectAll("path")
.data(topojson.feature(root, root.objects.china).features)
.enter()
.append("path")
.attr("stroke", "#59acc8")
.attr("stroke-width", 1)
.attr("fill", "#59acc8")
.attr("d", pathCubier)
//画中国地图
svg.append("g")
.attr("fill", "#02005A")
.selectAll("path")
.data(topojson.feature(root, root.objects.china).features)
.enter()
.append("path")
.attr("stroke", "#1C98C8")
.attr("stroke-width", 1)
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", path)
.append("title")
.text(function(d) {
// console.log("d", d)
return d.properties.name;
})
});
},
这里为了画出地图的立体效果和阴影效果, 将整个地图分成了 三部分,,先画阴影部分
再画立体部分
最后画地图具体的轮廓
最后,按照顺序合再一起就可以画出,有阴影,有立体的中国地图。
有任何问题,可以联系我
email: cheng_cong123@163.com
当然,这个立体感是有问题的,有谁知道是什么问题吗?可以留言!