将 Geojson 加载到 AP.NET MVC 5

Question

运行下面的 html 文件在 Firefox 中运行良好。

它使用一个 geojson 文件："states.geojson"。

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {font: 12px sans-serif;}
    path {
        stroke-width: 1px;
        stroke: white;
        fill: #804040;
        cursor: pointer;
    }
    path:hover, path.highlighted {
        fill: #ff8000;
    }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

//Map dimensions (in pixels)
var width = 600,
    height = 350;

//Map projection
var projection = d3.geo.albersUsa()
    .scale(730.2209486090715)
    .translate([width/2,height/2]) //translate to center the map in view

//Generate paths based on projection
var path = d3.geo.path()
    .projection(projection);

//Create an SVG
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

//Group for the map features
var features = svg.append("g")
    .attr("class","features");

//Create zoom/pan listener
//Change [1,Infinity] to adjust the min/max zoom scale
var zoom = d3.behavior.zoom()
    .scaleExtent([1, Infinity])
    .on("zoom",zoomed);

svg.call(zoom);

d3.json("states.geojson",function(error,geodata) {
    if (error) return console.log(error); //unknown error, check the console

//Create a path for each map feature in the data
features.selectAll("path")
    .data(geodata.features)
    .enter()
    .append("path")
    .attr("d",path)
    .on("click",clicked);
});

function zoomed() {
    features.attr("transform", "translate(" + zoom.translate() + ")
    scale("+ zoom.scale() + ")")
   .selectAll("path").style("stroke-width", 1 / zoom.scale() + "px" );
}

</script>
</body>

但是，现在我想在 asp.net mvc 项目中使用它。我将 geojson 文件放在项目的 App_Data 文件夹中。在控制器中：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        string path = GetGisPath() + "\states.geojson";
        ViewBag.Path = path.Replace("\", "/");
        return View();
    }

    private static string GetGisPath()
    {
        string appPath = System.Web.Hosting.HostingEnvironment.MapPath("~/App_Data");
        return appPath;
    }
}

然后是名为 Index 的视图。我在视图中复制了 html 文件的内容并更改了代码：

d3.json("states.geojson",function(error, geodata)

至：

d3.json("@ViewBag.Path", function (error, geodata)

但是什么也没发生。我只在 Firefox 控制台中看到一个错误：

XMLHttpRequest { onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: "", status: 0, statusText: "", responseType: "", response: "" }

与以下代码相关的内容：

d3.json("@ViewBag.Path", function (error, geodata) {
    if (error) return console.log(error); //unknown error, check the console
    ...

我在 "View Page source" 中看到了下面的代码：

d3.json("C:/Users/XXXXXXXX/Documents/Visual Studio 2013/Projects/ASP.NET/proj/proj/App_Data/states.geojson", function (error, geodata) { ...

还用过：

string path = GetGisPath() + "\states.geojson";
ViewBag.Path = path;
return View();

并在 "View Page source" 中看到：

d3.json("C:\Users\XXXXXXXX\Documents\Visual Studio 2013\Projects\ASP.NET\proj\proj\App_Data\states.geojson", function (error, geodata) { ...

有什么建议吗？

Answer 1

~~好的。我找不到加载 Geojson 文件的解决方案。~~

但一个解决方案是将 Geojson 转换为 SVG 并加载 SVG 文件。效果很好。

更新：

经过多次尝试，下面的代码应该添加到 Web.config（而不是 web.config）。

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".geojson" mimeType="application/geojson" />
  </staticContent>
</system.webServer>

使用文件夹中的文件，例如 "Data"。

d3.json("/Data/geo/states.geojson", function (error, geodata) {

...}

我在使用 "App_Data" 文件夹时看到错误。

d3.json("/App_Data/geo/states.geojson", function (error, geodata) {

...}

将 Geojson 加载到 AP.NET MVC 5

Load a Geojson to AP.NET MVC 5

asp.net-mvc

geojson

d3.js