//全局定義投影變量projection，把上海中心坐標定位于canvas中心點
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);
drawCanvasMap(shanghaiMapData, projection)
drawGeoCirclesSytem('canvasOfCircles', siteData, spotData, shopData, projection)
})
function drawGeoCirclesSytem(canvasId, siteData, spotData, shopData, projection) {
var canvas = document.getElementById(canvasId)
var context = canvas.getContext('2d')
context.globalCompositeOperation = 'lighter'
canvas.width = window.innerWidth
canvas.height = window.innerHeight
var geoCirclesSytem = createGeoCirclesSytem(siteData, spotData, shopData, projection)
geoCirclesSytem.forEach(d => {
d.forEach(e => {
e.draw(context)
})
})
//由于兩個循環遍歷，所以要用兩個forEach
//forEach數組中每個元素都來一遍
//=>ES6匿名函數（箭頭函數）
//等價于
//geoCirclesSytem.forEach(function(d) {
//d.forEach(function(e) {
//e.draw(context)
//})
//})
}
function createGeoCirclesSytem(siteData, spotData, shopData, projection) {
var geoCircleSystem
var sites = []
var shops = []
var spots = []
var siteStyle = {
r: 8,
color: 'rgba(255, 14, 12, 0.7)'
}
var shopStyle = {
r: 4,
color: 'rgba(255, 125, 22, 0.6)'
}
var spotStyle = {
r: 2,
color: 'rgba(81, 233, 71, 0.5)'
}
sites = createCircleSystem(siteData, siteStyle)
shops = createCircleSystem(shopData, shopStyle)
spots = createCircleSystem(spotData, spotStyle)
geoCircleSystem = [sites, shops, spots]
return geoCircleSystem
function createCircleSystem(geoData, style) {
var circleHolder = []
geoData.forEach(d => {
var postionProjected = projection([+d.Lng, +d.Lat])
var xPosition = postionProjected[0]
var yPosition = postionProjected[1]
var circle = new Circle(xPosition, yPosition, style)
circleHolder.push(circle)
})
console.log(circleHolder);
return circleHolder
}
}
function Circle(x, y, style) {
this.x = x || 0
this.y = y || 0
this.r = style.r || 5
this.color = style.color || 'Orange'
this.particleBackground = 'rgba(0, 0, 0, 0.1)'
//“||”運算遇到true就返回。
//例如：a || b ,如果 a 為false，直接返回b，而不管b為true或者false 。
//如果 a 為true，直接返回a，而不會繼續往下執行。
}
Circle.prototype.draw = function(context) { //prototype原型函數，增加屬性，用來實現基于原型的繼承與屬性的共享。
context.beginPath()
var fillStyle = context.createRadialGradient(this.x, this.y, this.r * 0.001, this.x, this.y, this.r)
fillStyle.addColorStop(0, this.color)
fillStyle.addColorStop(1, this.particleBackground)
//createRadialGradient放射狀圓形漸變
context.fillStyle = fillStyle
context.beginPath()
context.arc(this.x, this.y, this.r, 0, Math.PI * 2)
context.fill()
}
全部代碼如下
<html>
<head>
<meta charset=utf-8 />
<title>drawcanvasmap</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'></script>
<link rel='stylesheet' />
<link rel='stylesheet' />
</head>
<style>
body,
html {
/*margin: 0;
padding: 0;*/
}
body {
background-color: black;
}
#canvasOfCircles {
position: absolute;
left: 0;
top: 0;
z-index: 70;
}
#shanghaiMap {
position: absolute;
left: 0;
top: 0;
}
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #0f0f0f;
color: #ddd;
}
</style>
<body>
<!--<div id="map"></div>-->
<canvas id="shanghaiMap"></canvas>
<canvas id="canvasOfCircles"></canvas>
<script src="d3.js"></script>
<script src="http://d3js.org/d3.v4.0.0-alpha.44.min.js"></script>
<script>
document.body.onmousewheel = function(event) {
event = event || window.event;
console.dir(event);
//zoomShanghaiMap()
};
var canvasWidth = window.innerWidth
var canvasHeight = window.innerHeight
var projection = d3.geoMercator()
.center([121.5, 31.1]) //最終要換成上海的中心坐標
.scale(40000)
.translate([canvasWidth / 2, canvasHeight / 2]) //渲染容器的中心點
var initialProjectionScale = 40000
var globalProjection = d3.geoMercator()
.center([121.5, 31.1]) //最終要換成上海的中心坐標
.scale(initialProjectionScale)
.translate([window.innerWidth / 2, window.innerHeight / 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)
drawGeoCirclesSytem('canvasOfCircles', siteData, spotData, shopData, 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()
})
}
function drawGeoCirclesSytem(canvasId, siteData, spotData, shopData, projection) {
var canvas = document.getElementById(canvasId)
var context = canvas.getContext('2d')
context.globalCompositeOperation = 'lighter'
canvas.width = window.innerWidth
canvas.height = window.innerHeight
var geoCirclesSytem = createGeoCirclesSytem(siteData, spotData, shopData, projection)
console.log(geoCirclesSytem);
geoCirclesSytem.forEach(d => {
d.forEach(e => {
e.draw(context)
})
})
//由于兩個循環遍歷，所以要用兩個forEach
//forEach數組中每個元素都來一遍
//=>箭頭函數
// 等價于
// geoCirclesSytem.forEach(function(d) {
// d.forEach(function(e) {
// e.draw(context)
// })
// })
}
function createGeoCirclesSytem(siteData, spotData, shopData, projection) {
var geoCircleSystem
var sites = []
var shops = []
var spots = []
var siteStyle = {
r: 8,
color: 'rgba(255, 14, 12, 0.7)'
}
var shopStyle = {
r: 4,
color: 'rgba(255, 125, 22, 0.6)'
}
var spotStyle = {
r: 2,
color: 'rgba(81, 233, 71, 0.5)'
}
sites = createCircleSystem(siteData, siteStyle)
shops = createCircleSystem(shopData, shopStyle)
spots = createCircleSystem(spotData, spotStyle)
geoCircleSystem = [sites, shops, spots]
return geoCircleSystem
function createCircleSystem(geoData, style) {
var circleHolder = []
geoData.forEach(d => {
var postionProjected = projection([+d.Lng, +d.Lat])
var xPosition = postionProjected[0]
var yPosition = postionProjected[1]
var circle = new Circle(xPosition, yPosition, style)
circleHolder.push(circle)
})
console.log(circleHolder);
return circleHolder
}
}
function Circle(x, y, style) {
this.x = x || 0
this.y = y || 0
this.r = style.r || 5
this.color = style.color || 'Orange'
this.particleBackground = 'rgba(0, 0, 0, 0.1)'
//“||”運算遇到true就返回。
//例如：a || b ,如果 a 為false，直接返回b，而不管b為true或者false 。
//如果 a 為true，直接返回a，而不會繼續往下執行。
}
Circle.prototype.draw = function(context) { //prototype原型函數，增加屬性，用來實現基于原型的繼承與屬性的共享。
context.beginPath()
var fillStyle = context.createRadialGradient(this.x, this.y, this.r * 0.001, this.x, this.y, this.r)
fillStyle.addColorStop(0, this.color)
fillStyle.addColorStop(1, this.particleBackground)
//createRadialGradient放射狀圓形漸變
context.fillStyle = fillStyle
context.beginPath()
context.arc(this.x, this.y, this.r, 0, Math.PI * 2)
context.fill()
}
</script>
</body>
</html>
