运行下面的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的视图。我在View中复制了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
...
我在“查看页面源代码”中看到了以下代码：
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();
并在“查看页面源”中看到：
d3.json("C:\Users\XXXXXXXX\Documents\Visual Studio 2013\Projects\ASP.NET\proj\proj\App_Data\states.geojson", function (error, geodata) { ...
有什么建议吗？
好。我没有找到加载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) {
... }