SVG实例之中国地图

SVG 做地图具有可以任意比例放大缩小不失真的优点。本例基于d3.js的svg制作。

地图数据用GeoJSON存储。GeoJSON 是基于JSON 的、为Web 应用而编码地理数据的一个标准。实际上，GeoJSON 并不是另一种格式，而只是JSON 非常特定的一种使用方法。

网上有很多免费的GeoJSON下载，本例子中国地图GeoJSon 可以从本例源码 下载

1.获取d3

在项目中引入即可， <script src="http://d3js.org/d3.v3.min.js"></script>

2.创建svg

var width = 960, height = 500;
var svg = d3.select("body")
 .append("svg")
 .attr("width", width)
 .attr("height", height);

3.创建投影(projection)

var projection = d3.geo.mercator().translate([width / 2, height / 2]).center([105, 38]).scale(550);

4.创建path

var path = d3.geo.path().projection(projection);

5. 解析json

d3.json("china.geo.json", function(json) {

 svg.selectAll("path")
 .data(json.features)
 .enter()
 .append("path")
 .attr("d", path)
 .on('mouseover', function(data) {
 d3.select(this).attr('fill', 'rgba(2,2,139,0.61)');

 //创建显示tooltip用的矩形
 svg.append("rect")
 .attr("id", "tooltip1")
 .attr("x", 50)
 .attr("y",50)
 .attr("width",140)
 .attr("height",130)
 .attr("stroke","black")
 .attr("fill","none")
 ;

 //创建显示tooltip文本
 svg.append("text")
 .attr("id", "tooltip2")
 .attr("x", 100)
 .attr("y", 100)
 .attr("text-anchor", "middle")
 .attr("font-family", "sans-serif")
 .attr("font-size", "11px")
 .attr("font-weight", "bold")
 .attr("fill", "black")
 .text(data.properties.name);
 })
 .on('mouseout', function(data) {
 d3.select(this).attr('fill', 'rgba(128,124,139,0.61)');
 //Remove the tooltip
 d3.select("#tooltip1").remove();
 d3.select("#tooltip2").remove();
 })
 .attr('fill', 'rgba(128,124,139,0.61)')
 .attr('stroke', 'rgba(255,255,255,1)')
 .attr('stroke-width', 1)
 ;
});

完整源码下载

中国地图GeoJSON

查看例子