🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 地理图 ## 需求 绘制一张世界地图 ## 分析 首先我们需要地图数据 目前d3支持[geojson](https://tools.ietf.org/html/rfc7946)格式化数据。d3的发起人[mbostock](https://github.com/mbostock)同时构建的了[topojson](https://github.com/topojson/topojson),可以将geojson减少80%以上的大小。可以将topojson转化为geojson。 绘制思路: 1. 我们需要将topojson转化为geojson,由于这是独立库不在d3中包含,所以需要单独引入。 2. 将topojson数据处理为geojson 3. 需要使用d3.geoPath()来绘制,d3提供多种投影,所以我们需要选用适合的投影方式。 4. 需要将数据绑定到path,调用geoPath进行绘制即可。 ## 绘制 ``` javascript //创建svg var svg = d3.select('#root') .append('svg') .attr('width', 1200) .attr('height', 600) .style("background-color","rgb(142, 137, 137)"); var margin=[100,100,100,100] var color = d3.scaleOrdinal(d3.schemeCategory20) var projection = d3.geoEquirectangular() //圆柱平面投影 var path = d3.geoPath(projection) var Graticule = d3.geoGraticule()//创建经纬线 d3.json('./world.json',function(error,world){ if (error) throw error; dataSet = topojson.mesh(world) console.log(dataSet) svg.insert("path", ".graticule") .datum(dataSet) .attr("d", path) .attr('fill','none') .attr('stroke','#000') }) ``` ## 实例 [geo0](https://doter1995.github.io/d3-start-course/geo/geo-0.html) ![](https://box.kancloud.cn/6e4ee508abb6bb29e6ba93c65f49c27e_1008x514.png) [地球仪](https://doter1995.github.io/d3/charts/geo/)使用geoOrthographic投影 ![](https://box.kancloud.cn/de0193307b81c91f6afe102683316b3e_631x512.png)