d3js-v4-map-1最简单的canvas地图

来源：互联网发布：鼎尖软件安卓版编辑：程序博客网时间：2024/06/08 05:27

实现一个简单的geoMap。

依赖库：d3js v4 canvas渲染

1. 最简单的实现：

    var width = 1300,        height = 800;    //定义一个地图映射    var projection = d3.geoMercator()            .center([100, 37])            .scale(850)            .translate([width/2, height/2]);    //在页面中插入一个canvas元素，并设置宽高    var canvas = d3.select("body").append("canvas")            .attr("width", width)            .attr("height", height);    //获得canvas绘图上下文    var context = canvas.node().getContext("2d");    //定义一个路径生成器    var mapPath = d3.geoPath()            .projection(projection)            .context(context);    //加在数据开始渲染地图    d3.json("data/china.topojson", function(error, us) {        if (error) throw error;        //一次性绘制整个地图轮廓        mapPath(topojson.feature(us, us.objects.collection));        context.stroke();    });

这时候在浏览器中可以看到渲染的中国地图（可惜没有包含中国领海，尤其是钓鱼岛）github

2.更实用的功能是，每个省份填充不同颜色，这样要对每个省份的多边形分别绘制：github

    d3.json("data/china.topojson", function(error, us) {        if (error) throw error;        var countries = topojson.feature(us, us.objects.collection);        countries.features.forEach(drawMapPath);    });    function drawMapPath(d) {        context.beginPath();        var color = mapColor(parseInt(d.properties.id) );        context.fillStyle= color;        context.strokeStyle=color;        context.globalAlpha=0.3;        mapPath(d);        context.stroke();        context.fill();    }

得到每个省份的地理路路径，然后对每个路径独立绘制，效果如下：

3.现在绘制的是静态的地图，加入移动缩放功能：github

    //给地图添加缩放范围和监听事件    canvas            .call(d3.zoom().scaleExtent([1, 36]).on("zoom", zoomed));    //当地图缩放后，获得缩放变换，重新渲染地图    function zoomed() {        transform = d3.event.transform;        render();    }    //在渲染程序中，对绘图上下文整体应用变换    function render() {        context.save();        context.clearRect(0, 0, width, height);        context.beginPath();        context.translate(transform.x, transform.y);        context.scale(transform.k, transform.k);        context.lineWidth=0.1;        context.globalAlpha=0.3;        countries.features.forEach(drawMapPath);        context.stroke();        context.fill();        context.restore();    }

4.然后添加省份标注 github

在绘制的时候，怎加绘制省份名称

    //绘制地图省份    function drawMapText(d) {        context.beginPath();        context.fillStyle='black';        context.fillText(                d.properties.name,                projection(d.properties.cp)[0],projection(d.properties.cp)[1]        );    }

效果如下：

阅读全文

0 0