这次我们准备利用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
- 生成投影 和投影相对于的路径生成器
#生成路径生成器
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: [email protected]
当然，这个立体感是有问题的，有谁知道是什么问题吗？可以留言！