实现过程

加载数据

d3.queue().defer().await(){}可以理解成为d3异步加载多个csv文件，而d3.csv则是一次只能加载一个。

d3.queue()
    .defer(d3.json, 'geo_shanghai_full.json')
    .defer(d3.csv, 'site.csv')
    .defer(d3.csv, 'spot.csv')
    .defer(d3.csv, 'shop.csv')
    .defer(d3.csv, 'schedulePenalty.csv')
    .await(function(error, shanghaiMapData, siteData, spotData, shopData, scheduleData) {}

定义投影坐标系

var projection = d3.geoMercator()
    .center([121.5, 31.1]) //最终要换成上海的中心坐标
    .scale(40000)
    .translate([canvasWidth / 2, canvasHeight / 2]) //渲染容器的中心点

初始化路径

使用d3.geoPath(),将之前定义好的projection赋给path
d3.geoPath：给定GeoJSON几何或要素对象，它会生成SVG路径数据字符串或将路径呈现到Canvas。建议使用Canvas进行动态或交互式投影以提高性能。路径可以与投影或变换一起使用，也可以用于将平面几何直接渲染到画布或SVG。

 var path = d3.geoPath()
       .projection(projection)
       .context(context)

绘图

mapData.features.forEach(d => {
         context.beginPath()
         path(d)
         context.strokeStyle = 'rgba(255, 255, 255, 0.2)'
         context.lineWidth = 1
         context.stroke()
 })

完整代码如下：

<html>
    <head>
        <meta charset=utf-8 />
        <title>drawcanvasmap</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    </head>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
        }
        
        body {
            background-color: black;
        }
    </style>

    <body>
        <canvas id="shanghaiMap"></canvas>
        <!-- Example data. -->
        <script src="d3.js"></script>
        <script src="http://d3js.org/d3.v4.0.0-alpha.44.min.js"></script>
        <script>
            var canvasWidth = window.innerWidth
            var canvasHeight = window.innerHeight

            var projection = d3.geoMercator()
                .center([121.5, 31.1]) //最终要换成上海的中心坐标
                .scale(40000)
                .translate([canvasWidth / 2, canvasHeight / 2]) //渲染容器的中心点

            d3.queue()

                .defer(d3.json, 'geo_shanghai_full.json')
                .defer(d3.csv, 'site.csv')
                .defer(d3.csv, 'spot.csv')
                .defer(d3.csv, 'shop.csv')
                .defer(d3.csv, 'schedulePenalty.csv')
                .await(function(error, shanghaiMapData, siteData, spotData, shopData, scheduleData) {
                    console.log(shanghaiMapData, siteData);
                    drawCanvasMap(shanghaiMapData, projection)

                })

            function drawCanvasMap(mapData, projection) {
                var canvas = document.getElementById('shanghaiMap')
                var context = canvas.getContext('2d')
                context.globalCompositeOperation = 'lighter'

                canvas.width = window.innerWidth
                canvas.height = window.innerHeight

                var path = d3.geoPath()
                    .projection(projection)
                    .context(context)

                // console.log(mapData.features)

                mapData.features.forEach(d => {
                    context.beginPath()
                    path(d)
                    context.strokeStyle = 'rgba(255, 255, 255, 0.2)'
                    context.lineWidth = 1
                    context.stroke()
                })


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

image.png

利用d3、geojson绘制canvas地图