在 java 中将纬度、经度点列表映射到 x、y：有没有更简洁的方法来做到这一点？
发布于2025-01-19 22:35 阅读(882) 评论(0) 点赞(24) 收藏(4)
我编写了一个函数，通过将纬度、经度点转换为 div 内地图上的 x、y 来创建自定义地图。地图本身包含在 div 的背景中，而点是顶部的 SVG 元素，这使得点具有交互性，但地图是静态的。
目前的工作方式是每个元素都有一个 id，程序员将 cx 和 cy 作为坐标输入。在文档的部分中，有一个包含每个点的 id 的数组。程序使用 .forEach 遍历该数组，获取 cx 和 cy 值，进行一些数学运算，然后更改 cx 和 cy 值以将点正确放置在地图上（请参阅文档底部的代码）。
这很好用，但我想知道是否有更“优雅”的方式来做到这一点。代码本身不是很用户友好，你必须仔细检查并为每个点提供一个 id，并在每次添加新点时更新数组。我认识到这是一个笨重的系统。有没有办法做到这一点，例如，告诉脚本为每个具有特定类 onload 的元素运行？
下面的代码：
#window {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/World_map_%28Miller_cylindrical_projection%2C_blank%29.svg/634px-World_map_%28Miller_cylindrical_projection%2C_blank%29.svg.png);
display: block;
filter: none;
background-color: #E3F2FD;
transition: .5s;
}<html>
<head>
<link rel="stylesheet" href="pagestyle.css">
</head>
<body>
<div id="window">
<svg id="pins" viewBox="0 0 637.5 336.4">
<circle class="pin" id="md" cx="-76.609" cy="39.291" r=".25%" fill="#000"/>
<circle class="pin" id="ma" cx="-72.609" cy="42.371" r=".25%" fill="#000"/>
<circle class="pin" id="nd" cx="-97.032" cy="40.714" r=".25%" fill="#000"/>
<circle class="pin" id="tx1" cx="-94.741" cy="47.924" r=".25%" fill="#000"/>
<circle class="pin" id="tx2" cx="-97.149" cy="32.501" r=".25%" fill="#000"/>
<text id="tooltip" x="0" y="0" visibility="hidden" fill="#000" stroke="#000" font-size="10" font-family="Arial">Tooltip</text>
</svg>
</div>
<script>
//mapping function
var users = [md, ma, nd, tx1, tx2];
users.forEach(function(element) {
var lon = parseInt(element.getAttribute("cx"));
var xValue = (637.5 * ((lon + 180) / 360))-14;
element.setAttribute("cx", xValue);
var lat = parseInt(element.getAttribute("cy"));
var yValue = (474.691 * ((Math.abs((((5 / 4) *
(Math.asinh(Math.tan(((4 * Math.PI) / 900) * lat)))) + 2.30342) - 4.60684)) / 4.60684)) ;
element.setAttribute("cy", yValue);
});
</script>
</body>
</html>更新：添加了一个来自网上的背景网址，而不是我笔记本电脑上的本地网址，并更改了 x 和 y 偏移以匹配新地图
解决方案
如果您希望在加载时重新绘制圆圈，我会按如下方式修改您的代码
document.body.onload = function(){
var users = document.getElementsByClassName('pin');
for (var i = 0; i < users.length; i++) {
var element = users[i]
var lon = parseInt(element.getAttribute("cx"));
var xValue = (637.5 * ((lon + 180) / 360)) - 22;
element.setAttribute("cx", xValue);
var lat = parseInt(element.getAttribute("cy"));
var yValue = (474.691 * ((Math.abs((((5/4) * (Math.asinh(Math.tan(((4*Math.PI)/900) * lat)))) + 2.30342) - 4.60684)) / 4.60684)) - 35;
element.setAttribute("cy", yValue);
}
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/538953/e7fb2139c8ca27f3bc37/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力