Question

使用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
            ]
        }
    },... ]

Answer 1

您的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;
    }

如何在D3.js中的地图上绘制经纬度对

1 个答案: