“第一次用简书，尝试着简单记录一下课程大作业的实现过程” ——许三多儿
关键词：d3.js / canvas/ geojson
实现过程
加载数据
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
