1
이 코드는 기본적으로 D3.js 맵을 생성하고 누군가가 자신의 IP 위치를 기반으로 페이지를 조회 할 때 '원'을 만듭니다. 라파엘과 난 그냥 D3.js 라이브러리를 사용하려고하지만 올바른 좌표와지도를 직접 '원'을 배치하는 방법에 붙어 오전 : -위도/경도 위의 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();
});
내가 통과하려고 경도/위도 데이터 및 상기지도에 그 시점에서의 원을 그려, 코드 :
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);
이 원이 생성되지만, 정확한 위치에 있지.
무엇이 누락 되었습니까?
많은 조언을 주시면 감사하겠습니다.