“第一次用簡書悯嗓，嘗試著簡單記錄一下課程大作業(yè)的實現(xiàn)過程” ——許三多兒
關(guān)鍵詞：d3.js / canvas/ geojson
實現(xiàn)過程
加載數(shù)據(jù)
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路徑數(shù)據(jù)字符串或?qū)⒙窂匠尸F(xiàn)到Canvas埂奈。 建議使用Canvas進行動態(tài)或交互式投影以提高性能。 路徑可以與投影或變換一起使用定躏，也可以用于將平面幾何直接渲染到畫布或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
