from: http://d3.decembercafe.org/pages/map/index.html
GeoJSON is a format for encoding a variety of geographic data structures.
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/
<!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/