【问题标题】:The structure of my GeoJSON does not allow LeafLet to display the points on the layer我的 GeoJSON 的结构不允许 LeafLet 显示图层上的点
【发布时间】:2017-07-29 20:24:09
【问题描述】:

我正在使用 Leaflet-ajax 项目 (https://github.com/calvinmetcalf/leaflet-ajax),我想声明一个 geojsonLayer 变量,如下所示:

var geojsonLayer = L.geoJson.ajax("http://localhost:7070/findInArea");

http://localhost:7070/findInArea 是我编写的 Dropwizard REST Web 服务的端点。

在尝试使用 http://localhost:7070/findInArea 作为参数之前,我尝试使用 JSON 文件作为参数,其中包含我的 REST Web 服务返回的内容:

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "imo": 0,
            "course": "0.0",
            "description": "description",
            "mmsi": 432473000,
            "type": "VESSEL",
            "heading": "NaN"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-4.064533333333333, 5.29355]
        }
    }, {
        "type": "Feature",
        "properties": {
            "imo": 0,
            "course": "0.0",
            "description": "description",
            "mmsi": 375488000,
            "type": "VESSEL",
            "heading": "NaN"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-4.025521666666666, 5.303138333333333]
        }
    }, {
        "type": "Feature",
        "properties": {
            "imo": 0,
            "course": "0.0",
            "description": "description",
            "mmsi": 355794000,
            "type": "VESSEL",
            "heading": "NaN"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-4.01319, 5.28968]
        }
    }]
}

当我尝试使用此 JSON 时,点不会显示在图层上。我在网上搜索了一个适用于 (Geo)JSON 的示例。在https://github.com/calvinmetcalf/leaflet-ajax/tree/gh-pages/example 我找到了一个:

{
   "type":"FeatureCollection",
   "features":[
      {
         "geometry":{
            "type":"Point",
            "coordinates":[
               -71.123723098996251,
               42.379003083976961
            ]
         },
         "type":"Feature",
         "id":0,
         "properties":{
            "UNDERGRAD":43,
            "CITYST":"Cambridge, MA",
            "OBJECTID":72.0,
            "URL":"http://www.longy.edu",
            "TYPE":"PRI",
            "DESCRIPTN":"4-year or above",
            "NCES_ID":"166489",
            "ZIPCODE":"02138",
            "L_ACC_EST":16,
            "SITE":"1",
            "L_SRC_1":"nces.ed.gov",
            "L_BASE":"DOQ",
            "DEGREES":"C, M",
            "L_TYPE":"CB",
            "ADDRESS":"One Follen St",
            "COLLEGE":"Longy School Of Music",
            "L_METH":"IN-WEBSITE",
            "GRAD":137,
            "MAIN_TEL":"(617) 876-0956"
         }
      },
      {
         "geometry":{
            "type":"Point",
            "coordinates":[
               -71.308156671517793,
               42.643612284195882
            ]
         },
         "type":"Feature",
         "id":1,
         "properties":{
            "UNDERGRAD":79,
            "CITYST":"Lowell, MA",
            "OBJECTID":73.0,
            "URL":"http://www.lowellacademy.com",
            "TYPE":"PRI",
            "DESCRIPTN":"less-than-2-year",
            "NCES_ID":"166498",
            "ZIPCODE":"01852",
            "L_ACC_EST":16,
            "SITE":"1",
            "L_SRC_1":"nces.ed.gov",
            "L_BASE":"DOQ",
            "DEGREES":"C",
            "L_TYPE":"CB",
            "ADDRESS":"136 Central St",
            "COLLEGE":"Lowell Academy Of Hairdressing",
            "L_METH":"IN-VERB",
            "GRAD":0,
            "MAIN_TEL":"(978) 453-3235"
         }
      }
   ]
}

目前我的 REST Web 服务的 Java 代码是:

@Override
public FeatureCollection findTracksInACertainArea(double longitudeMin, double longitudeMax, double latitudeMin, double latitudeMax){

    FeatureCollection fc = new FeatureCollection();
    List<Feature> features = new ArrayList<Feature>();
    DBCursor cursor = null;

    BasicDBObject query = new BasicDBObject();
    query.put("detection.position.0", BasicDBObjectBuilder.start("$gte", longitudeMin).add("$lte", longitudeMax).get());
    query.put("detection.position.1", BasicDBObjectBuilder.start("$gte", latitudeMin).add("$lte", latitudeMax).get());

    cursor = collection.find(query);

    while(cursor.hasNext()) {
        final Track track = TrackDAOHelper.convertTrackFromDBObject(cursor.next());
        features.add(buildFeature(track));
    }

    fc.setFeatures(features);
    return fc;
}

private Feature buildFeature(Track track) {
    Feature feature = new Feature();
    Point point = new Point(track.getDetection().getPosition().getLongitude(), track.getDetection().getPosition().getLatitude());
    feature.setGeometry(point);
    Map<String, Object> properties = buildProperties(track);
    feature.setProperties(properties);
    return feature;
}

private Map<String, Object> buildProperties(Track track) {
    Map<String, Object> properties = new HashMap<String, Object>();

    if (track != null) {
        if (track.getName() != null)
            properties.put("name", track.getName());

        properties.put("course", "0.0");
        properties.put("heading", "NaN");
        properties.put("type", "VESSEL");

        if (track.getMmsi() != null)
            properties.put("mmsi", track.getMmsi());

        if (track.getImo() != null)
            properties.put("imo", track.getImo());

        if (track.getCallsign() != null)
            properties.put("callsign", track.getCallsign());

        String description = buildDescription();
        properties.put("description", description);
    }
    return properties;
}

private String buildDescription() {
    return "description";
}

如何修改它以获得有效的 (Geo)JSON?

【问题讨论】:

  • 您的第一个 GeoJSON 数据样本似乎工作正常:plnkr.co/edit/WzkE51SlxTBtrKWSRM5y?p=preview 请注意,您可以使用 linting 工具轻松检查您的 GeoJSON 数据,例如geojsonlint.com
  • 它确实适用于我的 GeoJSON。我注意到,如果在我假装不工作的 JSON 中输入了工作 JSON 中的坐标。所以不是JSON的原因,一定是Javascript代码的原因

标签: java json leaflet geojson


【解决方案1】:

不是因为 JSON,而是因为周围的 Javascript 代码

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-11
    • 2019-04-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多