在地图中可视化 Neo4j-Spatial 数据库

Visualize Neo4j-Spatial database in a map

我已经能够将一些 shapefile 导入 Neo4j 2.3.1。 现在如何在地图上查看此数据?

我试过 GeoServer 和 uDig 上的 Wiki 说明,但它们都已过时,我无法使用它。

有没有最近的教程或其他工具可以解决这个问题?

我使用了带有 Mapbox.js 的 neo4j-spatial 来可视化地图中的几何图形。

对于我的用例,我在 neo4j-spatial 中索引了美国国会选区几何图形,然后根据用户在地图上单击的位置查询空间索引,返回最近的选区,包括 WKT 字符串和 Cypher 查询的结果。为了在地图中呈现 WKT 多边形,我编写了一个简单的 javascript 函数来将其解析为点数组以添加地图注释。

以下是一些相关的代码片段:

创建地图并为地图定义点击处理程序:

L.mapbox.accessToken = MB_API_TOKEN;
var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([39.8282, -98.5795], 5);

map.on('click', function(e) {
  clearMap(map);
  getClosestDistrict(e);
});

处理鼠标点击

/**
  *  Find the District for a given latlng.
  *  Find the representative, commitees and subjects for that rep.
  */
function infoDistrictWithinDistance(latlng, distance) {

  var districtParams = {
    "layer": "geom",
    "pointX": latlng.lng,
    "pointY": latlng.lat,
    "distanceInKm": distance
  };

 var districtURL = baseURI + findGeometriesPath;
 makePOSTRequest(districtURL, districtParams, function (error, data) {

   if (error) {
    console.log("Error");
   } else {
    console.log(data);

   var params = {
    "state": data[0]["data"]["state"],
    "district": data[0]["data"]["district"]
   };

   var points = parseWKTPolygon(data[0]["data"]["wkt"]);

   makeCypherRequest([{"statement": subjectsQuery, "parameters": params}], function (error, data) {

    if (error) {
      console.log("Error");
    } else {
      console.log(data);

      var districtInfo = data["results"][0]["data"][0]["row"][0];
      districtInfo["points"] = points;
      districtInfo["state"] = params["state"];
      districtInfo["district"] = params["district"];
      console.log(districtInfo);

      addDistrictToMap(districtInfo, latlng);
    }
   });
 }
});

将WKT解析为点数组

/**
 *  Converts Polygon WKT string to an array of [x,y] points
 */
function parseWKTPolygon(wkt) {
  var pointArr = [];
  var points = wkt.slice(10, -3).split(",");

  $.each(points, function(i,v) {
    var point = $.trim(v).split(" ");
    var xy = [Number(point[1]), Number(point[0])];
    pointArr.push(xy)
  });

  return pointArr;
}

代码在this repo. You can see the simple map demo here (just click anywhere in the US to get started). There is also a recent blog post about this example here.