image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="1680" height="830"></canvas>
</body>
</html>
<script src="mapJson.js"></script>
<script>
// 當前 canvas 的 0 0 坐標襟齿，我們設(shè)置 canvas 左上角頂點為 0 0，向右??和向下??是 X Y 軸正方向盹兢，0，0 為 pageSlicePos 初始值
const pageSlicePos = { // 坐標系的原點
x: 0,
y: 0,
};
var scale = 10; // 縮放比例
var mapScale = 10; // 調(diào)整地圖的默認的縮放大小
// ----------- pageSlicePos, scale 這兩個值是重點------------------
const solidColor = '#ccc'; // 實線顏色
const dashedColor = '#f0f0f0'; // 虛線顏色
const zeroColor = '#358bf3'; // 0 點坐標系顏色
const GRIDSIZE = 5; // 一個正方形網(wǎng)格的寬高大小, 一個GRIDSIZE視為一個單位
const myCanvas = document.querySelector('#myCanvas');
const ctx = myCanvas.getContext('2d'); // 獲取canvas上下文
myCanvas.addEventListener("mousedown", mouseDown);
myCanvas.addEventListener("mousewheel", mouseWheel);
myCanvas.addEventListener("mousemove", mouseMove);
const curMousePos = {
x: 0,
y: 0
}
const arrX = []
const arrY = []
map.features.forEach(item => {
let coordinates = item.geometry.coordinates;
coordinates.forEach(data => {
data.forEach(data1 => {
if (data1.length > 2) {
data1.forEach((data2, i) => {
arrX.push(data2[0]);
arrY.push(data2[1]);
});
}
});
});
});
const left = Math.min(...arrX);
const right = Math.max(...arrX);
const topp = Math.min(...arrY);
const bottom = Math.max(...arrY);
let mapH = topp + bottom;
let mapW = left + right;
let mapCenterPos = [mapW / 2, mapH / 2];
/**
* 繪制網(wǎng)格
* @param scaleVal 縮放倍數(shù)
*/
var drawLineGrid = (scaleVal = scale) => {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
/*獲取繪圖工具*/
// 設(shè)置網(wǎng)格大小
var girdSize = getPixelSize(GRIDSIZE);
// 獲取Canvas的width、height
var CanvasWidth = ctx.canvas.width;
var CanvasHeight = ctx.canvas.height;
// 在 pageSlicePos 的 x，y 點位畫一個 10 * 10 的紅色標記用來表示當前頁面的 0 0 坐標
ctx.fillStyle = 'red';
ctx.fillRect(pageSlicePos.x - 5, pageSlicePos.y - 5, 10, 10); // 效果圖紅色小方塊
const canvasXHeight = CanvasHeight - pageSlicePos.y;
const canvasYWidth = CanvasWidth - pageSlicePos.x;
// 從 pageSlicePos.y 處開始往 Y 軸正方向畫 X 軸網(wǎng)格
const xPageSliceTotal = Math.ceil(canvasXHeight / girdSize); // 每隔一個單位畫一條線
for (let i = 0; i < xPageSliceTotal; i++) {
ctx.beginPath(); // 開啟路徑，設(shè)置不同的樣式
ctx.moveTo(0, pageSlicePos.y + girdSize * i);
ctx.lineTo(CanvasWidth, pageSlicePos.y + girdSize * i);
ctx.strokeStyle = i === 0 ? zeroColor : (i % 5 === 0 ? solidColor : dashedColor); // 如果為 0 則用藍色標記，取余 5 為實線铐望，其余為比較淡的線
ctx.stroke();
}
// 從 pageSlicePos.y 處開始往 Y 軸負方向畫 X 軸網(wǎng)格
const xRemaining = pageSlicePos.y;
const xRemainingTotal = Math.ceil(xRemaining / girdSize);
for (let i = 0; i < xRemainingTotal; i++) {
if (i === 0) continue;
ctx.beginPath(); // 開啟路徑，設(shè)置不同的樣式
ctx.moveTo(0, pageSlicePos.y - girdSize * i); // -0.5是為了解決像素模糊問題
ctx.lineTo(CanvasWidth, pageSlicePos.y - girdSize * i);
ctx.strokeStyle = i === 0 ? zeroColor : (i % 5 === 0 ? solidColor : dashedColor);// 如果為 0 則用藍色標記茂附，取余 5 為實線正蛙，其余為比較淡的線
ctx.stroke();
}
// 從 pageSlicePos.x 處開始往 X 軸正方向畫 Y 軸網(wǎng)格
const yPageSliceTotal = Math.ceil(canvasYWidth / girdSize); // 計算需要繪畫y軸的條數(shù)
for (let j = 0; j < yPageSliceTotal; j++) {
ctx.beginPath(); // 開啟路徑，設(shè)置不同的樣式
ctx.moveTo(pageSlicePos.x + girdSize * j, 0);
ctx.lineTo(pageSlicePos.x + girdSize * j, CanvasHeight);
ctx.strokeStyle = j === 0 ? zeroColor : (j % 5 === 0 ? solidColor : dashedColor);// 如果為 0 則用藍色標記何之，取余 5 為實線跟畅，其余為比較淡的線
ctx.stroke();
}
// 從 pageSlicePos.x 處開始往 X 軸負方向畫 Y 軸網(wǎng)格
const yRemaining = pageSlicePos.x;
const yRemainingTotal = Math.ceil(yRemaining / girdSize);
for (let j = 0; j < yRemainingTotal; j++) {
if (j === 0) continue;
ctx.beginPath(); // 開啟路徑，設(shè)置不同的樣式
ctx.moveTo(pageSlicePos.x - girdSize * j, 0);
ctx.lineTo(pageSlicePos.x - girdSize * j, CanvasHeight);
ctx.strokeStyle = j === 0 ? zeroColor : (j % 5 === 0 ? solidColor : dashedColor);// 如果為 0 則用藍色標記溶推，取余 5 為實線徊件，其余為比較淡的線
ctx.stroke();
}
ctx.strokeStyle = "black";
map.features.forEach(item => {
console.log(item.properties, "item");
let coordinates = item.geometry.coordinates;
if (item.properties.center && item.properties.center.length == 2) {
let cp = item.properties.center;
let mapX = (cp[0] - mapCenterPos[0]);
let mapY = mapH - (cp[1] + mapCenterPos[1]);
let center = getPixelPos({ x: mapX * mapScale, y: mapY * mapScale });
ctx.fillStyle = "#000"
ctx.fillText(item.properties.name, center.x, center.y);
}
coordinates.forEach(data => {
data.forEach(data1 => {
if (data1.length > 2) {
ctx.beginPath();
data1.forEach((data2, i) => {
let mapX = (data2[0] - mapCenterPos[0]);
let mapY = mapH - (data2[1] + mapCenterPos[1]);
let point = getPixelPos({ x: mapX * mapScale, y: mapY * mapScale });
if (i === 0) {
ctx.moveTo(point.x, point.y);
}
ctx.lineTo(point.x, point.y);
});
ctx.stroke();
let isPointIn = ctx.isPointInPath(curMousePos.x, curMousePos.y);
if (isPointIn) {
ctx.fillStyle = "red";
ctx.fill();
}
}
});
});
});
};
function mouseMove(e) {
curMousePos.x = e.clientX;
curMousePos.y = e.clientY;
}
function getPixelPos(point) {
return {
x: pageSlicePos.x + (point.x / GRIDSIZE) * scale,
y: pageSlicePos.y + (point.y / GRIDSIZE) * scale,
};
}
function getRelativePos(point) {
return {
x: ((point.x - pageSlicePos.x) / scale) * GRIDSIZE,
y: ((point.y - pageSlicePos.y) / scale) * GRIDSIZE,
};
}
function getPixelSize(size) {
return size * scale;
}
function getRelativeSize(size) {
return size / scale;
}
/**
* 滾輪縮放倍數(shù)
*/
function mouseWheel(e) {
if (e.wheelDelta > 0) {
if (scale < 20) {
scale++;
}
} else {
if (scale > 1) {
scale--;
}
}
}
/**
* 拖動 canvas 動態(tài)渲染，拖動時蒜危，動態(tài)設(shè)置 pageSlicePos 的值
* @param e Event
*/
function mouseDown(e) {
const downX = e.clientX;
const downY = e.clientY;
const { x, y } = pageSlicePos;
myCanvas.onmousemove = (ev) => {
const moveX = ev.clientX;
const moveY = ev.clientY;
pageSlicePos.x = x + (moveX - downX);
pageSlicePos.y = y + (moveY - downY);
myCanvas.onmouseup = (en) => {
myCanvas.onmousemove = null;
myCanvas.onmouseup = null;
};
}
myCanvas.onmouseup = (en) => {
myCanvas.onmousemove = null;
myCanvas.onmouseup = null;
};
}
(function main() {
drawLineGrid();
requestAnimationFrame(main);
})()
</script>
<style>
body {
margin: 0;
}
</style>
