显示和过滤geoJSON类型而不是矢量类型

时间:2018-09-22 16:52:18

标签: javascript mapbox-gl-js

我直接在Mapbox中使用this example来过滤地图视图中的要素,因为这正是我所要的功能。

但是,我一直在努力用从MongoDB获得的GeoJSON替换.addLayer部分。我希望从MongoDB中显示和过滤的数据集如下所示:

{
    "_id" : ObjectId("5ba64a3c517f3a78325d1534"),
    "geometry" : {
        "type" : "Point",
        "coordinates" : [ 
            13.3325, 
            52.4564
        ]
    },
    "properties" : {
        "name" : "Roberts",
        "entry" : "Tax Advisor",
        "fromPrice" : 125,
        "unit" : "hour"
    },
    "type" : "Feature",
    "__v" : 0
},
{
    "_id" : ObjectId("5ba64a3c517f3a78325d1533"),
    "geometry" : {
        "type" : "Point",
        "coordinates" : [ 
            13.314, 
            52.4901
        ]
    },
    "properties" : {
        "name" : "Taylor",
        "entry" : "Law Firm",
        "fromPrice" : 160,
        "unit" : "hour"
    },
    "type" : "Feature",
    "__v" : 0
}

原因与机场无关,但概念相同。如果有人可以帮助我将geoJSON放入此过滤器,我将不胜感激。提前非常感谢!

2 个答案:

答案 0 :(得分:0)

使用以下代码对向量进行geojson处理。

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(JSON.stringify(geoData),
    { featureProjection: ol.proj.get('EPSG:4326')})
    }),
   style: new ol.style.Style({
    image: new ol.style.Circle({
        radius: 5,
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
        }),
        fill: new ol.style.Fill({
            color: '#fff'
        })
    })
})
    });

答案 1 :(得分:0)

我使用下面的代码替换并调整了示例中的其他代码以反映传递的数据的变化,从而解决了该问题。

mRecyclerView = (RecyclerView) findViewById(R.id.RecyclerView);
        mRecyclerView.setHasFixedSize(true);
        mAdapter = new MyAdapter(TITLES, ICONS, NAME, this);
        mRecyclerView.setAdapter(mAdapter);
        final GestureDetector mGestureDetector = new GestureDetector(Dictionary.this, new GestureDetector.SimpleOnGestureListener() {
            @Override
            public boolean onSingleTapUp(MotionEvent e) {
                return true;
            }
        });