D3.js 制作中国地图

2018-06-24 02:19:20来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

from:  http://d3.decembercafe.org/pages/map/index.html

GeoJSON is a format for encoding a variety of geographic data structures.

http://geojson.org/

https://msdn.microsoft.com/en-us/library/mt712806.aspx

GeoJSON 是用于描述地理空间信息的数据格式。GeoJSON 不是一种新的格式,其语法规范是符合 JSON 格式的,只不过对其名称进行了规范,专门用于表示地理信息。

GeoJSON 的最外层是一个单独的对象(object)。这个对象可表示:

几何体(Geometry)。

特征(Feature)。

特征集合(FeatureCollection)。

最外层的 GeoJSON 里可能包含有很多子对象,每一个 GeoJSON 对象都有一个 type 属性,表示对象的类型,type 的值必须是下面之一。

Point:点。

MultiPoint:多点。

LineString:线。

MultiLineString:多线。

Polygon:面。

MultiPolygon:多面。

GeometryCollection:几何体集合。

Feature:特征。

FeatureCollection:特征集合。

在线工具

在线生成 GeoJSON:http://geojson.io/

简化、转换 GeoJSON 和 TopoJSON:http://mapshaper.org/

 https://pypi.org/project/geojson/

https://github.com/d3/d3/wiki

<!DOCTYPE html>
<html lang="en">
  <head>  
        <meta charset="utf-8">  
        <title>中国地图</title>  
  </head> 
<style>

</style>
<body>
<script src="d3.v3.min.js"></script>
<script>
	var width  = 1000;
	var height = 1000;
	
	var svg = d3.select("body").append("svg")
	    .attr("width", width)
	    .attr("height", height)
	    .append("g")
	    .attr("transform", "translate(0,0)");
	
	var projection = d3.geo.mercator()
						.center([107, 31])
						.scale(850)
    					.translate([width/2, height/2]);
	
	var path = d3.geo.path()
					.projection(projection);
	
	
	var color = d3.scale.category20();
	
	
	d3.json("china.geojson", function(error, root) {
		
		if (error) 
			return console.error(error);
		console.log(root.features);
		
		svg.selectAll("path")
			.data( root.features )
			.enter()
			.append("path")
			.attr("stroke","#000")
			.attr("stroke-width",1)
			.attr("fill", function(d,i){
				return color(i);
			})
			.attr("d", path )
			.on("mouseover",function(d,i){
                d3.select(this)
                    .attr("fill","yellow");
            })
            .on("mouseout",function(d,i){
                d3.select(this)
                    .attr("fill",color(i));
            });
		
	});

</script>
	
</body>  
</html>  

  https://www.webdesignerdepot.com/2009/06/50-great-examples-of-data-visualization/

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:summernote富文本编辑器的使用

下一篇:koa-ueditor上传图片到七牛