<!--
* @Author: LongerJue 1028537415@qq.com
* @Date: 2023-08-26 14:11:54
* @LastEditors: LongerJue 1028537415@qq.com
* @LastEditTime: 2023-08-27 00:15:47
* @FilePath: \platfrom-lams-master-v2\public\ceshi.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!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>
<script src="./lib/turf.min.js"></script>
</head>
<body>
<div id="canvasContainer"></div>
<script>
const coordinatesSets = [
// {
// strInfo: "图一",
// coordinates: [
// [501547.594, 2750484.772],
// [501570.113, 2750510.488],
// [501597.604, 2750494.123],
// [501587.075, 2750457.01],
// [501547.009, 2750461.978],
// [501541.745, 2750473.083],
// ],
// },
// {
// strInfo: "图二",
// coordinates: [
// [501547.009, 2750461.978],
// [501526.245, 2750445.321],
// [501501.778, 2750433.038],
// [501498.57, 2750433.165],
// [501493.181, 2750441.312],
// [501489.841, 2750455.302],
// [501494.369, 2750455.073],
// [501520.989, 2750467.484],
// [501534.596, 2750473.403],
// ],
// },
// {
// strInfo: "图三",
// coordinates: [
// [603373.293, 2749280.784],
// [603311.5, 2749297.454],
// [603325.694, 2749262.806],
// [603314.288, 2749246.356],
// [603391.194, 2749187.094],
// [603390.038, 2749201.079],
// [603447.267, 2749215.955],
// ],
// },
{
strInfo: "图四",
coordinates: [
[603512.024, 2749056.229],
[603500.94, 2749058.477],
[603495.159, 2749049.325],
[603482.309, 2749047.558],
[603463.317, 2749031.867],
[603439.263, 2749046.113],
[603432.357, 2749045.392],
[603446.197, 2749030.657],
[603434.44, 2749028.258],
[603397.824, 2749033.107],
[603409.067, 2749017.853],
[603392.845, 2749009.664],
[603428.788, 2749004.549],
[603412.432, 2748992.3],
[603401.145, 2748988.244],
[603394.36, 2748978.355],
[603398.545, 2748971.762],
[603408.267, 2748971.93],
[603416.938, 2748960.69],
[603427.057, 2748974.018],
[603437.818, 2748974.018],
[603448.74, 2748964.705],
[603461.108, 2748974.339],
[603487.77, 2748964.384],
[603486.003, 2748992.483],
[603509.938, 2748977.898],
[603516.785, 2748978.755],
[603512.827, 2748997.943],
[603510.234, 2749013.465],
[603489.442, 2749028.66],
[603523.625, 2749034.504],
[603516.56, 2749045.319],
],
},
];
function drawPolygons() {
let dataList = [];
coordinatesSets.forEach((item, index) => {
let subDataList = [],calCoordinates = item.coordinates;
calCoordinates.push(item.coordinates[0]);
var polygon = turf.polygon([calCoordinates]);
debugger
var bbox = turf.bbox(polygon);
//minX, minY, maxX, maxY
// 0: 603392.845
// 1: 2748960.69
// 2: 603523.625
// 3: 2749058.477
var bboxPolygon = turf.bboxPolygon(bbox);
let coordinates = ScalingPoint(item.coordinates);
coordinates.forEach((subItem, k) => {
let formatData = formatPoint(subItem, 0.0001);
subDataList.push(formatData);
});
dataList.push({
strInfo: item.strInfo,
coordinates: subDataList,
originCoordinates: item.coordinates,
});
});
console.log(dataList);
const canvasContainer = document.getElementById("canvasContainer");
dataList.forEach((item, index) => {
const canvas = document.createElement("canvas");
canvas.setAttribute("style", "margin:20px;");
canvas.width = 900;
canvas.height = 600;
canvasContainer.appendChild(canvas);
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FFE4C4";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制多边形
ctx.beginPath();
item.coordinates.forEach(([x, y]) => {
ctx.lineTo(x, y);
});
ctx.closePath();
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
ctx.fillStyle = "#fff";
ctx.fill();
ctx.stroke();
// 绘制顶角序号
ctx.fillStyle = "black";
item.coordinates.forEach(([x, y], i) => {
ctx.fillStyle = "black";
ctx.font = "16px Arial";
ctx.fillText(`J${i + 1}`, x, y);
});
// 绘制文本1
ctx.font = "18px Arial";
ctx.fillStyle = "black";
ctx.fillText(item.strInfo, 300, 30);
// 绘制坐标信息
const infoX =
Math.max(...item.originCoordinates.map(([x]) => x)) + 50;
const scale = 20;
item.originCoordinates.forEach(([x, y], i) => {
ctx.fillStyle = "black";
ctx.font = "15px Arial";
if (i === 0) {
ctx.fillText("坐标数据：", 650, 50);
}
let position = scale * (i + 1) + 50; //离上边50px,行高为20px
ctx.fillText(`J${i + 1}：(${x}, ${y})`, 650, position);
});
});
}
function calScale(){
}
function formatPoint(point, scale) {
var scaledPoint = [point[0] * scale + 100, point[1] * scale];
return scaledPoint;
}
function ScalingPoint(originalPoints) {
// 定义缩放比例
var scale = 50000;
// 计算多边形的中心点
var centerx = 0,
centery = 0;
for (var i = 0; i < originalPoints.length; i++) {
centerx += originalPoints[i][0];
centery += originalPoints[i][1];
}
centerx /= originalPoints.length;
centery /= originalPoints.length;
// 根据缩放比例和中心点进行缩放计算
var scaledPoints = [];
for (var i = 0; i < originalPoints.length; i++) {
var dx = originalPoints[i][0] - centerx;
var dy = originalPoints[i][1] - centery;
var scaledX = centerx + dx * scale;
var scaledY = centery + dy * scale;
scaledPoints.push([scaledX, scaledY]);
}
return scaledPoints;
}
drawPolygons();
</script>
</body>
</html>
