使用D3.js在地图上绘制来自geoJSON文件的点时遇到问题。该地图可以很好地渲染,但是这些点没有显示出来。我目前没有收到任何错误消息。
我正在与this tutorial一起关注,但是使用我自己的geoJSON文件来绘制数据。
这就是我所拥有的:
var width = 960,
height = 500;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
var projection = d3.geoAlbers()
.scale(1000)
.translate([width / 2, height / 2]);
var path = d3.geoPath()
.projection(projection);
d3.queue()
.defer(d3.json, 'states.json') // Load US States
.defer(d3.json, 'trump_geoJson.json') // Load tweet lat/long data
.await(makeMyMap); // Run 'ready' when JSONs are loaded
function makeMyMap(error,states,tweets) {
svg.append('path')
.datum(topojson.feature(states, states.objects.usStates))
.attr('d', path)
.attr('class', 'states');
svg.selectAll('.tweets')
.data(tweets.features)
.enter()
.append('path')
.attr('d',path)
.attr('class', 'tweets');
}
我希望可以绘制大约600个点,但不会得到任何点。
json文件trump_geoJson如下:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 0,
"properties": {
"primary_geo": "Utah, USA",
"tag": "#Bernie",
"text": "text",
"user_id": "id"
},
"geometry": {
"type": "Point",
"coordinates": [
39.32373809814453,
-111.67823791503906
]
}
},
{
"type": "Feature",
"id": 1,
"properties": {
"primary_geo": "New York, NY",
"tag": "#Bernie",
"text": "text",
"user_id": "id"
},
"geometry": {
"type": "Point",
"coordinates": [
40.71455001831055,
-74.00714111328125
]
}
},... ]
答案 0 :(得分:2)
您的geojson使用了错误的坐标约定。你有:
setContentView(R.layout.activity_main);
TextView textView = findViewById(R.id.helloString);
Methods.changeText(textView)
但是,您必须使用:
"coordinates": [ latitude, longitude ]
来自spec:
点坐标按x,y顺序(投影的东,北方向) 坐标的经度,纬度和经度)
有趣的是,该规范考虑了投影坐标的东和北,因为该规范还指出geojson必须使用WGS84基准面使用非投影(经/纬度)坐标
这是geojson要素集中前两个项目的演示:
"coordinates": [ longitude, latitude ]
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-111.6782379150,39.32373809814]
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.00714111328,40.71455001831]
}
}]};
var width = 500,
height = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var projection = d3.geoAlbers()
.scale(600)
.translate([width / 2, height / 2]);
var path = d3.geoPath()
.projection(projection);
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
if (error) throw error;
svg.append("path")
.attr("d", path(topojson.mesh(world)))
.attr("fill","none")
.attr("stroke","black")
.attr("stroke-width",1);
svg.selectAll('.tweets')
.data(data.features)
.enter()
.append('path')
.attr('d',path)
.attr('class', 'tweets');
});
.tweets {
fill: red;
opacity: 0.7;
}