javascript - JavaScript Polymaps 库:获取鼠标坐标
问题描述
我使用 polymaps 库来显示自定义平铺地图。每当用户单击它时,我都需要知道该点的坐标。不是给出的纬度/经度值map.mouse(e)
,而是像素坐标。
var po = org.polymaps;
var div = document.getElementById("map");
var map = po.map()
.container(div.appendChild(po.svg("svg")))
.zoomRange([0,8])
.zoom(1)
.add(po.image()
.url(getTile));
map.add(po.interact())
.add(po.hash());
$(div).mousemove(function(e) {
???
})
这个库是否提供了一个功能来做到这一点?
解决方案
要获取创建 tilemap 的原始图像上的鼠标位置,请使用以下代码:
$(div).mousemove(function(e) {
// Get column, row and zoom level of mouse position
var crz = map.locationCoordinate(map.pointLocation(map.mouse(e)));
// Normalize the column and row values to the 0..1 range
var zoomMultiplier = Math.pow(2, crz.zoom-1);
var x01 = crz.column/zoomMultiplier;
var y01 = crz.row/zoomMultiplier;
// Multiply with the original image width and height
var originalWidth = 32768;
var originalHeight = 32768;
var mx = x01*originalWidth;
var my = y01*originalHeight;
// Now we have the mouse coordinates on the original image!
console.log(mx, my);
})
推荐阅读
- node.js - 编辑:为什么学习 Fullstack React 会令人困惑?
- visual-studio - Nuget 包不仅在最初,而且在每个打开的解决方案上都会将已删除的文件静默地添加回项目目录
- sql - SQL SERVER 2017 中对应的 GROUP_CONCAT()
- spring-cloud-config - Spring Cloud Config Server 中 {name}、{profile} 和 {label} 的可用占位符?
- python - 打开和重新分块数据集时在 xarray / dask 中分块的性能
- c# - Microsoft Graph API ASP.NET MVC 获取驱动器项目
- html - 如何将水平线放在两个兄弟姐妹下
标签
- excel - 将 Listview 条目转换为 Excel,然后转换为 PDF
- php - 不在的 Laravel 关系
- php - 删除 utf8 字符的代码在 php 5.3.3 上不起作用