纬度/经度在D3.js地图上的位置
lat/lon positon on a D3.js map
我有这样的代码,它基本上创建了一个D3.js地图,当有人根据他们的IP位置"点击"页面时,它会创建一个"圆圈",这最初是在Raphael中完成的,我试图只使用D3.js库,但我不知道如何用正确的坐标将"圆圈"直接放置在地图上:-
function ZmgcClient() {
var personPath = "M255.968,166.154c34.206,0,61.936-27.727,61.936-61.934c0-34.208-27.729-61.936-61.936-61.936s-61.936,27.728-61.936,61.936 C194.032,138.428,221.762,166.154,255.968,166.154z M339.435,194.188c-13.082-13.088-28.625-20.924-84.83-20.924 c-56.214,0-71.38,8.505-83.796,20.924c-12.422,12.416-8.23,144.883-8.23,144.883l27.485-65.304l17.28,194.554l49.856-99.57 l46.521,99.57l16.456-194.554l27.487,65.304C347.664,339.07,352.521,207.271,339.435,194.188z";
if (! (this instanceof arguments.callee)) {
return new arguments.callee(arguments);
}
var self = this,
width = $('#map').width(),
mapCanvasHeight = (width * 0.45);
this.init = function() {
self.drawMap();
self.setupBayeuxHandlers();
};
this.setupBayeuxHandlers = function() {
$.getJSON("/config.json", function (config) {
self.client = new Faye.Client("http://" + window.location.hostname + ':' + config.port + '/faye', {
timeout: 120
});
self.client.subscribe('/stat', function (message) {
// console.log("MESSAGE", message);
self.drawMarker(message);
});
});
};
this.drawMap = function () {
var data;
// Most parts of D3 don't know anything about SVG—only DOM.
self.map = d3.geo.equirectangular().scale(width);
self.path = d3.geo.path().projection(self.map);
self.svg = d3.select('#map').append('svg:svg')
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", "0 0 " + width + " " + mapCanvasHeight);
self.countries = self.svg.append('svg:g').attr('id', 'countries');
// Load data from .json file
d3.json("/ui/data/world-countries.json", function(json) {
self.countries.selectAll("path") // select all the current path nodes
.data(json.features) // bind these to the features array in json
.enter().append("path") // if not enough elements create a new path
.attr("d", self.path) // transform the supplied jason geo path to svg
.on("mouseover", function(d) {
d3.select(this).style("fill","#6C0")
.append("svg:title")
.text(d.properties.name);})
.on("mouseout", function(d) {
d3.select(this).style("fill","#000000");})
});
}
this.geoCoordsToMapCoords = function (latitude, longitude) {
latitude = parseFloat(latitude);
longitude = parseFloat(longitude);
var mapWidth = width,
mapHeight = mapCanvasHeight,
x, y, mapOffsetX, mapOffsetY;
x = (mapWidth * (180 + longitude) / 360) % mapWidth;
latitude = latitude * Math.PI / 180;
y = Math.log(Math.tan((latitude / 2) + (Math.PI / 4)));
y = (mapHeight / 2) - (mapWidth * y / (2 * Math.PI));
mapOffsetX = mapWidth * 0.026;
mapOffsetY = mapHeight * 0.141;
return {
x: (x - mapOffsetX) * 0.97,
y: (y + mapOffsetY + 15),
xRaw: x,
yRaw: y
};
}
this.drawMarker = function (message) {
var lon = message.longitude,
lat = message.latitude,
city = message.city;
self.countries.append('svg:circle')
.attr("cy", lon, lat)
.attr("cx", lon, lat)
.attr('r', 5);
}
// Initialise
this.init();
};
var ZmgcClient;
jQuery(function() {
ZmgcClient = new ZmgcClient();
});
我正试图传递lon/lat数据,并在地图上的那个点画一个圆圈,这个代码:
this.drawMarker = function (message) {
var latitude = message.latitude,
longitude = message.longitude,
text = message.title,
city = message.city,
x, y;
var mapCoords = this.geoCoordsToMapCoords(latitude, longitude);
x = mapCoords.x;
y = mapCoords.y;
console.log(x,y);
self.countries.append('svg:circle')
.attr("r", 40.5)
.attr("cx", longitude)
.attr("cy", latitude);
console.log(latitude, longitude);
圆已创建,但位置不正确。
我错过了什么?
非常感谢任何建议。
一定是迟到了,应该是
var mapCoords = this.geoCoordsToMapCoords(latitude, longitude);
x = mapCoords.x;
y = mapCoords.y;
self.countries.append('svg:circle')
.attr("r", 5)
.style("fill", "steelblue")
.attr("cx", x)
.attr("cy", y);
而不是纬度、经度值。
相关文章:
- PHP谷歌地图-位置红色气球没有显示
- Bing地图图钉宽度设置会将图钉从地图位置移开
- 谷歌地图位置自动完成被jQuery Mobile弹出窗口阻止
- 地图位置带有照片和其他详细信息的详细信息
- 将显示为 XML 格式的 Google 地图位置转换为输出 (ASP.Net、C#)
- 具有常规位置类型的谷歌地图位置构造函数
- 如何使用自己的地址/坐标生成指向 Google 地图位置的准确链接?有没有这方面的API
- 谷歌地图API:将标记放在当前地图位置
- 返回我之前指定的谷歌地图位置列表
- 将地图位置信息从PHP传递到javascript,以便与Google地图v3api一起使用
- 谷歌地图V3保存用户使用拖放后的地图位置;滴
- Jquery谷歌地图位置-获取选择选项
- 更新基于gps坐标的谷歌地图位置
- ArcGIS初始地图位置
- 谷歌地图位置搜索框:如何重新计算pac-container的位置
- 使用jquery移动显示地图位置,使用经度和纬度
- 谷歌地图位置API地址自动完成和显示选择的结果
- 点击按钮时更新地图位置
- 触发谷歌地图位置信息窗口
- MapsApi -谷歌地图位置服务给出一个奇怪的错误