177 lines
4.9 KiB
PHP
177 lines
4.9 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>在地图上打标点</title>
|
|
<style>
|
|
/* html,body{
|
|
width: 100%;
|
|
height: 100%;
|
|
} */
|
|
canvas {
|
|
cursor: crosshair;
|
|
width:1350px;
|
|
height: 900px;
|
|
}
|
|
|
|
</style>
|
|
<script src="{{asset('/admin/js/uuidv4.min.js')}}"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<canvas id="myCanvas"></canvas>
|
|
<div style="position: relative;top:-900px;left: 1360px;width: 100px;">
|
|
<form id='positionForm' action="{{url('monitor-mode-position/save')}}" method="post" enctype="multipart/form-data">
|
|
@csrf
|
|
<input type="hidden" name="id" value="{{$id}}">
|
|
<input type="hidden" name="x" id="x" value="{{$x}}">
|
|
<input type="hidden" name="y" id="y" value="{{$y}}">
|
|
<button type="submit" onclick="return submitXY(this.form)">保存</button>
|
|
<button onclick="script:window.close();">返回</button>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
const canvas = document.getElementById("myCanvas");
|
|
const ctx = canvas.getContext("2d");
|
|
const sx = '{{$x}}';
|
|
const sy = '{{$y}}';
|
|
|
|
const map = new Image();
|
|
map.src = "/admin/dashboard-map.png";
|
|
map.onload = function () {
|
|
resizeCanvas();
|
|
drawMarkers();
|
|
};
|
|
|
|
const markerImage = new Image();
|
|
markerImage.src = "/admin/map-marker.png";
|
|
const markerRadius = 15;
|
|
|
|
const markers = [];
|
|
|
|
if(sx >0 && sy >0) {
|
|
markers.push({id: uuidv4(),
|
|
x:sx,
|
|
y:sy,
|
|
selected: false});
|
|
}
|
|
|
|
function addMarker(x, y) {
|
|
const marker = {
|
|
id: uuidv4(),
|
|
x,
|
|
y,
|
|
selected: false
|
|
};
|
|
markers.length = 0;
|
|
markers.push(marker);
|
|
document.getElementById("x").value = x;
|
|
document.getElementById("y").value = y;
|
|
console.log("新增", marker);
|
|
drawMarkers();
|
|
}
|
|
|
|
function drawMarkers() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// 获取父容器的宽度和高度
|
|
const canvasWrapper = document.getElementById("myCanvas");
|
|
const canvasWrapperWidth = canvasWrapper.offsetWidth;
|
|
const canvasWrapperHeight = canvasWrapper.offsetHeight;
|
|
// 设置Canvas的大小为父容器的大小
|
|
canvas.width = canvasWrapperWidth;
|
|
canvas.height = canvasWrapperHeight;
|
|
|
|
// 绘制地图图片并调整大小以铺满Canvas
|
|
const scale = Math.max(canvas.width / map.width, canvas.height / map.height);
|
|
const newWidth = map.width * scale;
|
|
const newHeight = map.height * scale;
|
|
const offsetX = (canvas.width - newWidth) / 2;
|
|
const offsetY = (canvas.height - newHeight) / 2;
|
|
ctx.drawImage(map, offsetX, offsetY, newWidth, newHeight);
|
|
|
|
markers.forEach(marker => {
|
|
|
|
// if (marker.selected) {
|
|
// ctx.beginPath();
|
|
// ctx.arc(marker.x, marker.y, 15, 0, 8 * Math.PI);
|
|
// ctx.strokeStyle = "red";
|
|
// ctx.stroke();
|
|
// }
|
|
|
|
ctx.drawImage(markerImage, marker.x - markerRadius, marker.y - markerRadius, markerRadius * 2, markerRadius * 2);
|
|
});
|
|
}
|
|
|
|
function resizeCanvas() {//初始化地图
|
|
drawMarkers();
|
|
}
|
|
|
|
window.addEventListener("resize", resizeCanvas);
|
|
|
|
let isDragging = false;
|
|
let dragIndex = -1;
|
|
|
|
canvas.addEventListener("mousedown", event => {
|
|
const x = event.offsetX;
|
|
const y = event.offsetY;
|
|
|
|
markers.forEach((marker, index) => {
|
|
if (x >= marker.x - markerRadius / 2 && x <= marker.x + markerRadius / 2 && y >= marker.y - markerRadius / 2 && y <= marker.y + markerRadius / 2) {
|
|
isDragging = true;
|
|
dragIndex = index;
|
|
markers[index].selected = true;
|
|
} else {
|
|
markers[index].selected = false;
|
|
}
|
|
});
|
|
|
|
if (!isDragging) {
|
|
addMarker(x, y);
|
|
}
|
|
|
|
drawMarkers();
|
|
});
|
|
|
|
canvas.addEventListener("mousemove", event => {
|
|
if (isDragging) {
|
|
const x = event.offsetX;
|
|
const y = event.offsetY;
|
|
|
|
markers[dragIndex].x = x;
|
|
markers[dragIndex].y = y;
|
|
|
|
drawMarkers();
|
|
}
|
|
});
|
|
|
|
canvas.addEventListener("mouseup", event => {
|
|
isDragging = false;
|
|
dragIndex = -1;
|
|
});
|
|
|
|
function submitXY(theform)
|
|
{
|
|
var ttx = document.getElementById("x").value;
|
|
var tty = document.getElementById("y").value;
|
|
if(ttx <=0 || tty <=0){
|
|
alert('请点击地图，标记位置');
|
|
return false;
|
|
}
|
|
|
|
var res = theform.submit();
|
|
|
|
if($res['code'] != undefined){
|
|
if($res['code'] > 0){
|
|
alert($res['msg']);
|
|
return false;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|