时间戳

首页 > 解决方案 > 显示和过滤 geoJSON 类型而不是矢量类型

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

问题描述

我直接从 Mapbox 使用这个示例来过滤地图视图中的功能，因为它正是我正在寻找的功能。

但是，我一直在努力用我从 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 放入此过滤器，我将不胜感激。提前谢谢了！

标签： javascriptmapbox-gl-js

解决方案

使用以下代码将 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'
        })
    })
})
    });

推荐阅读