You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
294 lines
11 KiB
294 lines
11 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>路径加载功能测试</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.test-section {
|
|
margin-bottom: 30px;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
}
|
|
button {
|
|
background: #409EFF;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
button:hover {
|
|
background: #66B2FF;
|
|
}
|
|
.success {
|
|
color: #67c23a;
|
|
font-weight: bold;
|
|
}
|
|
.error {
|
|
color: #f56c6c;
|
|
font-weight: bold;
|
|
}
|
|
.warning {
|
|
color: #e6a23c;
|
|
font-weight: bold;
|
|
}
|
|
.info {
|
|
color: #909399;
|
|
font-size: 12px;
|
|
}
|
|
.result {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background: #f9f9f9;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>路径加载功能测试</h1>
|
|
|
|
<div class="test-section">
|
|
<h3>1. 数据类型验证测试</h3>
|
|
<button onclick="testDataTypes()">测试数据类型转换</button>
|
|
<div id="dataTypeResult" class="result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>2. 坐标验证测试</h3>
|
|
<button onclick="testCoordinateValidation()">测试坐标验证</button>
|
|
<div id="coordinateResult" class="result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>3. 路径点格式化测试</h3>
|
|
<button onclick="testPathPointFormatting()">测试路径点格式化</button>
|
|
<div id="formattingResult" class="result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>4. 地图边界计算测试</h3>
|
|
<button onclick="testBoundsCalculation()">测试边界计算</button>
|
|
<div id="boundsResult" class="result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>5. SVG图标编码测试</h3>
|
|
<button onclick="testSVGEncoding()">测试SVG编码</button>
|
|
<div id="svgResult" class="result"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showResult(elementId, content, type = 'info') {
|
|
const element = document.getElementById(elementId);
|
|
element.innerHTML = `<span class="${type}">${content}</span>`;
|
|
}
|
|
|
|
function testDataTypes() {
|
|
const testData = {
|
|
flight_speed: "10.00",
|
|
flight_altitude: "100.00",
|
|
numeric_speed: 15,
|
|
invalid_speed: "abc"
|
|
};
|
|
|
|
let result = "数据类型转换测试:\n";
|
|
|
|
// 测试字符串到数字转换
|
|
const speed1 = parseFloat(testData.flight_speed);
|
|
result += `"10.00" -> ${speed1} (${typeof speed1})\n`;
|
|
|
|
const altitude1 = parseFloat(testData.flight_altitude);
|
|
result += `"100.00" -> ${altitude1} (${typeof altitude1})\n`;
|
|
|
|
const speed2 = parseFloat(testData.numeric_speed);
|
|
result += `15 -> ${speed2} (${typeof speed2})\n`;
|
|
|
|
const speed3 = parseFloat(testData.invalid_speed);
|
|
result += `"abc" -> ${speed3} (${typeof speed3}, isNaN: ${isNaN(speed3)})\n`;
|
|
|
|
result += "\n✅ 数据类型转换测试完成";
|
|
showResult('dataTypeResult', result, 'success');
|
|
}
|
|
|
|
function testCoordinateValidation() {
|
|
const testCoords = [
|
|
{ lng: 112.644901, lat: 28.270426 },
|
|
{ lng: "113.179221", lat: "28.283887" },
|
|
{ lng: NaN, lat: 28.5 },
|
|
{ lng: 200, lat: 28.5 }, // 超出经度范围
|
|
{ lng: 112.5, lat: 100 }, // 超出纬度范围
|
|
[112.644901, 28.270426],
|
|
["113.179221", "28.283887"],
|
|
[NaN, 28.5]
|
|
];
|
|
|
|
let result = "坐标验证测试:\n";
|
|
|
|
testCoords.forEach((coord, index) => {
|
|
let lng, lat;
|
|
|
|
if (Array.isArray(coord)) {
|
|
lng = parseFloat(coord[0]);
|
|
lat = parseFloat(coord[1]);
|
|
} else {
|
|
lng = parseFloat(coord.lng);
|
|
lat = parseFloat(coord.lat);
|
|
}
|
|
|
|
const isValid = !isNaN(lng) && !isNaN(lat) &&
|
|
lng >= -180 && lng <= 180 &&
|
|
lat >= -90 && lat <= 90;
|
|
|
|
result += `${index + 1}: [${lng}, ${lat}] -> ${isValid ? '✅' : '❌'}\n`;
|
|
});
|
|
|
|
showResult('coordinateResult', result, 'success');
|
|
}
|
|
|
|
function testPathPointFormatting() {
|
|
const mockPathData = [
|
|
{ lng: 112.644901, lat: 28.270426, altitude: 100 },
|
|
{ lng: "113.179221", lat: "28.283887" },
|
|
[112.5, 28.5, 150],
|
|
["113.1", "28.2"],
|
|
{ lng: NaN, lat: 28.5 }, // 无效点
|
|
null, // 无效点
|
|
[200, 28.5] // 超出范围
|
|
];
|
|
|
|
let result = "路径点格式化测试:\n";
|
|
result += `原始数据: ${mockPathData.length} 个点\n\n`;
|
|
|
|
const formattedPoints = mockPathData.map((point, index) => {
|
|
if (typeof point === 'object' && point !== null && point.lng !== undefined && point.lat !== undefined) {
|
|
const lng = parseFloat(point.lng);
|
|
const lat = parseFloat(point.lat);
|
|
if (!isNaN(lng) && !isNaN(lat) && lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90) {
|
|
return {
|
|
lng: lng,
|
|
lat: lat,
|
|
altitude: parseFloat(point.altitude) || 100
|
|
};
|
|
}
|
|
} else if (Array.isArray(point) && point.length >= 2) {
|
|
const lng = parseFloat(point[0]);
|
|
const lat = parseFloat(point[1]);
|
|
if (!isNaN(lng) && !isNaN(lat) && lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90) {
|
|
return {
|
|
lng: lng,
|
|
lat: lat,
|
|
altitude: parseFloat(point[2]) || 100
|
|
};
|
|
}
|
|
}
|
|
result += `跳过无效点 ${index + 1}: ${JSON.stringify(point)}\n`;
|
|
return null;
|
|
}).filter(point => point !== null);
|
|
|
|
result += `\n处理后: ${formattedPoints.length} 个有效点\n`;
|
|
formattedPoints.forEach((point, index) => {
|
|
result += `${index + 1}: [${point.lng}, ${point.lat}, ${point.altitude}]\n`;
|
|
});
|
|
|
|
showResult('formattingResult', result, 'success');
|
|
}
|
|
|
|
function testBoundsCalculation() {
|
|
const testPoints = [
|
|
{ lng: 112.644901, lat: 28.270426 },
|
|
{ lng: 113.179221, lat: 28.283887 },
|
|
{ lng: 112.972100, lat: 28.072387 }
|
|
];
|
|
|
|
let result = "边界计算测试:\n";
|
|
|
|
// 模拟边界计算
|
|
let minLng = Infinity, maxLng = -Infinity;
|
|
let minLat = Infinity, maxLat = -Infinity;
|
|
|
|
testPoints.forEach(point => {
|
|
minLng = Math.min(minLng, point.lng);
|
|
maxLng = Math.max(maxLng, point.lng);
|
|
minLat = Math.min(minLat, point.lat);
|
|
maxLat = Math.max(maxLat, point.lat);
|
|
});
|
|
|
|
result += `点数: ${testPoints.length}\n`;
|
|
result += `经度范围: ${minLng.toFixed(6)} ~ ${maxLng.toFixed(6)}\n`;
|
|
result += `纬度范围: ${minLat.toFixed(6)} ~ ${maxLat.toFixed(6)}\n`;
|
|
result += `中心点: [${((minLng + maxLng) / 2).toFixed(6)}, ${((minLat + maxLat) / 2).toFixed(6)}]\n`;
|
|
|
|
// 检查是否有NaN值
|
|
const hasNaN = isNaN(minLng) || isNaN(maxLng) || isNaN(minLat) || isNaN(maxLat);
|
|
result += `\n边界有效性: ${hasNaN ? '❌ 包含NaN' : '✅ 有效'}`;
|
|
|
|
showResult('boundsResult', result, hasNaN ? 'error' : 'success');
|
|
}
|
|
|
|
function testSVGEncoding() {
|
|
const testSVG = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" fill="#1890FF" stroke="#fff" stroke-width="2"/>
|
|
<text x="12" y="16" text-anchor="middle" fill="#fff" font-size="10" font-family="Arial">起</text>
|
|
</svg>
|
|
`;
|
|
|
|
let result = "SVG编码测试:\n";
|
|
|
|
// 测试encodeURIComponent方法
|
|
try {
|
|
const encoded = encodeURIComponent(testSVG.trim());
|
|
const dataUrl = `data:image/svg+xml,${encoded}`;
|
|
result += "encodeURIComponent编码: ✅ 成功\n";
|
|
result += `编码长度: ${encoded.length} 字符\n`;
|
|
result += `Data URL: ${dataUrl.substring(0, 100)}...\n`;
|
|
|
|
// 创建测试图片
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
result += "\n✅ SVG图片加载成功";
|
|
showResult('svgResult', result, 'success');
|
|
};
|
|
img.onerror = () => {
|
|
result += "\n❌ SVG图片加载失败";
|
|
showResult('svgResult', result, 'error');
|
|
};
|
|
img.src = dataUrl;
|
|
|
|
} catch (error) {
|
|
result += `❌ 编码失败: ${error.message}`;
|
|
showResult('svgResult', result, 'error');
|
|
}
|
|
}
|
|
|
|
// 页面加载时自动运行基础测试
|
|
window.onload = function() {
|
|
setTimeout(() => {
|
|
testDataTypes();
|
|
}, 500);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |