使用D3.js和Geojson的地点/室内地图 [英] Venue/Indoor Map using D3.js and Geojson

问题描述

我创建了geojson文件，其中包含了购物中心一楼的所有功能。我得到的场地图投影使用d3.js与不同的颜色，但只有一些部分不是完整的地图。下面是脚本代码和到geojson文件的链接。还请注意，我没有将这个geojson转换为topojson和使用Qgis绘制地图和c＃.net将几何数据转换为geojson对象。任何人都可以检查我的json和我的d3.js代码？我需要使用任何其他预测吗？

I have created geojson file which contains all the features of 1st floor of a shopping mall. I got that venue map projected using d3.js with different colors but only some parts not the complete map. Below is the script code and link to the geojson file. Also please note that i have not converted this geojson into topojson and used Qgis to draw the maps and c#.net to convert the geometry data to geojson objects. Can anyone please check my json and my d3.js code? Do I need to use any other projections?

https://www.dropbox.com/s/8pu2s0yamfkd89p/JSONfromDB_8Feb2014.json

 $(document).ready(function () {                       
      parseResultShopDetails();                     
 });

 function parseResultShopDetails() {

    var width = 600, height = 300;

    var svg = d3.select("#map").append("svg")
            .attr("width", width)
            .attr("height", height);

    var projection = d3.geo.mercator()
               .scale(30)
               .translate([width / 2, height / 2]);

    var path = d3.geo.path()
                        .projection(projection);            

      d3.json("http://localhost:1209/data/JSONfromDB_8Feb2014.json", function (error,       jsonData) {
        var color1 = d3.scale.category10();

        svg.selectAll("path")
        .data(jsonData.features)
                        .enter()
                        .append("path")
                        .attr("d", path)
                        .attr("text", function (d, i) { return "js"; })
                        .attr("fill", function (d, i) { return color1(i); });


    });           
}        

推荐答案

如果您尝试使用经度和纬度以外的坐标，工具就会崩溃。

It looks like the d3 mapping tools really fall apart if you try to use coordinates other than longitude and latitude.

我尝试创建一个null投影，只返回输入值，但负数和大于360的数字在传递到投影之前仍然被d3包装功能。这避免了墨卡托投影的误差，它创造了有趣的艺术，但不是你所期望的平面图：

I tried creating a "null" projection that just returns the input values, but the negative numbers and numbers greater than 360 were still getting wrapped by d3 before passing to the projection function. That avoids the trig errors from the Mercator projection, and it creates interesting art, but not the floor plan you were hoping for:

var projection = d3.geo.projection(function(λ, φ) {
  return [ λ, φ ];
});

http://fiddle.jshell.net/rR2hG/1/

但是，一切都不会丢失。该示例中的第二个图像是通过将坐标数组作为< polygon> 元素的点传递而创建的。我认为这更接近你想要的。因此，你需要做一些更多的工作来从数据文件中获取点，但你可以肯定地将它们可视化为一个坐标数组。

However, all is not lost. The second image in that example is created by just passing the array of coordinates as the points of <polygon> elements. I think that's closer to what you wanted. So you'll need to do a little more work to grab the points from the data file but you can definitely visualize them just as an array of coordinates.

    svg2.selectAll("polygon")
        .data(jsonData.features)
        .enter()
        .append("polygon")
        .attr("points", function(d){ return d3.merge(d.geometry.coordinates);})
        .attr("fill", function (d, i) {
            return color1(i);
        });

唯一的另一个建议是写一个脚本将geoJSON文件转换为地理单位。它们不必是特定地点的实际纬度和经度（您仍然可以使地图以您选择的参考点为中心），但比例尺必须是英尺或米或者您使用的度数。

The only other suggestion is to write a script to convert your geoJSON file to geographic units. They don't have to be actual latitude and longitude of a particular place (you could still have the map centered on a reference point of your choice), but the scale has to be in degrees not feet or meters or whatever you are using.

这篇关于使用D3.js和Geojson的地点/室内地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！